refactor: header styles

Author: sujatagunale

app/globals.css

@@ -171,6 +171,35 @@
     @apply bg-red-500/20! text-red-500!;
   }
 
+  /* Header Component Utilities */
+  header {
+    @apply border-b border-dark-400 h-20;
+
+    .inner {
+      @apply flex justify-between items-center h-full;
+
+      a {
+        @apply mb-0;
+      }
+
+      nav {
+        @apply flex h-full items-center;
+
+        .nav-link {
+          @apply px-6 py-5 flex items-center transition-all hover:text-white font-medium h-full text-purple-100 cursor-pointer;
+        }
+
+        .nav-link.is-active {
+          @apply text-white;
+        }
+
+        .nav-link.is-home {
+          @apply max-sm:hidden;
+        }
+      }
+    }
+  }
+
   /* CandlestickChart Styles */
   #candlestick-chart {
     @apply p-3 mt-5 rounded-lg bg-dark-500;

components/Header.tsx

@@ -11,8 +11,8 @@ export const Header = ({ trendingCoins = [] }: HeaderProps) => {
   const pathname = usePathname();
 
   return (
-    <header className='border-b border-dark-400 h-20'>
-      <div className='container flex justify-between items-center h-full'>
+    <header>
+      <div className='main-container inner'>
         <Link href='/'>
           <Image
             src='/assets/logo.svg'
@@ -22,7 +22,7 @@ export const Header = ({ trendingCoins = [] }: HeaderProps) => {
           />
         </Link>
 
-        <nav className='flex h-full items-center'>
+        <nav>
           {navItems.map((item) => {
             const isActive = pathname === item.href;
 
@@ -39,13 +39,10 @@ export const Header = ({ trendingCoins = [] }: HeaderProps) => {
               <Link
                 key={item.label}
                 href={item.href}
-                className={cn(
-                  'px-6 py-5 flex items-center transition-all hover:text-white font-medium h-full text-purple-100 cursor-pointer',
-                  {
-                    'text-white': isActive,
-                    'max-sm:hidden': item.label === 'Home',
-                  }
-                )}
+                className={cn('nav-link', {
+                  'is-active': isActive,
+                  'is-home': item.label === 'Home',
+                })}
               >
                 {item.label}
               </Link>