feat: more navbar buttons

src/app/layout.tsx

@@ -72,7 +72,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
         >
           <Flex
             direction="column"
-            style={{ minHeight: '100vh', paddingTop: isEmbed ? undefined : 52 }}
+            style={{ minHeight: '100vh', paddingTop: isEmbed ? undefined : 64 }}
           >
             {!isEmbed && <Navbar />}
             <AlertDialog.Root open={showDevBuildAlert}>

src/components/Navbar/index.tsx

@@ -1,13 +1,19 @@
-import { HamburgerMenuIcon } from '@radix-ui/react-icons';
+import {
+  GearIcon,
+  HamburgerMenuIcon,
+  MagnifyingGlassIcon,
+} from '@radix-ui/react-icons';
 import { Flex, IconButton, Popover } from '@radix-ui/themes';
 import Link from 'next/link';
 import { useFullScreen } from '../../hooks/useFullScreen';
+import { useWideFormat } from '../../hooks/useWideFormat';
 import { BlitzkriegWormWide } from '../../icons/BlitzkriegWormWide';
 import { theme } from '../../stitches.config';
 import { EverythingSearch } from './components/EverythingSearch';
 
 export default function Navbar() {
   const isFullScreen = useFullScreen();
+  const wideFormat = useWideFormat(600);
   // const pathName = usePathname();
 
   if (isFullScreen) return null;
@@ -19,6 +25,7 @@ export default function Navbar() {
         top: 0,
         left: 0,
         width: '100%',
+        height: 64 + 1, // extra pixel for frost bleeding
         zIndex: 1,
         padding: '1rem',
         background: theme.colors.appBackground1_alpha,
@@ -27,7 +34,12 @@ export default function Navbar() {
         boxSizing: 'border-box',
       }}
     >
-      <Flex justify="center">
+      <Flex
+        justify="center"
+        style={{
+          height: '100%',
+        }}
+      >
         <Flex
           justify="between"
           align="center"
@@ -46,16 +58,36 @@ export default function Navbar() {
             <BlitzkriegWormWide />
           </Link>
 
-          <EverythingSearch style={{ flex: 1 }} />
+          {wideFormat ? (
+            <EverythingSearch style={{ flex: 1 }} />
+          ) : (
+            <div style={{ flex: 1 }} />
+          )}
+
+          {!wideFormat && (
+            <IconButton variant="ghost" color="gray">
+              <MagnifyingGlassIcon />
+            </IconButton>
+          )}
 
           <Popover.Root>
             <Popover.Trigger>
-              <IconButton variant="ghost">
+              <IconButton variant="ghost" color="gray">
                 <HamburgerMenuIcon />
               </IconButton>
             </Popover.Trigger>
+
+            <Popover.Content></Popover.Content>
           </Popover.Root>
 
+          <Link href="/settings">
+            <Flex style={{ width: '100%', height: '100%' }} justify="center">
+              <IconButton variant="ghost" color="gray">
+                <GearIcon />
+              </IconButton>
+            </Flex>
+          </Link>
+
           {/* <Flex justify="center" align="center" gap="4">
             <Link
               href="https://discord.gg/nDt7AjGJQH"

src/hooks/useWideFormat.ts

@@ -1,10 +1,10 @@
 import { useEffect, useState } from 'react';
 
-function hasWideFormat() {
-  return typeof window !== 'undefined' && window.innerWidth > 880;
-}
+export function useWideFormat(size = 880) {
+  function hasWideFormat() {
+    return typeof window !== 'undefined' && window.innerWidth > size;
+  }
 
-export function useWideFormat() {
   const [wideFormat, setWideFormat] = useState(hasWideFormat());
 
   useEffect(() => {