feat: transparent header

arc53 · Aug 17, 2024 · 9e45393 · 9e45393
1 parent 3f163cc
commit 9e45393
Showing 1 changed file with 12 additions and 12 deletions.
diff --git a/frontend/src/components/Nav.tsx b/frontend/src/components/Nav.tsx
@@ -6,17 +6,16 @@ import Twitter from '@/assets/x.svg'
 import { useTheme } from '@/ThemeContext';
 
 const Nav = () => {
-
     const { isDarkTheme, toggleTheme } = useTheme();
 
     return (
-        <div className='flex justify-between items-baseline'>
-            <div className='flex gap-2'>
+        <header className='fixed top-0 left-0 right-0 z-50 w-full border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 h-14 px-4 flex items-center justify-between'>
+            <div className='flex gap-2 ml-4'>
                 <img src={Compass} className='filter dark:invert' />
                 <span className='text-[#18181B] font-bold dark:text-white'>Compass</span>
                 <span className='text-[#8B8989]'>by Arc53</span>
             </div>
-            <div className='flex gap-4'>
+            <div className='flex gap-4 mr-4'>
                 <a target='_blank' href='https://github.com/arc53/llm-price-compass'>
                     <img className='filter dark:invert' src={Github} />
                 </a>
@@ -25,16 +24,17 @@ const Nav = () => {
                 </a>
                 <button
                     id='theme'
-                    onClick={toggleTheme}>{
-                        isDarkTheme ?
-                            <img className='filter dark' src={Moon} />
-                            :
-                            <img className='filter dark:invert' src={Sun} />
-                    }
+                    onClick={toggleTheme}
+                >
+                    {isDarkTheme ? (
+                        <img className='filter dark' src={Moon} />
+                    ) : (
+                        <img className='filter dark:invert' src={Sun} />
+                    )}
                 </button>
             </div>
-        </div>
+        </header>
     )
 }
 
-export default Nav
+export default Nav