feat: revamps and refactors the sidebar (#1)

wsameer · web-flow · commit 0f363e85a927 · 2025-08-09T13:32:40.000-04:00
* fix: lag in sidebar collapse

* updated sidebar and added more menu

* first steps for settings
diff --git a/resources/js/components/layout/page-layout.tsx b/resources/js/components/layout/page-layout.tsx
@@ -1,23 +1,24 @@
-import { usePage } from '@inertiajs/react'
+import { Head, usePage } from '@inertiajs/react'
 import { type PropsWithChildren } from 'react'
 
 import { type SharedProps, type BreadcrumbItem as BreadcrumbItemType } from '@/types'
-
-import { AppContent } from '../common/app-content'
-import { AppSidebar } from '../navigation/app-sidebar'
-import { AppSidebarHeader } from '../navigation/app-sidebar-header'
 import { SidebarProvider } from '../ui/sidebar'
+import { AppSidebar } from '../sidebar/app-sidebar'
+import { AppSidebarHeader } from '../sidebar/app-sidebar-header'
+import { AppContent } from '../common/app-content'
 
 export const PageLayout = ({
   children,
+  pageTitle,
   breadcrumbs = [],
-}: PropsWithChildren & { breadcrumbs?: BreadcrumbItemType[] }) => {
+}: PropsWithChildren & { pageTitle: string; breadcrumbs?: BreadcrumbItemType[] }) => {
   const isOpen = usePage<SharedProps>().props.sidebarOpen
 
   return (
     <SidebarProvider defaultOpen={isOpen}>
       <AppSidebar />
-      <AppContent variant="sidebar" className="overflow-x-hidden">
+      <Head title={pageTitle} />
+      <AppContent variant="sidebar">
         <AppSidebarHeader breadcrumbs={breadcrumbs} />
         {children}
       </AppContent>
diff --git a/resources/js/components/navigation/nav-projects.tsx b/resources/js/components/navigation/nav-projects.tsx
diff --git a/resources/js/components/sidebar/app-sidebar-header.tsx b/resources/js/components/sidebar/app-sidebar-header.tsx
diff --git a/resources/js/components/sidebar/app-sidebar.tsx b/resources/js/components/sidebar/app-sidebar.tsx
@@ -1,84 +1,82 @@
-import { BookOpenIcon, GithubIcon, Settings2Icon, SquareTerminal } from 'lucide-react'
 import * as React from 'react'
+import {
+  BookOpenIcon,
+  GithubIcon,
+  LifeBuoy,
+  SendIcon,
+  Settings2Icon,
+  SquareTerminal,
+} from 'lucide-react'
 
 import {
   Sidebar,
   SidebarContent,
   SidebarFooter,
   SidebarHeader,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
   SidebarRail,
 } from '@/components/ui/sidebar'
-import { type NavItem } from '@/types'
-import { Link } from '@inertiajs/react'
-import { AppLogo } from '../common/app-logo'
+import { TeamSwitcher } from './team-switcher'
 import { NavMain } from './nav-main'
 import { NavSecondary } from './nav-secondary'
 import { NavUser } from './nav-user'
+import { type NavItem } from '@/types'
 
 // This is sample data.
 const mainNavItems: NavItem[] = [
   {
     title: 'Dashboard',
     href: '/dashboard', // needs to match path.url for it to be active based on the page you are on
     icon: SquareTerminal,
+    type: 'internal',
   },
   {
     title: 'Settings',
     href: '/settings',
     icon: Settings2Icon,
+    type: 'internal',
   },
-]
-
-const secondaryNavItems: NavItem[] = [
   {
     title: 'Documentation',
     href: 'https://wsameer.github.io/adonisjs-react-starter-kit/intro.html',
     icon: BookOpenIcon,
+    type: 'external',
   },
   {
     title: 'Repository',
-    href: 'https://wsameer.github.io/adonisjs-react-starter-kit/',
+    href: 'https://github.com/wsameer/adonisjs-react-starter-kit',
     icon: GithubIcon,
+    type: 'external',
+  },
+]
+
+const secondaryNavItems: NavItem[] = [
+  {
+    title: 'Support',
+    href: 'https://github.com/wsameer/adonisjs-react-starter-kit/issues/new',
+    icon: LifeBuoy,
+    type: 'external',
+  },
+  {
+    title: 'Feedback',
+    href: 'mailto:someone@example.com',
+    icon: SendIcon,
+    type: 'external',
   },
 ]
 
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
   return (
-    <Sidebar collapsible="icon" variant="inset" {...props}>
+    <Sidebar collapsible="icon" {...props}>
       <SidebarHeader>
-        <SidebarMenu>
-          <SidebarMenuItem>
-            <SidebarMenuButton
-              size="lg"
-              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-              asChild
-            >
-              <Link href="/dashboard" prefetch>
-                <div className="flex size-8 items-center justify-center text-sidebar-primary-foreground">
-                  <AppLogo size="small" />
-                </div>
-                <div className="grid flex-1 text-left text-sm leading-tight">
-                  <span className="truncate font-medium">App name</span>
-                  <span className="truncate text-xs">Enterprise</span>
-                </div>
-              </Link>
-            </SidebarMenuButton>
-          </SidebarMenuItem>
-        </SidebarMenu>
+        <TeamSwitcher />
       </SidebarHeader>
-
       <SidebarContent>
         <NavMain items={mainNavItems} />
         <NavSecondary items={secondaryNavItems} className="mt-auto" />
       </SidebarContent>
-
       <SidebarFooter>
         <NavUser />
       </SidebarFooter>
-
       <SidebarRail />
     </Sidebar>
   )
diff --git a/resources/js/components/sidebar/nav-main.tsx b/resources/js/components/sidebar/nav-main.tsx
@@ -7,11 +7,12 @@ import {
 } from '@/components/ui/sidebar'
 import { type SharedProps, type NavItem } from '@/types'
 import { Link, usePage } from '@inertiajs/react'
+import { Icon } from '../common/icon'
 
-export function NavMain({ items = [] }: { items: NavItem[] }) {
+export function NavMain({ items }: { items: NavItem[] }) {
   const page = usePage<SharedProps>()
   return (
-    <SidebarGroup className="px-2 py-0">
+    <SidebarGroup>
       <SidebarGroupLabel>Platform</SidebarGroupLabel>
       <SidebarMenu>
         {items.map((item) => (
@@ -21,10 +22,17 @@ export function NavMain({ items = [] }: { items: NavItem[] }) {
               isActive={page.url.startsWith(item.href)}
               tooltip={{ children: item.title }}
             >
-              <Link href={item.href} prefetch>
-                {item.icon && <item.icon />}
-                <span>{item.title}</span>
-              </Link>
+              {item.type === 'internal' ? (
+                <Link href={item.href} prefetch>
+                  {item.icon && <Icon iconNode={item.icon} className="h-5 w-5" />}
+                  <span>{item.title}</span>
+                </Link>
+              ) : (
+                <a href={item.href} target="_blank" rel="noopener noreferrer">
+                  {item.icon && <Icon iconNode={item.icon} className="h-5 w-5" />}
+                  <span>{item.title}</span>
+                </a>
+              )}
             </SidebarMenuButton>
           </SidebarMenuItem>
         ))}
diff --git a/resources/js/components/sidebar/nav-secondary.tsx b/resources/js/components/sidebar/nav-secondary.tsx
@@ -1,5 +1,3 @@
-import * as React from 'react'
-
 import {
   SidebarGroup,
   SidebarGroupContent,
diff --git a/resources/js/components/sidebar/nav-user.tsx b/resources/js/components/sidebar/nav-user.tsx
diff --git a/resources/js/components/sidebar/team-switcher.tsx b/resources/js/components/sidebar/team-switcher.tsx
@@ -0,0 +1,28 @@
+import { GalleryVerticalEnd } from 'lucide-react'
+
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar'
+import { Link } from '@inertiajs/react'
+
+export function TeamSwitcher() {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <SidebarMenuButton
+          size="lg"
+          className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+          asChild
+        >
+          <Link href="/dashboard" prefetch>
+            <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+              <GalleryVerticalEnd className="size-4" />
+            </div>
+            <div className="grid flex-1 text-left text-sm leading-tight">
+              <span className="truncate font-medium">App Name</span>
+              <span className="truncate text-xs">Enterprise</span>
+            </div>
+          </Link>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/resources/js/components/ui/dialog.tsx b/resources/js/components/ui/dialog.tsx
@@ -1,5 +1,3 @@
-'use client'
-
 import * as React from 'react'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
 import { XIcon } from 'lucide-react'
diff --git a/resources/js/components/ui/label.tsx b/resources/js/components/ui/label.tsx
@@ -1,5 +1,3 @@
-'use client'
-
 import * as React from 'react'
 import * as LabelPrimitive from '@radix-ui/react-label'
 
diff --git a/resources/js/components/ui/toggle.tsx b/resources/js/components/ui/toggle.tsx
@@ -1,5 +1,3 @@
-'use client'
-
 import * as React from 'react'
 import * as TogglePrimitive from '@radix-ui/react-toggle'
 import { cva, type VariantProps } from 'class-variance-authority'
diff --git a/resources/js/components/ui/tooltip.tsx b/resources/js/components/ui/tooltip.tsx
@@ -1,5 +1,3 @@
-'use client'
-
 import * as React from 'react'
 import * as TooltipPrimitive from '@radix-ui/react-tooltip'
 
diff --git a/resources/js/pages/dashboard.tsx b/resources/js/pages/dashboard.tsx
@@ -1,8 +1,5 @@
-import { LOGIN_ROUTE } from '@/app/routes'
 import { PageLayout } from '@/components/layout/page-layout'
 import { type BreadcrumbItem } from '@/types'
-import { type PageProps } from '@adonisjs/inertia/types'
-import { Head, router } from '@inertiajs/react'
 
 const breadcrumbs: BreadcrumbItem[] = [
   { id: 1, title: 'Building Your Application', href: '#' },
@@ -13,14 +10,9 @@ const breadcrumbs: BreadcrumbItem[] = [
   },
 ]
 
-const Dashboard = ({ auth }: PageProps) => {
-  if (!auth) {
-    router.push({ url: LOGIN_ROUTE })
-  }
-
+export default function Dashboard() {
   return (
-    <PageLayout breadcrumbs={breadcrumbs}>
-      <Head title="Dashboard" />
+    <PageLayout breadcrumbs={breadcrumbs} pageTitle="Dashboard">
       <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
         <div className="grid auto-rows-min gap-4 md:grid-cols-3">
           <div className="aspect-video rounded-xl bg-muted/50" />
@@ -32,5 +24,3 @@ const Dashboard = ({ auth }: PageProps) => {
     </PageLayout>
   )
 }
-
-export default Dashboard
diff --git a/resources/js/pages/settings.tsx b/resources/js/pages/settings.tsx
@@ -1,7 +1,7 @@
 import { LOGIN_ROUTE } from '@/app/routes'
 import { PageLayout } from '@/components/layout/page-layout'
 import { type BreadcrumbItem, type PageProps } from '@/types'
-import { Head, router } from '@inertiajs/react'
+import { router } from '@inertiajs/react'
 
 const breadcrumbs: BreadcrumbItem[] = [
   { id: 1, title: 'Building Your Application', href: '#' },
@@ -18,8 +18,7 @@ export const Settings = ({ auth }: PageProps) => {
   }
 
   return (
-    <PageLayout breadcrumbs={breadcrumbs}>
-      <Head title="Settings" />
+    <PageLayout breadcrumbs={breadcrumbs} pageTitle="Settings">
       <div>Settings</div>
     </PageLayout>
   )
diff --git a/resources/js/pages/settings/profile-settings.tsx b/resources/js/pages/settings/profile-settings.tsx
diff --git a/resources/js/types/index.d.ts b/resources/js/types/index.d.ts
@@ -18,5 +18,6 @@ export interface NavItem {
   title: string
   href: string
   icon?: LucideIcon | null
+  type: 'internal' | 'external'
   isActive?: boolean
 }
diff --git a/start/routes.ts b/start/routes.ts
@@ -30,8 +30,8 @@ router
   .as('auth-routes')
   .prefix('api/auth')
 
-router.on('/dashboard').renderInertia('dashboard').use(middleware.auth()).as('dashboard')
 router.on('/settings').renderInertia('settings').use(middleware.auth()).as('settings')
+router.on('/dashboard').renderInertia('dashboard').use(middleware.auth()).as('dashboard')
 
 router
   .group(() => {

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,3 @@`
`1`		`-import * as React from 'react'`
`2`		`-`
`3`	`1`	`import {`
`4`	`2`	`SidebarGroup,`
`5`	`3`	`SidebarGroupContent,`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,3 @@`
`1`		`-'use client'`
`2`		`-`
`3`	`1`	`import * as React from 'react'`
`4`	`2`	`import * as DialogPrimitive from '@radix-ui/react-dialog'`
`5`	`3`	`import { XIcon } from 'lucide-react'`