remove header

MildTomato · MildTomato · commit f92548273753 · 2024-08-08T15:42:32.000+08:00
diff --git a/apps/postgres-new/components/layout.tsx b/apps/postgres-new/components/layout.tsx
@@ -30,16 +30,16 @@ export default function Layout({ children }: LayoutProps) {
             </div>
           )}
 
-          <main className="flex-1 flex flex-col">
-            <Header />
-            <div className="flex-1 flex flex-col lg:flex-row min-h-0">
-              {/* TODO: make sidebar available on mobile */}
-              {!isSmallBreakpoint && <Sidebar />}
-              <m.div layout="position" className="w-full h-full min-w-0 min-h-0">
-                {children}
-              </m.div>
-            </div>
+          {/* <main className="flex-1 flex flex-col"> */}
+          {/* <Header /> */}
+          <main className="flex-1 flex flex-col lg:flex-row min-h-0">
+            {/* TODO: make sidebar available on mobile */}
+            {!isSmallBreakpoint && <Sidebar />}
+            <m.div layout="position" className="w-full h-full min-w-0 min-h-0">
+              {children}
+            </m.div>
           </main>
+          {/* </main> */}
         </div>
       </TooltipProvider>
     </LazyMotion>
diff --git a/apps/postgres-new/components/sidebar.tsx b/apps/postgres-new/components/sidebar.tsx
@@ -37,6 +37,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from './ui/dropdown-menu'
+import UserDropdown from './user-dropdown'
 
 export default function Sidebar() {
   const { user, signOut } = useApp()
@@ -133,6 +134,7 @@ export default function Sidebar() {
                 )}
               </div>
             )}
+            <UserDropdown />
             {user && (
               <Button
                 className="flex flex-row gap-2 items-center mx-2 hover:bg-black/10"
@@ -188,23 +190,26 @@ export default function Sidebar() {
               </TooltipContent>
             </Tooltip>
           </div>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <m.div layout="position" layoutId="sign-out-button">
-                <Button
-                  className="bg-inherit justify-end justify-self-end hover:bg-neutral-200 text-sm flex gap-3"
-                  onClick={async () => {
-                    await signOut()
-                  }}
-                >
-                  <LogOut size={18} strokeWidth={3} />
-                </Button>
-              </m.div>
-            </TooltipTrigger>
-            <TooltipContent side="right" className="bg-black text-white">
-              <p>Sign out</p>
-            </TooltipContent>
-          </Tooltip>
+          <div>
+            <UserDropdown />
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <m.div layout="position" layoutId="sign-out-button">
+                  <Button
+                    className="bg-inherit justify-end justify-self-end hover:bg-neutral-200 text-sm flex gap-3"
+                    onClick={async () => {
+                      await signOut()
+                    }}
+                  >
+                    <LogOut size={18} strokeWidth={3} />
+                  </Button>
+                </m.div>
+              </TooltipTrigger>
+              <TooltipContent side="right" className="bg-black text-white">
+                <p>Sign out</p>
+              </TooltipContent>
+            </Tooltip>
+          </div>
         </div>
       )}
     </>
diff --git a/apps/postgres-new/components/user-dropdown.tsx b/apps/postgres-new/components/user-dropdown.tsx
@@ -0,0 +1,32 @@
+'use client'
+
+import { Moon, Sun } from 'lucide-react'
+import { Button } from './ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from './ui/dropdown-menu'
+import { useTheme } from 'next-themes'
+
+export default function UserDropdown() {
+  const { setTheme } = useTheme()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme('light')}>Light</DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('dark')}>Dark</DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('system')}>System</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
