Tune nav, change item styling, tune switch, github icon

Author: Adam Plesnik

docs/src/components/DarkModeSwitch.tsx

@@ -16,17 +16,17 @@ const DarkModeSwitch = () => {
 
   return (
     <div
-      className="flex size-8 cursor-pointer flex-col overflow-hidden rounded-full transition-colors hover:bg-white/40 dark:hover:bg-slate-500/60"
+      className="flex size-7 cursor-pointer flex-col overflow-hidden text-zinc-900 opacity-70 transition-opacity duration-200 hover:opacity-100 dark:text-zinc-100"
       onClick={switchMode}
     >
       <motion.div
-        initial={{ y: !darkMode ? 0 : '-2rem' }}
-        animate={{ y: !darkMode ? 0 : '-2rem' }}
+        initial={{ y: darkMode ? 0 : '-1.75rem' }}
+        animate={{ y: darkMode ? 0 : '-1.75rem' }}
         transition={{ ease: [0.65, 0.05, 0.17, 0.99], duration: 0.5, delay: 0.2 }}
         className="group flex flex-col"
       >
-        <Sun className="size-8 p-1 transition-transform duration-700 ease-line group-hover:rotate-[22deg]" />
-        <Moon className="size-8 p-1 transition-transform duration-700 ease-line group-hover:-rotate-[22deg]" />
+        <Moon className="size-7 p-1 transition-transform duration-700 ease-line group-hover:rotate-[22deg]" />
+        <Sun className="size-7 p-1 transition-transform duration-700 ease-line group-hover:rotate-[22deg]" />
       </motion.div>
     </div>
   )

docs/src/components/HeaderNavAnchor.tsx

@@ -1,20 +1,15 @@
-import { PropsWithChildren } from 'react'
-import { NavLink } from 'react-router-dom'
+import { HTMLAttributes, PropsWithChildren } from 'react'
+import { NavLink, NavLinkProps } from 'react-router-dom'
+import { addWithSpace } from '../utils/addWithSpace'
 
-const HeaderNavAnchor = ({
-  children,
-  to: href,
-  className = '',
-  external = false,
-}: PropsWithChildren<HeaderNavAnchorProps>) => {
+const HeaderNavAnchor = ({ children, to, className, external = false }: HeaderNavAnchorProps) => {
   return (
     <NavLink
-      to={href}
+      to={to}
       className={({ isActive }) =>
-        'flex items-center justify-center rounded-full px-2 text-sm font-medium transition-colors duration-200 md:min-w-12 ' +
-        'hover:bg-fuchsia-400/40 dark:hover:bg-slate-500/60 ' +
-        (isActive ? 'bg-fuchsia-400/30 dark:bg-slate-500/50 ' : '') +
-        (className != '' ? ` ${className}` : '')
+        'flex items-center justify-center 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)
       }
       target={external ? '_blank' : ''}
     >
@@ -23,10 +18,10 @@ const HeaderNavAnchor = ({
   )
 }
 
-export interface HeaderNavAnchorProps {
+export type HeaderNavAnchorProps = {
   children: PropsWithChildren
   to: string
-  className?: string | undefined
   external?: boolean
-}
+} & HTMLAttributes<NavLinkProps>
+
 export default HeaderNavAnchor

docs/src/partials/Nav.tsx

@@ -1,32 +1,27 @@
 import { Github } from 'lucide-react'
-import { NavLink } from 'react-router-dom'
 import DarkModeSwitch from '../components/DarkModeSwitch.tsx'
 import HeaderNavAnchor from '../components/HeaderNavAnchor.tsx'
 import Logo from '../components/Logo.tsx'
 
 const Nav = () => {
   return (
-    <div className="sticky top-0 z-20 flex w-full items-stretch justify-center bg-white/20 text-zinc-800 shadow-xl shadow-black/5 backdrop-blur-sm dark:border-b-slate-600/50 dark:bg-slate-800/60 dark:text-zinc-300">
-      <div className="flex w-full max-w-screen-lg items-stretch gap-2 px-8 py-3 md:px-16 lg:px-20">
-        <NavLink
-          className="mr-2 flex items-center gap-1 self-center text-sm font-medium text-zinc-950 dark:text-zinc-50"
-          to="/"
-        >
+    <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>
-        </NavLink>
-        <HeaderNavAnchor to="/">How To</HeaderNavAnchor>
+        </HeaderNavAnchor>
         <HeaderNavAnchor to="/docs">Docs</HeaderNavAnchor>
         <HeaderNavAnchor to="/tech">Tech</HeaderNavAnchor>
-        <div className="flex-1" />
-        <DarkModeSwitch />
-        <a
-          href="https://github.com/adamplesnik/tailwindcss-scroll-driven-animations"
-          target="_blank"
-          className="group flex size-8 items-center justify-center self-center rounded-full p-1.5 transition-colors duration-200 hover:bg-white/40 dark:hover:bg-slate-500/60"
-        >
-          <Github className="group-hover:animate-bounce-bottom" />
-        </a>
+        <div className="flex flex-1 items-center justify-end gap-2">
+          <DarkModeSwitch />
+          <HeaderNavAnchor
+            to="https://github.com/adamplesnik/tailwindcss-scroll-driven-animations"
+            external
+          >
+            <Github className="p-0.5 hover:animate-bounce-bottom" />
+          </HeaderNavAnchor>
+        </div>
       </div>
     </div>
   )

docs/src/utils/addWithSpace.ts

@@ -1,3 +1,3 @@
-export const addWithSpace = (value: string) => {
+export const addWithSpace = (value: string | undefined) => {
   return value ? ` ${value}` : ''
 }