feat: add Radix UI components and implement sidebar functionality

- Added new Radix UI components: Dialog, Tooltip, Separator, and updated existing components.
- Introduced a Sidebar component with collapsible functionality and mobile responsiveness.
- Implemented a custom hook `useIsMobile` to manage mobile state.
- Updated package dependencies in package.json and yarn.lock for new components.
- Created utility components such as Button, Skeleton, and Input for consistent styling.

feat: add AppSidebar component with collapsible functionality and sidebar menu

- Introduced AppSidebar component for a customizable sidebar layout.
- Implemented collapsible sections using Radix UI's Collapsible component.
- Added sidebar menu items with icons and links for navigation.
- Created Sidebar UI components including SidebarHeader, SidebarFooter, and SidebarMenu.
- Integrated ThemePicker for theme selection within the sidebar.
- Updated sidebar styles and layout for better responsiveness.

chore: add @radix-ui/react-collapsible dependency

- Added @radix-ui/react-collapsible package to manage collapsible UI elements.

src/app/(main)/home/page.tsx

@@ -1,15 +1,13 @@
 'use client';
 
 import { RedirectButton } from '@/components/buttons/redirect-button';
-import { ThemePicker } from '@/components/misc/theme-picker';
 import { useGetApiUserMe } from '@/generated/api/user/user';
 
 export default function Home() {
   const { data, isLoading } = useGetApiUserMe();
 
   return (
-    <div className='flex flex-col items-center justify-center h-screen'>
-      <div className='absolute top-4 right-4'>{<ThemePicker />}</div>
+    <div className='flex flex-col items-center justify-center h-full'>
       <div>
         <h1>
           Hello{' '}

src/app/(main)/layout.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { cookies } from 'next/headers';
+
+import { AppSidebar } from '@/components/custom-ui/app-sidebar';
+import SidebarProviderWrapper from '@/components/wrappers/sidebar-provider';
+import Header from '@/components/misc/header';
+
+export default async function Layout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  const cookieStore = await cookies();
+  const defaultOpen = cookieStore.get('sidebar_state')?.value === 'true';
+  return (
+    <>
+      <SidebarProviderWrapper defaultOpen={defaultOpen}>
+        <AppSidebar></AppSidebar>
+        <Header>{children}</Header>
+      </SidebarProviderWrapper>
+    </>
+  );
+}

src/app/globals.css

@@ -55,6 +55,8 @@
 
   --card: var(--neutral-800);
 
+  --sidebar-width-icon: 32px;
+
   /* ------------------- */
 
   --foreground: oklch(0.13 0.028 261.692);
@@ -95,17 +97,17 @@
 
   --chart-5: oklch(0.769 0.188 70.08);
 
-  --sidebar: oklch(0.985 0.002 247.839);
+  --sidebar: var(--background);
 
-  --sidebar-foreground: oklch(0.13 0.028 261.692);
+  --sidebar-foreground: var(--text);
 
   --sidebar-primary: oklch(0.21 0.034 264.665);
 
-  --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
+  --sidebar-primary-foreground: var(--text);
 
   --sidebar-accent: oklch(0.967 0.003 264.542);
 
-  --sidebar-accent-foreground: oklch(0.21 0.034 264.665);
+  --sidebar-accent-foreground: var(--text);
 
   --sidebar-border: oklch(0.928 0.006 264.531);
 
@@ -339,17 +341,17 @@
 
   --chart-5: oklch(0.645 0.246 16.439);
 
-  --sidebar: oklch(0.21 0.034 264.665);
+  --sidebar: var(--background);
 
-  --sidebar-foreground: oklch(0.985 0.002 247.839);
+  --sidebar-foreground: var(--text);
 
   --sidebar-primary: oklch(0.488 0.243 264.376);
 
-  --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
+  --sidebar-primary-foreground: var(--text);
 
   --sidebar-accent: oklch(0.278 0.033 256.848);
 
-  --sidebar-accent-foreground: oklch(0.985 0.002 247.839);
+  --sidebar-accent-foreground: var(--text);
 
   --sidebar-border: oklch(1 0 0 / 10%);