feat: new sidebar (#1201)

* feat: new sidebar

* feat: new sidebar

* fix: menuitems

* fix: progress

* fix: inset

* feat: header

* fix: icon

* fix: active menu

* fix: navlinks

* fix: sidebar

* fix: sidebar hint, collapse

* fix: cleanup

* fix: csp plugin warnings

* fix: settings layout

* fix: linting error

* fix: use ComponentPropsWithoutRef

* fix: run prettier

* fix: typechecking

* chore: replace radix sidebar icon with lucide

* fix: remove todo

* fix: improve collapsed sidebar transition

* fix: use asChild

* fix: upgrade dialog to latest version

* fix: right align indicators

* fix: upgrade radix libraries

* fix: app sidebar dropdown items

* fix: app header spacing

* fix: close sidebar on mobile navigation

* fix: more link handlers

* fix: pro badges

* fix: lockfile

* fix: upgrade radix

* fix: remove user data stub

* fix: cursor pointer

* fix: use classes to hide / show elements

* fix: persist state in localstorage

* fix: mark mobile hook as deprecated

* fix: remove collapsed sidebar state

* fix: only show health indicator when there are health alarms

* fix: update tooltip unexpectedly opening on mobile when sidebar is expanded

* chore: remove unnecessary cn method

---------

Co-authored-by: im-adithya <[email protected]>
Co-authored-by: Roland Bewick <[email protected]>

Author: 3 people

frontend/package.json

@@ -34,20 +34,20 @@
     "@radix-ui/react-progress": "^1.0.3",
     "@radix-ui/react-radio-group": "^1.2.0",
     "@radix-ui/react-select": "^2.0.0",
-    "@radix-ui/react-separator": "^1.0.3",
-    "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-separator": "^1.1.2",
+    "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-toast": "^1.1.5",
-    "@radix-ui/react-tooltip": "^1.0.7",
+    "@radix-ui/react-tooltip": "^1.1.8",
     "@scure/bip39": "^1.2.2",
     "argon2-wasm-esm": "^1.0.3",
-    "class-variance-authority": "^0.7.0",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.0",
     "compare-versions": "^6.1.1",
     "date-fns": "^3.6.0",
     "dayjs": "^1.11.10",
     "embla-carousel-react": "^8.0.2",
-    "lucide-react": "^0.363.0",
+    "lucide-react": "^0.479.0",
     "react": "^18.2.0",
     "react-day-picker": "^8.10.1",
     "react-dom": "^18.2.0",

frontend/src/components/AppHeader.tsx

@@ -1,31 +1,34 @@
 import { ReactElement } from "react";
-import Breadcrumbs from "src/components/Breadcrumbs";
+import { Separator } from "src/components/ui/separator";
+import { SidebarTrigger } from "src/components/ui/sidebar";
 
 type Props = {
   title: string | ReactElement;
-  description: string | ReactElement;
+  description?: string | ReactElement;
   contentRight?: React.ReactNode;
   breadcrumb?: boolean;
 };
 
-function AppHeader({
-  title,
-  description,
-  contentRight,
-  breadcrumb = true,
-}: Props) {
+function AppHeader({ title, description = "", contentRight }: Props) {
   return (
     <>
-      {breadcrumb && <Breadcrumbs />}
-      <div className="flex justify-between border-b border-border pb-3 lg:pb-6 items-center">
-        <div className="flex-1">
-          <h1 className="text-2xl lg:text-3xl font-semibold">{title}</h1>
-          <p className="hidden lg:inline text-muted-foreground">
-            {description}
-          </p>
+      <header className="flex flex-row items-center border-b border-border pb-4 gap-2">
+        <SidebarTrigger className="-ml-1 sm:hidden" />
+        <Separator orientation="vertical" className="mr-2 h-4 sm:hidden" />
+        <div className="flex flex-col flex-1">
+          <div className="flex justify-between items-center">
+            <div className="flex-1">
+              <h1 className="text-2xl lg:text-3xl font-semibold">{title}</h1>
+              {description && (
+                <p className="hidden lg:inline text-muted-foreground">
+                  {description}
+                </p>
+              )}
+            </div>
+            <div className="flex gap-3 h-full">{contentRight}</div>
+          </div>
         </div>
-        <div className="flex gap-3 h-full">{contentRight}</div>
-      </div>
+      </header>
     </>
   );
 }