feat: navbar

sohanemon · Jun 24, 2023 · 6923c3e · 6923c3e
1 parent 7b43e6d
commit 6923c3e
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 2 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -12,4 +12,7 @@
   .box {
     @apply max-w-6xl mx-auto font-jura;
   }
+  .box-full {
+    @apply w-full px-6 sm:px-20 lg:px-32;
+  }
 }
diff --git a/components/navbar.tsx b/components/navbar.tsx
@@ -1,9 +1,36 @@
+'use client';
+import { cn } from '@/lib/utils';
 import Image from 'next/image';
+import { usePathname } from 'next/navigation';
+import Link from 'next/link';
 
 export default function Navbar() {
+  const pathname = usePathname();
+
   return (
-    <nav className='box'>
-      <Image src={'/images/logo.svg'} alt='logo' width={149} height={38} />
+    <nav className='flex items-center justify-between pt-3 shadow-2xl box-full shadow-theme-sky/10'>
+      <Image
+        src={'/images/logo.svg'}
+        alt='logo'
+        className='-mt-3'
+        width={149}
+        height={38}
+      />
+      <ul className='flex '>
+        {navs.map((_) => (
+          <Link
+            href={`/${_}`}
+            as={_ === 'home' ? '/' : _}
+            key={_}
+            className={cn('px-3 tracking-wide uppercase', {
+              'border-b-[6px] border-theme-sky':
+                pathname.includes(_) || (pathname === '/' && _ === 'home'),
+            })}
+          >
+            {_}
+          </Link>
+        ))}
+      </ul>
     </nav>
   );
 }

diff --git a/lib/utils.ts b/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/package.json b/package.json
@@ -13,12 +13,14 @@
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.6",
     "autoprefixer": "10.4.14",
+    "clsx": "^1.2.1",
     "eslint": "8.43.0",
     "eslint-config-next": "13.4.7",
     "next": "13.4.7",
     "postcss": "8.4.24",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "tailwind-merge": "^1.13.2",
     "tailwindcss": "3.3.2",
     "typescript": "5.1.3"
   }

diff --git a/yarn.lock b/yarn.lock
@@ -547,6 +547,11 @@ client-only@0.0.1:
   resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
 
+clsx@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
+  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+
 color-convert@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
@@ -2286,6 +2291,11 @@ synckit@^0.8.5:
     "@pkgr/utils" "^2.3.1"
     tslib "^2.5.0"
 
+tailwind-merge@^1.13.2:
+  version "1.13.2"
+  resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-1.13.2.tgz#1d06c9e95ffda2320efc50ed33c65be0cda23091"
+  integrity sha512-R2/nULkdg1VR/EL4RXg4dEohdoxNUJGLMnWIQnPKL+O9Twu7Cn3Rxi4dlXkDzZrEGtR+G+psSXFouWlpTyLhCQ==
+
 tailwindcss@3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.2.tgz#2f9e35d715fdf0bbf674d90147a0684d7054a2d3"