[TOOL-3761] Dashboard: Use new sidebar layout in project pages

apps/dashboard/src/@/components/blocks/MobileSidebar.tsx

@@ -19,30 +19,7 @@ export function MobileSidebar(props: {
   triggerClassName?: string;
 }) {
   const [isOpen, setIsOpen] = useState(false);
-  const pathname = usePathname();
-
-  const activeLink = useMemo(() => {
-    function isActive(link: SidebarBaseLink) {
-      if (link.exactMatch) {
-        return link.href === pathname;
-      }
-      return pathname?.startsWith(link.href);
-    }
-
-    for (const link of props.links) {
-      if ("group" in link) {
-        for (const subLink of link.links) {
-          if (isActive(subLink)) {
-            return subLink;
-          }
-        }
-      } else {
-        if (isActive(link)) {
-          return link;
-        }
-      }
-    }
-  }, [props.links, pathname]);
+  const activeLink = useActiveSidebarLink(props.links);
 
   const defaultTrigger = (
     <Button
@@ -75,3 +52,32 @@ export function MobileSidebar(props: {
     </Dialog>
   );
 }
+
+export function useActiveSidebarLink(links: SidebarLink[]) {
+  const pathname = usePathname();
+
+  const activeLink = useMemo(() => {
+    function isActive(link: SidebarBaseLink) {
+      if (link.exactMatch) {
+        return link.href === pathname;
+      }
+      return pathname?.startsWith(link.href);
+    }
+
+    for (const link of links) {
+      if ("group" in link) {
+        for (const subLink of link.links) {
+          if (isActive(subLink)) {
+            return subLink;
+          }
+        }
+      } else if ("href" in link) {
+        if (isActive(link)) {
+          return link;
+        }
+      }
+    }
+  }, [links, pathname]);
+
+  return activeLink;
+}

apps/dashboard/src/@/components/blocks/Sidebar.tsx

@@ -2,11 +2,13 @@ import { ExternalLinkIcon } from "lucide-react";
 import type React from "react";
 import { cn } from "../../lib/utils";
 import { NavLink } from "../ui/NavLink";
+import { Separator } from "../ui/separator";
 
 export type SidebarBaseLink = {
   href: string;
   label: React.ReactNode;
   exactMatch?: boolean;
+  icon?: React.FC<{ className?: string }>;
   tracking?: {
     category: string;
     action: string;
@@ -19,6 +21,9 @@ export type SidebarLink =
   | {
       group: string;
       links: SidebarBaseLink[];
+    }
+  | {
+      separator: true;
     };
 
 type SidebarContentProps = {
@@ -27,21 +32,18 @@ type SidebarContentProps = {
   className?: string;
 };
 
-export function Sidebar(props: SidebarContentProps) {
+export function CustomSidebar(props: SidebarContentProps) {
   return (
-    <aside
-      className={cn(
-        "sticky top-0 hidden w-[230px] flex-shrink-0 self-start lg:block",
-        props.className,
-      )}
-    >
-      <div className="py-7">
-        {props.header}
-        <div className="flex flex-col gap-1">
-          <RenderSidebarLinks links={props.links} />
+    <div className={cn("hidden w-[230px] shrink-0 lg:block", props.className)}>
+      <aside className="sticky top-0 self-start">
+        <div className="py-7">
+          {props.header}
+          <div className="flex flex-col gap-1">
+            <RenderSidebarLinks links={props.links} />
+          </div>
         </div>
-      </div>
-    </aside>
+      </aside>
+    </div>
   );
 }
 
@@ -61,16 +63,21 @@ export function RenderSidebarLinks(props: { links: SidebarLink[] }) {
           );
         }
 
+        if ("separator" in link) {
+          return <Separator className="my-2" />;
+        }
+
         const isExternal = link.href.startsWith("http");
         return (
           <NavLink
             // biome-ignore lint/suspicious/noArrayIndexKey: items won't be reordered
             key={i}
             href={link.href}
             className="flex items-center gap-2 rounded-md px-3 py-2 text-muted-foreground text-sm hover:bg-accent"
-            activeClassName="text-foreground"
+            activeClassName="text-foreground bg-accent"
             exactMatch={link.exactMatch}
           >
+            {link.icon && <link.icon className="size-4" />}
             {link.label}
             {isExternal && <ExternalLinkIcon className="size-3" />}
           </NavLink>

apps/dashboard/src/@/components/blocks/SidebarLayout.tsx

@@ -1,6 +1,22 @@
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+} from "@/components/ui/sidebar";
 import { cn } from "../../lib/utils";
-import { MobileSidebar } from "./MobileSidebar";
-import { Sidebar, type SidebarLink } from "./Sidebar";
+import { NavLink } from "../ui/NavLink";
+import { Separator } from "../ui/separator";
+import { MobileSidebar, useActiveSidebarLink } from "./MobileSidebar";
+import { CustomSidebar, type SidebarLink } from "./Sidebar";
 
 export function SidebarLayout(props: {
   sidebarLinks: SidebarLink[];
@@ -17,7 +33,10 @@ export function SidebarLayout(props: {
         props.className,
       )}
     >
-      <Sidebar links={sidebarLinks} className={props.desktopSidebarClassName} />
+      <CustomSidebar
+        links={sidebarLinks}
+        className={props.desktopSidebarClassName}
+      />
       <MobileSidebar
         links={sidebarLinks}
         triggerClassName={props.mobileSidebarClassName}
@@ -29,3 +48,115 @@ export function SidebarLayout(props: {
     </div>
   );
 }
+
+export function FullWidthSidebarLayout(props: {
+  contentSidebarLinks: SidebarLink[];
+  footerSidebarLinks?: SidebarLink[];
+  children: React.ReactNode;
+  className?: string;
+  footer?: React.ReactNode;
+}) {
+  const { contentSidebarLinks, children, footerSidebarLinks } = props;
+  return (
+    <div
+      className={cn("flex w-full flex-1 overflow-y-hidden", props.className)}
+    >
+      {/* left - sidebar */}
+      <Sidebar collapsible="icon" side="left">
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupContent>
+              <RenderSidebarGroup
+                sidebarLinks={contentSidebarLinks}
+                groupName={undefined}
+              />
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+
+        {footerSidebarLinks && (
+          <SidebarFooter className="pb-3">
+            <RenderSidebarGroup
+              sidebarLinks={footerSidebarLinks}
+              groupName={undefined}
+            />
+          </SidebarFooter>
+        )}
+
+        <SidebarRail />
+      </Sidebar>
+
+      {/* right - content */}
+      <div className="flex h-full flex-grow flex-col overflow-y-auto">
+        <MobileSidebarTrigger
+          links={[...contentSidebarLinks, ...(footerSidebarLinks || [])]}
+        />
+
+        <main className="container z-0 flex min-w-0 max-w-[1280px] grow flex-col pb-20 max-sm:w-full lg:pt-6">
+          {children}
+        </main>
+        {props.footer}
+      </div>
+    </div>
+  );
+}
+
+function RenderSidebarGroup(props: {
+  sidebarLinks: SidebarLink[];
+  groupName: string | undefined;
+}) {
+  const { sidebarLinks } = props;
+  const sidebar = useSidebar();
+
+  return (
+    <SidebarMenu className="gap-1.5">
+      {sidebarLinks.map((link) => {
+        if ("href" in link) {
+          return (
+            <SidebarMenuItem key={link.href}>
+              <SidebarMenuButton asChild>
+                <NavLink
+                  href={link.href}
+                  className="flex items-center gap-2 text-muted-foreground text-sm hover:bg-accent"
+                  activeClassName="text-foreground bg-accent"
+                  exactMatch={link.exactMatch}
+                  tracking={link.tracking}
+                  onClick={() => {
+                    sidebar.setOpenMobile(false);
+                  }}
+                >
+                  {link.icon && <link.icon className="size-4" />}
+                  <span>{link.label}</span>
+                </NavLink>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          );
+        }
+
+        if ("separator" in link) {
+          return <SidebarSeparator className="my-1" />;
+        }
+
+        return (
+          <RenderSidebarGroup
+            sidebarLinks={link.links}
+            groupName={link.group}
+            key={link.group}
+          />
+        );
+      })}
+    </SidebarMenu>
+  );
+}
+
+function MobileSidebarTrigger(props: { links: SidebarLink[] }) {
+  const activeLink = useActiveSidebarLink(props.links);
+
+  return (
+    <div className="mb-4 flex items-center gap-3 border-b px-4 py-4 lg:hidden">
+      <SidebarTrigger className="size-4" />
+      <Separator orientation="vertical" className="h-4" />
+      {activeLink && <span className="text-sm">{activeLink.label}</span>}
+    </div>
+  );
+}

apps/dashboard/src/@/components/ui/NavLink.tsx

@@ -15,6 +15,7 @@ export type NavButtonProps = {
     action: string;
     label: string;
   };
+  onClick?: () => void;
 };
 
 export function NavLink(props: React.PropsWithChildren<NavButtonProps>) {
@@ -30,7 +31,9 @@ export function NavLink(props: React.PropsWithChildren<NavButtonProps>) {
       href={props.href}
       className={cn(props.className, isActive && props.activeClassName)}
       target={props.href.startsWith("http") ? "_blank" : undefined}
+      prefetch={false}
       onClick={() => {
+        props.onClick?.();
         if (props.tracking) {
           track({
             category: props.tracking.category,