Fix layout shift caused by nav on index page

purduehackers · Dec 7, 2023 · 1103bb0 · 1103bb0
1 parent e595165
commit 1103bb0
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/components/nav.tsx b/components/nav.tsx
@@ -12,14 +12,15 @@ const Nav = ({ noSticky = false }: { noSticky?: boolean }) => {
     <nav
       className={
         noSticky
-          ? `w-full top-0 z-10 bg-gray-100 dark:bg-gray-800`
-          : `w-full top-0 z-10 bg-gray-nav dark:bg-gray-nav-dark backdrop-blur fixed`
+          ? `w-full top-0 z-10 bg-gray-100 dark:bg-gray-800 h-14`
+          : `w-full top-0 z-10 bg-gray-nav dark:bg-gray-nav-dark backdrop-blur fixed h-14`
       }
     >
       <div className="container px-4 sm:px-14 mx-auto flex">
         {pathname !== '/' && <BackButton />}
         <div className="grow" />
-        {resolvedTheme && <ThemeButton />}
+        {/* {resolvedTheme && <ThemeButton />} */}
+        <ThemeButton />
       </div>
     </nav>
   )

diff --git a/components/theme-button.tsx b/components/theme-button.tsx
@@ -3,12 +3,12 @@ import { useEffect, useState } from 'react'
 import { Moon, Sun } from 'react-feather'
 
 const ThemeButton = () => {
-  const [mounted, setMounted] = useState(false)
+  // const [mounted, setMounted] = useState(false)
   const { setTheme, resolvedTheme } = useTheme()
 
-  useEffect(() => setMounted(true), [])
+  // useEffect(() => setMounted(true), [])
 
-  if (!mounted) return null
+  // if (!mounted) return null
 
   return (
     <button