[COMPONENTS][CSS] Adding components styling properly.

public/components/Left/assets/css/left.css

@@ -0,0 +1,61 @@
+.panel-left .panel-content {
+    left: 0;
+}
+
+#panel-left-toggle:not(:checked),
+#panel-left-toggle:checked {
+    position: absolute;
+    top: -100%;
+}
+#panel-left-toggle:focus + * {
+    border-radius: 4px;
+    border: 2px solid var(--white);
+}
+#panel-left-icon {
+    cursor: pointer !important;
+    border: 2px solid transparent;
+}
+
+.profile-navigation {
+    display: flex;
+    flex-direction: column;
+}
+
+/* TIMELINE NAVIGATION / PLUGINS */
+.timeline-nav {
+    margin-bottom: var(--main-size);
+}
+
+.timeline-nav a {
+    display: flex;
+}
+
+.timeline-nav hr {
+    flex: 1;
+    background: linear-gradient(90deg, var(--bg3), transparent);
+}
+.timeline-nav a {
+    color: var(--white);
+}
+
+.timeline-nav .active {
+    color: var(--white);
+}
+
+.main-nav a {
+    display: flex;
+    flex-direction: column;
+}
+
+.footer {
+    margin-top: auto;
+    font-size: var(--small-size);
+}
+
+@media only screen
+and (min-width : 1281px) {
+
+    #panel-left-icon {
+        display: none;
+    }
+}

public/components/Right/assets/css/right.css

@@ -0,0 +1,24 @@
+.panel-right .panel-content {
+    right: 0;
+}
+
+#panel-right-toggle:not(:checked),
+#panel-right-toggle:checked {
+    position: absolute;
+    top: -100%;
+}
+#panel-right-toggle:focus + * {
+    border-radius: 4px;
+    border: 2px solid var(--white);
+}
+#panel-right-icon {
+    cursor: pointer !important;
+    border: 2px solid transparent;
+}
+
+@media only screen
+and (min-width: 1281px) {
+    #panel-right-icon {
+        display: none;
+    }
+}