baileykane.co / personal-website-next
this repo has no description www.baileykane.co/
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Use app router pathname features

BK610 79de55fe c1d3aef8

+6 -9
+6 -9
components/NavBar.tsx
··· 1 1 "use client"; 2 2 import Link from "next/link"; 3 3 import { usePathname } from "next/navigation"; 4 + import { Key } from "react"; 4 5 5 6 // Unused. Found that I can just use "." as shorthand for going up one URL level... 🤦 6 7 // function getUpURL() { ··· 37 38 className="w-fit inline-block group transition p-1 cursor-pointer 38 39 border border-solid border-transparent rounded-lg hover:border-stone-800 hover:dark:border-stone-200" 39 40 > 40 - {/* <a 41 - className="" 42 - > */} 43 41 {icon && ( 44 42 <span 45 43 className={`mr-1 inline-block group-hover:animate-${animation}`} ··· 48 46 </span> 49 47 )} 50 48 {title} 51 - {/* </a> */} 52 49 </div> 53 50 </Link> 54 51 ); ··· 60 57 61 58 export default function NavBar({ className }: NavBarProps): React.ReactElement { 62 59 const pathname = usePathname(); 60 + var breadcrumbs = null; 61 + var navItems = null; 63 62 64 63 if (pathname) { 65 - var breadcrumbs = pathname.split("/"); 64 + breadcrumbs = pathname.split("/"); 66 65 breadcrumbs = breadcrumbs.slice(1, breadcrumbs.length - 1); 67 66 } 68 - 69 - var navItems = null; 70 67 71 68 if (breadcrumbs) { 72 - const navItems = breadcrumbs.map((breadcrumb, k) => ( 69 + navItems = breadcrumbs.map((breadcrumb: string, k: Key) => ( 73 70 <> 74 71 <span className="px-1 inline-block">/</span> 75 72 <NavItem link="." title={breadcrumb} key={k} /> ··· 83 80 className={`${className} py-2 select-none font-light text-sm text-stone-800 dark:text-stone-200 border-b border-stone-800 dark:border-stone-200`} 84 81 > 85 82 <NavItem link="/" title="home" icon="🏠" animation="wigglelg" /> 86 - {navItems || ""} 83 + {navItems || null} 87 84 </nav> 88 85 ); 89 86 }