Tune header, nav

Author: Adam Plesnik

docs/src/components/HeaderNavAnchor.tsx

@@ -7,7 +7,7 @@ const HeaderNavAnchor = ({ children, to, className, external = false }: HeaderNa
     <NavLink
       to={to}
       className={({ isActive }) =>
-        'flex items-center justify-center text-sm font-medium text-zinc-900 transition-opacity duration-200 hover:opacity-100 dark:text-zinc-100 ' +
+        'flex items-center justify-center px-2 text-sm font-medium text-zinc-900 transition-opacity duration-200 hover:opacity-100 dark:text-zinc-100 ' +
         (isActive ? 'opacity-100 ' : 'opacity-70 ') +
         addWithSpace(className)
       }

docs/src/partials/Nav.tsx

@@ -2,18 +2,21 @@ import { Github } from 'lucide-react'
 import DarkModeSwitch from '../components/DarkModeSwitch.tsx'
 import HeaderNavAnchor from '../components/HeaderNavAnchor.tsx'
 import Logo from '../components/Logo.tsx'
+import { NavLink } from 'react-router-dom'
 
 const Nav = () => {
   return (
     <div className="sticky top-0 z-20 flex w-full items-stretch justify-center bg-white/20 text-zinc-700 shadow-xl shadow-black/5 backdrop-blur-sm dark:border-b-slate-600/50 dark:bg-slate-800/60 dark:text-zinc-400">
-      <div className="flex w-full max-w-screen-lg items-stretch gap-6 px-8 py-3 md:px-16 lg:px-20">
-        <HeaderNavAnchor className="flex items-center gap-1 self-center text-sm font-medium" to="/">
-          <Logo />
-          <span className="mr-2 hidden sm:block">scrolldriven.dev</span>
-        </HeaderNavAnchor>
+      <div className="flex w-full max-w-screen-lg items-stretch gap-3 px-8 py-3 md:px-16 lg:px-20">
+        <NavLink className="flex items-center gap-1 self-center text-sm font-medium" to="/">
+          <Logo className="text-cyan-500" />
+          <span className="mr-2 hidden text-zinc-900 sm:block dark:text-zinc-100">
+            scrolldriven.dev
+          </span>
+        </NavLink>
         <HeaderNavAnchor to="/docs">Docs</HeaderNavAnchor>
         <HeaderNavAnchor to="/tech">Tech</HeaderNavAnchor>
-        <div className="flex flex-1 items-center justify-end gap-2">
+        <div className="flex flex-1 items-center justify-end gap-0.5">
           <DarkModeSwitch />
           <HeaderNavAnchor
             to="https://github.com/adamplesnik/tailwindcss-scroll-driven-animations"