fix: align nav in Header to the right

lorenzogm · Jan 24, 2022 · 89cfd75 · 89cfd75 · github-actions · Jan 24, 2022
1 parent 93935de
commit 89cfd75
Showing 1 changed file with 28 additions and 30 deletions.
diff --git a/src/components/features/Header/Header.tsx b/src/components/features/Header/Header.tsx
@@ -14,36 +14,34 @@ export function Header({ navigation, githubLink }: HeaderProps) {
   const [isMobileNavigationOpen, { toggle }] = useToggle()
 
   return (
-    <header className="h-24 sm:h-32 flex items-center z-30 w-full">
-      <div className="flex items-center justify-between">
-        <Link href="/" className="uppercase text-white font-black text-3xl flex items-center">
-          lorenzogm.com
-        </Link>
-        <div className="flex items-center">
-          <nav
-            className={clsx(
-              'font-sen text-gray-800 text-white uppercase text-lg lg:flex items-center',
-              isMobileNavigationOpen === 'OPEN'
-                ? 'absolute inset-x-0 top-20 bottom-10 bg-gray-800 h-100vh z-30'
-                : 'hidden',
-            )}
-          >
-            {navigation.map((navigationItem) => (
-              <Link key={navigationItem.href} href={navigationItem.href}>
-                {navigationItem.name}
-              </Link>
-            ))}
-            <Link href={githubLink}>GitHub</Link>
-          </nav>
-          <span className="sr-only">Open main menu</span>
-          <button className="lg:hidden flex flex-col ml-4" onClick={toggle} aria-label="Toggle mobile navigation">
-            {isMobileNavigationOpen === 'CLOSED' ? (
-              <MenuIcon className="block h-6 w-6" />
-            ) : (
-              <XIcon className="block h-6 w-6" />
-            )}
-          </button>
-        </div>
+    <header className="h-24 sm:h-32 flex items-center z-30 w-full justify-between">
+      <Link href="/" className="uppercase text-white font-black text-3xl flex items-center">
+        lorenzogm.com
+      </Link>
+      <div className="flex items-center">
+        <nav
+          className={clsx(
+            'text-white uppercase text-lg lg:flex items-center',
+            isMobileNavigationOpen === 'OPEN'
+              ? 'absolute inset-x-0 top-20 bottom-10 bg-gray-800 h-100vh z-30'
+              : 'hidden',
+          )}
+        >
+          {navigation.map((navigationItem) => (
+            <Link key={navigationItem.href} href={navigationItem.href}>
+              {navigationItem.name}
+            </Link>
+          ))}
+          <Link href={githubLink}>GitHub</Link>
+        </nav>
+        <span className="sr-only">Open main menu</span>
+        <button className="lg:hidden flex flex-col ml-4" onClick={toggle} aria-label="Toggle mobile navigation">
+          {isMobileNavigationOpen === 'CLOSED' ? (
+            <MenuIcon className="block h-6 w-6" />
+          ) : (
+            <XIcon className="block h-6 w-6" />
+          )}
+        </button>
       </div>
     </header>
   )