+
+
+ {(item): JSX.Element => {
+ const Icon = item.icon;
-
-
- {(item): JSX.Element => {
- const Icon = item.icon;
+ return (
+
+ );
+ }}
+
+
- return (
-
- );
- }}
-
+
+
);
diff --git a/Frontend/src/components/shell/TopBar/UserNavButton.module.scss b/Frontend/src/components/shell/TopBar/UserNavButton.module.scss
new file mode 100644
index 0000000..d33f387
--- /dev/null
+++ b/Frontend/src/components/shell/TopBar/UserNavButton.module.scss
@@ -0,0 +1,100 @@
+.userButton {
+ position: relative;
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ width: 2.75rem;
+ height: 2.75rem;
+ margin-left: var(--space-1);
+ padding: 0;
+ border: 0;
+ border-radius: 999px;
+ background: transparent;
+ color: var(--color-text-muted);
+ cursor: pointer;
+ overflow: hidden;
+ transition:
+ transform 180ms var(--easing-standard),
+ color 220ms var(--easing-standard);
+}
+
+.userButton:hover {
+ transform: scale(1.05);
+ color: var(--color-text);
+}
+
+.userButton:hover .spinContainer {
+ animation-play-state: running;
+ opacity: 1;
+}
+
+.userButton:focus-visible {
+ outline: none;
+ color: var(--color-text);
+ box-shadow: 0 0 0 0.12rem color-mix(in srgb, var(--color-accent-strong) 28%, transparent);
+}
+
+.spinContainer {
+ position: absolute;
+ inset: 0;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ opacity: 0.72;
+ transition: opacity 220ms var(--easing-standard);
+ animation: spin-reverse 1.5s ease-in-out infinite reverse;
+ animation-play-state: paused;
+ pointer-events: none;
+}
+
+.spinRing {
+ width: 100%;
+ height: 100%;
+ border-radius: 999px;
+ background:
+ conic-gradient(
+ from 0deg,
+ transparent 0deg 28deg,
+ var(--color-primary-1) 28deg 118deg,
+ transparent 118deg 148deg,
+ var(--color-primary-2) 148deg 238deg,
+ transparent 238deg 268deg,
+ var(--color-primary-3) 268deg 358deg,
+ transparent 358deg 360deg
+ );
+ mask: radial-gradient(circle, transparent 63%, black 66%);
+ -webkit-mask: radial-gradient(circle, transparent 63%, black 66%);
+ animation: spin-forward 14s linear infinite;
+}
+
+.userCore {
+ position: relative;
+ z-index: 1;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 78%;
+ height: 78%;
+ border-radius: 999px;
+ background: var(--color-surface-muted);
+}
+
+@keyframes spin-forward {
+ from {
+ transform: rotate(0deg);
+ }
+
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+@keyframes spin-reverse {
+ from {
+ transform: rotate(0deg);
+ }
+
+ to {
+ transform: rotate(-360deg);
+ }
+}
diff --git a/Frontend/src/components/shell/TopBar/UserNavButton.tsx b/Frontend/src/components/shell/TopBar/UserNavButton.tsx
new file mode 100644
index 0000000..06b3955
--- /dev/null
+++ b/Frontend/src/components/shell/TopBar/UserNavButton.tsx
@@ -0,0 +1,19 @@
+// Path: Frontend/src/components/shell/TopBar/UserNavButton.tsx
+
+import type { JSX } from "solid-js";
+import { User } from "../../../lib/icons";
+import styles from "./UserNavButton.module.scss";
+
+export const UserNavButton = (): JSX.Element => {
+ return (
+
+ );
+};
diff --git a/Frontend/src/components/shell/WorkspaceSidebar/WorkspaceSidebar.module.scss b/Frontend/src/components/shell/WorkspaceSidebar/WorkspaceSidebar.module.scss
index 789e8da..2538491 100644
--- a/Frontend/src/components/shell/WorkspaceSidebar/WorkspaceSidebar.module.scss
+++ b/Frontend/src/components/shell/WorkspaceSidebar/WorkspaceSidebar.module.scss
@@ -1,6 +1,7 @@
.sidebar {
--sidebar-nav-item-min-height: var(--control-size-lg);
--sidebar-dock-clearance: 8rem;
+ position: relative;
min-width: 0;
min-height: 0;
display: grid;
@@ -8,28 +9,17 @@
gap: var(--space-4);
padding: var(--space-4);
overflow: hidden;
+ border-top-left-radius: inherit;
+ isolation: isolate;
}
.header {
display: grid;
- gap: 0.2rem;
+ gap: var(--space-2);
}
-.eyebrow {
- @include text-caption;
- color: var(--color-text-muted);
- text-transform: uppercase;
- letter-spacing: 0.08em;
-}
-
-.title {
- @include text-title;
-}
-
-.meta {
- @include text-caption;
- color: var(--color-text-muted);
- max-width: 28ch;
+.headerDrawerOpen {
+ z-index: 4;
}
.section {
@@ -37,6 +27,17 @@
grid-template-rows: auto minmax(0, 1fr);
gap: var(--space-2);
min-height: 0;
+ position: relative;
+ z-index: 1;
+ transition:
+ opacity 180ms var(--easing-standard),
+ transform 220ms var(--easing-standard);
+}
+
+.sectionHidden {
+ opacity: 0;
+ pointer-events: none;
+ transform: translateX(var(--space-3));
}
.navScroller {
@@ -78,7 +79,7 @@
border-color: var(--color-border);
background: var(--color-surface);
color: var(--color-text);
- box-shadow: var(--shadow-soft);
+ box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
}
.icon {
diff --git a/Frontend/src/components/shell/WorkspaceSidebar/WorkspaceSidebar.tsx b/Frontend/src/components/shell/WorkspaceSidebar/WorkspaceSidebar.tsx
index 579bee5..7d0329a 100644
--- a/Frontend/src/components/shell/WorkspaceSidebar/WorkspaceSidebar.tsx
+++ b/Frontend/src/components/shell/WorkspaceSidebar/WorkspaceSidebar.tsx
@@ -1,23 +1,42 @@
// Path: Frontend/src/components/shell/WorkspaceSidebar/WorkspaceSidebar.tsx
-import { For, Show, type JSX } from "solid-js";
-import { workspaceSidebarItems } from "../data/shell.data";
+import { For, Show, createSignal, type JSX } from "solid-js";
+import { ProjectSelector } from "../ProjectSelector/ProjectSelector";
+import { serverSidebarItems } from "../data/shell.data";
import styles from "./WorkspaceSidebar.module.scss";
export const WorkspaceSidebar = (): JSX.Element => {
+ const [isProjectDrawerOpen, setIsProjectDrawerOpen] = createSignal(false);
+
return (
-