Create nav.tsx

Signed-off-by: gitworkflows <118260833+gitworkflows@users.noreply.github.com>

solutions/blog/app/components/nav.tsx

@@ -0,0 +1,40 @@
+import Link from 'next/link'
+
+ const navItems = {
+   '/': {
+     name: 'home',
+   },
+   '/blog': {
+     name: 'blog',
+   },
+   'https://vercel.com/templates/next.js/portfolio-starter-kit': {
+     name: 'deploy',
+   },
+ }
+
+ export function Navbar() {
+   return (
+     <aside className="-ml-[8px] mb-16 tracking-tight">
+       <div className="lg:sticky lg:top-20">
+         <nav
+           className="flex flex-row items-start relative px-0 pb-0 fade md:overflow-auto scroll-pr-6 md:relative"
+           id="nav"
+         >
+           <div className="flex flex-row space-x-0 pr-10">
+             {Object.entries(navItems).map(([path, { name }]) => {
+               return (
+                 <Link
+                   key={path}
+                   href={path}
+                   className="transition-all hover:text-neutral-800 dark:hover:text-neutral-200 flex align-middle relative py-1 px-2 m-1"
+                 >
+                   {name}
+                 </Link>
+               )
+             })}
+           </div>
+         </nav>
+       </div>
+     </aside>
+   )
+ }