Sidebar styling

In general styling capabilities with scsss

frontend/src/styles/components/_sidebar.scss

@@ -0,0 +1,34 @@
+@use "../variables" as *;
+@use "../mixins" as *;
+
+.sidebar {
+  width: 260px;
+  background: $color-sidebar;
+  color: #fff;
+  min-height: 100vh;
+  padding: $spacing-md;
+
+  ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: $spacing-sm; }
+
+  a, .menu-toggle {
+    color: #fff;
+    text-decoration: none;
+    display: block;
+    padding: 8px 12px;
+    border-radius: 4px;
+    &:hover { background: rgba(255,255,255,0.04); }
+  }
+
+  .menu-toggle { background: transparent; border: none; text-align: left; width: 100%; cursor: pointer; }
+
+  .submenu {
+    margin-left: 8px;
+    background: rgba(255,255,255,0.02);
+    border-radius: 4px;
+    padding: 6px;
+    li { padding: 4px 0; }
+  }
+
+  &.user { width: 220px; background: darken($color-sidebar, 6%); }
+}
+