Add the sidebar to the Members page layout and update app-sidebar to link to the correct page when navigating to the Members page.

Author: jhodapp

src/app/organizations/[id]/members/layout.tsx

@@ -3,6 +3,8 @@ import "@/styles/globals.css";
 import { siteConfig } from "@/site.config.ts";
 
 import { SiteHeader } from "@/components/ui/site-header";
+import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
+import { AppSidebar } from "@/components/ui/app-sidebar";
 export const metadata: Metadata = {
   title: siteConfig.name,
   description: "Manage coaching members",
@@ -14,11 +16,14 @@ export default function MembersLayout({
   children: React.ReactNode;
 }>) {
   return (
-    // Ensure that SiteHeader has enough vertical space to stay sticky at the top
-    // of the page by using "min-h-screen" in the parent div
-    <div className="min-h-screen">
-      <SiteHeader />
-      <main>{children}</main>
-    </div>
+    <SidebarProvider>
+      <div className="flex min-h-screen min-w-full">
+        <AppSidebar />
+        <SidebarInset>
+          <SiteHeader />
+          <main className="flex-1 p-6">{children}</main>
+        </SidebarInset>
+      </div>
+    </SidebarProvider>
   );
 }

src/components/ui/app-sidebar.tsx

@@ -20,6 +20,7 @@ import {
   SidebarRail,
   SidebarSeparator,
 } from "@/components/ui/sidebar";
+import { useOrganizationStateStore } from "@/lib/providers/organization-state-store-provider";
 
 // Custom styles for menu buttons to ensure consistent centering
 const menuButtonStyles = {
@@ -30,6 +31,8 @@ const menuButtonStyles = {
 };
 
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  const { currentOrganizationId } = useOrganizationStateStore((state) => state);
+
   return (
     <Sidebar collapsible="icon" {...props}>
       <SidebarHeader className="h-16 flex flex-col justify-between pb-0">
@@ -101,7 +104,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
                     menuButtonStyles.buttonCollapsed
                   )}
                 >
-                  <a href="/members">
+                  <a href={`/organizations/${currentOrganizationId}/members`}>
                     <span className={menuButtonStyles.iconWrapper}>
                       <Users className="h-4 w-4" />
                     </span>