feat: sidebar

kayyueth · Nov 25, 2024 · 6369679 · 6369679
1 parent 275ad85
commit 6369679
Show file tree

Hide file tree

Showing 31 changed files with 1,303 additions and 1,055 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -29,6 +29,14 @@
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
   }
 
   .dark {
@@ -56,6 +64,14 @@
     --chart-3: 30 80% 55%;
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
   }
 }
 

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,67 +1,14 @@
-import { EnvVarWarning } from '@/components/env-var-warning';
-import HeaderAuth from '@/components/header-auth';
-import { hasEnvVars } from '@/utils/supabase/check-env-vars';
-import { GeistSans } from 'geist/font/sans';
-import { ThemeProvider } from 'next-themes';
-import Link from 'next/link';
-import './globals.css';
+import { SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar';
+import { AppSidebar } from '@/components/app-sidebar';
 
-const defaultUrl = process.env.VERCEL_URL
-  ? `https://${process.env.VERCEL_URL}`
-  : 'http://localhost:3000';
-
-export const metadata = {
-  metadataBase: new URL(defaultUrl),
-  title: 'Next.js and Supabase Starter Kit',
-  description: 'The fastest way to build apps with Next.js and Supabase'
-};
-
-export default function RootLayout({
-  children
-}: {
-  children: React.ReactNode;
-}) {
+export default function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang='en' className={GeistSans.className} suppressHydrationWarning>
-      <body className='bg-background text-foreground'>
-        <ThemeProvider
-          attribute='class'
-          defaultTheme='system'
-          enableSystem
-          disableTransitionOnChange
-        >
-          <main className='min-h-screen flex flex-col items-center'>
-            <div className='flex-1 w-full flex flex-col gap-20 items-center'>
-              <nav className='w-full flex justify-center border-b border-b-foreground/10 h-16'>
-                <div className='w-full max-w-5xl flex justify-between items-center p-3 px-5 text-sm'>
-                  <div className='flex gap-5 items-center font-semibold'>
-                    <Link href={'/'}>LOGO HERE</Link>
-                    <div className='flex items-center gap-2'></div>
-                  </div>
-                  {!hasEnvVars ? <EnvVarWarning /> : <HeaderAuth />}
-                </div>
-              </nav>
-              <div className='flex flex-col gap-20 max-w-5xl p-5'>
-                {children}
-              </div>
-
-              <footer className='w-full flex items-center justify-center border-t mx-auto text-center text-xs gap-8 py-16'>
-                <p>
-                  Powered by{' '}
-                  <a
-                    href='https://supabase.com/?utm_source=create-next-app&utm_medium=template&utm_term=nextjs'
-                    target='_blank'
-                    className='font-bold hover:underline'
-                    rel='noreferrer'
-                  >
-                    Supabase
-                  </a>
-                </p>
-              </footer>
-            </div>
-          </main>
-        </ThemeProvider>
-      </body>
-    </html>
+    <SidebarProvider>
+      <AppSidebar />
+      <main>
+        <SidebarTrigger />
+        {children}
+      </main>
+    </SidebarProvider>
   );
 }
diff --git a/app/page.tsx b/app/page.tsx
diff --git a/components/app-sidebar.tsx b/components/app-sidebar.tsx
@@ -0,0 +1,66 @@
+import { Calendar, Home, Inbox, Search, Settings } from 'lucide-react';
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem
+} from '@/components/ui/sidebar';
+
+// Menu items.
+const items = [
+  {
+    title: 'Home',
+    url: '#',
+    icon: Home
+  },
+  {
+    title: 'Inbox',
+    url: '#',
+    icon: Inbox
+  },
+  {
+    title: 'Calendar',
+    url: '#',
+    icon: Calendar
+  },
+  {
+    title: 'Search',
+    url: '#',
+    icon: Search
+  },
+  {
+    title: 'Settings',
+    url: '#',
+    icon: Settings
+  }
+];
+
+export function AppSidebar() {
+  return (
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Application</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {items.map((item) => (
+                <SidebarMenuItem key={item.title}>
+                  <SidebarMenuButton asChild>
+                    <a href={item.url}>
+                      <item.icon />
+                      <span>{item.title}</span>
+                    </a>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  );
+}
diff --git a/components/env-var-warning.tsx b/components/env-var-warning.tsx
diff --git a/components/form-message.tsx b/components/form-message.tsx
diff --git a/components/hero.tsx b/components/hero.tsx
diff --git a/components/next-logo.tsx b/components/next-logo.tsx
diff --git a/components/submit-button.tsx b/components/submit-button.tsx