Sidebar styling

In general styling capabilities with scsss

frontend/src/styles/_mixins.scss

@@ -0,0 +1,6 @@
+@mixin card {
+  backgroud: #fff;
+  border-radius: &border-radius;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
+  padding: $spacing-md;
+}

frontend/src/styles/_utilities.scss

@@ -0,0 +1,4 @@
+.u-hidden { display: none !important; }
+.u-gap-sm { gap: $spacing-sm; }
+.text-muted { color: $color-muted; }
+

frontend/src/styles/_variables.scss

@@ -0,0 +1,8 @@
+$color-bg: #ffffff;
+$color-sidebar: #0f172a;
+$color-accent: #2563eb;
+$color-muted: #6b7280;
+$spacing-sm: 8px;
+$spacing-md: 16px;
+$border-radius: 6px;
+

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%); }
+}
+

frontend/src/styles/components/_tickets.scss

@@ -0,0 +1,10 @@
+.ticket-card {
+  @include card();
+  border-left: 4px solid $color-accent;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-sm;
+  .meta { color: $color-muted; font-size: 0.9rem; }
+  .title { font-weight: 600; }
+}
+

frontend/src/styles/main.scss

@@ -0,0 +1,22 @@
+@use "variables";
+@use "mixins";
+@use "utilities";
+@use "components/sidebar";
+@use "components/tickets";
+
+body {
+  background: variables.$color-bg;
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
+  color: #111827;
+  margin: 0;
+}
+
+.admin { display: flex; }
+.content { flex: 1; padding: variables.$spacing-md; }
+
+@media (max-width: 768px) {
+  .sidebar { position: fixed; left: -100%; transition: left .2s; }
+  .sidebar.open { left: 0; }
+  .content { margin-left: 0; }
+}
+