feat: better hamburger menu

src/app/layout.tsx

@@ -8,7 +8,7 @@ import { usePathname } from 'next/navigation';
 import { ReactNode, Suspense, useEffect, useState } from 'react';
 import { Footer } from '../components/Footer';
 import { Loader } from '../components/Loader';
-import Navbar from '../components/Navbar';
+import Navbar, { NAVBAR_HEIGHT } from '../components/Navbar';
 import { Party3 } from '../components/Party3';
 import isDev from '../core/blitzkit/isDev';
 import { isLocalhost } from '../core/blitzkit/isLocalhost';
@@ -31,7 +31,6 @@ export default function RootLayout({ children }: RootLayoutProps) {
   const pathname = usePathname();
   const isEmbed = pathname.split('/')[1] === 'embeds';
   const isRoot = pathname === '/';
-  const darkMode = useApp((state) => state.darkMode);
   const [showDevBuildAlert, setShowDevBuildAlert] = useState(false);
 
   useEffect(() => {
@@ -68,7 +67,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
         }}
       >
         <Theme
-          appearance={darkMode ? 'dark' : 'light'}
+          appearance="dark"
           panelBackground="solid"
           radius="full"
           suppressHydrationWarning
@@ -76,9 +75,13 @@ export default function RootLayout({ children }: RootLayoutProps) {
         >
           <Flex
             direction="column"
-            style={{ minHeight: '100vh', paddingTop: isEmbed ? undefined : 64 }}
+            style={{
+              minHeight: '100vh',
+              paddingTop: isEmbed ? undefined : NAVBAR_HEIGHT,
+            }}
           >
             {!isEmbed && <Navbar />}
+
             <AlertDialog.Root open={showDevBuildAlert}>
               <AlertDialog.Content>
                 <AlertDialog.Title>Experimental version!</AlertDialog.Title>

src/app/settings/page.tsx

@@ -6,25 +6,10 @@ import { useApp } from '../../stores/app';
 
 export default function Page() {
   const developerMode = useApp((state) => state.developerMode);
-  const darkMode = useApp((state) => state.darkMode);
 
   return (
     <PageWrapper justify="center" align="center">
       <Flex direction="column" gap="4">
-        <Flex gap="3" direction="column">
-          <Heading size="5">Appearance</Heading>
-
-          <Flex align="center" gap="2">
-            <Text>Dark mode (experimental)</Text>
-            <Switch
-              checked={darkMode}
-              onCheckedChange={(checked) =>
-                useApp.setState({ darkMode: checked })
-              }
-            />
-          </Flex>
-        </Flex>
-
         <Flex gap="3" direction="column">
           <Heading size="5">Advanced</Heading>