Start on new sidebar (#456)

Co-authored-by: shadcn <m@shadcn.com>

components/custom/sidebar-user-nav.tsx

@@ -0,0 +1,67 @@
+'use client';
+import { ChevronUp } from 'lucide-react';
+import Image from 'next/image';
+import { type User } from 'next-auth';
+import { signOut } from 'next-auth/react';
+import { useTheme } from 'next-themes';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@/components/ui/sidebar';
+
+export function SidebarUserNav({ user }: { user: User }) {
+  const { setTheme, theme } = useTheme();
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton className="data-[state=open]:bg-sidebar-accent bg-background data-[state=open]:text-sidebar-accent-foreground h-10">
+              <Image
+                src={`https://avatar.vercel.sh/${user.email}`}
+                alt={user.email ?? 'User Avatar'}
+                width={24}
+                height={24}
+                className="rounded-full"
+              />
+              <span>{user?.email}</span>
+              <ChevronUp className="ml-auto" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            side="top"
+            className="w-[--radix-popper-anchor-width]"
+          >
+            <DropdownMenuItem
+              onSelect={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+            >
+              {`Toggle ${theme === 'light' ? 'dark' : 'light'} mode`}
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem asChild>
+              <button
+                className="w-full "
+                onClick={() => {
+                  signOut({
+                    redirectTo: '/',
+                  });
+                }}
+              >
+                Sign out
+              </button>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+}