feat: aeson navbar

src/components/Navbar/index.tsx

@@ -14,7 +14,6 @@ import {
   IconButton,
   Link as LinkRadix,
   Popover,
-  ScrollArea,
   Spinner,
   Text,
 } from '@radix-ui/themes';
@@ -38,7 +37,7 @@ export const NAVBAR_HEIGHT = 64;
 export default function Navbar() {
   const wideFormat = useWideFormat(480);
   const login = useApp((state) => state.login);
-  const [showHamburgerMenu, setShowHamburgerMenu] = useState(false);
+  const [showHamburgerMenu, setShowHamburgerMenu] = useState(true);
 
   useEffect(() => {
     if (!login) return;
@@ -93,20 +92,17 @@ export default function Navbar() {
           top: 0,
           left: 0,
           width: '100%',
-          height: showHamburgerMenu ? 176 : NAVBAR_HEIGHT + 1, // extra pixel for frost bleeding
+          maxHeight: showHamburgerMenu ? '100%' : NAVBAR_HEIGHT + 1, // extra pixel for frost bleeding
           zIndex: 2,
           padding: '1rem',
           background: theme.colors.appBackground1_alpha,
           borderBottom: theme.borderStyles.nonInteractive,
           backdropFilter: 'blur(4rem)',
           boxSizing: 'border-box',
-          transition: 'height 0.2s ease',
+          transition: 'max-height 0.5s ease',
           overflow: 'hidden',
         }}
-        onPointerEnter={() => {
+        onPointerEnter={() => setShowHamburgerMenu(true)}
-          console.log('open!');
-          setShowHamburgerMenu(true);
-        }}
         onPointerLeave={() => setShowHamburgerMenu(false)}
       >
         <Flex direction="column" align="center" pt="2">
@@ -204,8 +200,7 @@ export default function Navbar() {
             )}
           </Flex>
 
-          <ScrollArea scrollbars="horizontal">
+          <Flex mt="6" gap="3" justify="center" wrap="wrap">
-            <Flex mt="6" gap="3" justify="center">
             {TOOLS.filter((tool) => !tool.href).map((tool) => (
               <Link
                 href={tool.href ?? `/tools/${tool.id}`}
@@ -246,7 +241,6 @@ export default function Navbar() {
               </Link>
             ))}
           </Flex>
-          </ScrollArea>
         </Flex>
       </Box>
     </>