App Sidebar

A comprehensive application sidebar with authentication, user profile management, theme switching, and dynamic breadcrumbs

Preview

App Sidebar Preview

A complete sidebar application layout with authentication, user profile management, theme switching, and navigation. Install to see the full interactive experience.

Supabase Auth Integration

Theme Management

Dynamic Navigation

Installation

Open in

Install the app sidebar

npx shadcn@latest add https://jt-components.vercel.app/r/app-sidebar.json

pnpm dlx shadcn@latest add https://jt-components.vercel.app/r/app-sidebar.json

yarn dlx shadcn@latest add https://jt-components.vercel.app/r/app-sidebar.json

bunx --bun shadcn@latest add https://jt-components.vercel.app/r/app-sidebar.json

Usage

import { AppSidebar } from "@/components/app-sidebar"
import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
import { DynamicBreadcrumbs } from "@/components/ui/dynamic-breadcrumbs"

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <SidebarProvider>
      <AppSidebar />
      <main className="flex-1 overflow-auto px-4 grid grid-rows-[auto_1fr]">
        <header className="flex h-16 shrink-0 items-center gap-2">
          <div className="flex items-center gap-2 flex-grow">
            <SidebarTrigger className="-ml-1" />
            <DynamicBreadcrumbs />
          </div>
        </header>
        <div className="mb-4 overflow-auto">
          {children}
        </div>
      </main>
    </SidebarProvider>
  )
}

Source Code

Loading component...

Features

Authentication Integration

The sidebar includes comprehensive authentication features powered by Supabase:

User Profile Display: Shows user avatar, name, and email
Anonymous User Support: Graceful handling of unauthenticated users
Theme Management: Built-in light/dark/system theme switching
Login/Logout Actions: Integrated authentication controls

Components Included

AppSidebar: Main sidebar component with navigation
AuthButton: User profile dropdown with theme controls
CurrentUserAvatar: Smart avatar component with fallbacks
SidebarLogo: Customizable app branding
DynamicBreadcrumbs: Automatic breadcrumb generation
User Hooks: Custom hooks for user data management

Supabase Integration

The component comes with complete Supabase setup:

Client-side utilities: Browser client configuration
Server-side utilities: SSR-compatible server client
Middleware: Session management and route protection
User data hooks: Real-time user information fetching

Environment Setup

Add these environment variables to your .env.local:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

Examples

Basic Implementation

Complete App Layout

Provides a full application structure with sidebar, header, and main content area

The sidebar includes customizable navigation with action buttons:

Diagrams with create action

Notes with create action

Tasks with create action

Meetings, Contacts, Companies

User Authentication States

Authenticated User (shows initials)

👤

Anonymous User (shows ghost icon)

Customization

Customize the navigation items by modifying the navigationItems array in AppSidebar:

const navigationItems = [
  {
    label: "Dashboard",
    href: "/dashboard",
    icon: LayoutDashboard,
    action: handleCreateDashboard,
    actionAriaLabel: "Create new dashboard",
  },
  // Add more items...
]

Branding

Update the sidebar logo in SidebarLogo component:

<div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
  <YourIcon className="size-6" strokeWidth={1.5}/>
</div>
<div className="grid flex-1 text-left text-sm leading-tight">
  <span className="truncate font-semibold">Your App Name</span>
  <span className="truncate text-xs">by Your Company</span>
</div>

Dependencies

This component requires the following dependencies:

@supabase/ssr - Supabase SSR utilities
next - Next.js framework
next-themes - Theme management
lucide-react - Icon library

And these shadcn/ui components:

sidebar - Core sidebar components
dropdown-menu - For user menu
avatar - User avatar display
card - Content containers
breadcrumb - Navigation breadcrumbs