Feat/navbar active (#28)

* chore: ignore * feat: mock navbar * docs: update package.json * feat: change navbar titile * feat: init footer * chore: update package-lock * feat: called nav bar component * feat: clean navbar and restructure * feat: adjust css to navbar and footer * fix: css in footer to have horizon linear fade * remove package-lock * remove: conflict file ( src/app/footer.tsx ) * remove conflict file ( nav-tabs.tsx ) * feat: add navbar href and anchor * feat: add navbar color and smooth scroll * feat: add navbar active animation and hamburger menu --------- Co-authored-by: ktunchar <maikittitee1615@gmail.com> Co-authored-by: Kittipod Lambangchang <tonkittipod@gmail.com>
CE-SMART-CAREER · Nov 11, 2024 · 9ea8da8 · 9ea8da8
1 parent 03f9236
commit 9ea8da8
Show file tree

Hide file tree

Showing 10 changed files with 305 additions and 36 deletions.
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "@radix-ui/react-aspect-ratio": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-scroll-area": "^1.2.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/modules/home/_sections/company-logos.tsx b/src/modules/home/_sections/company-logos.tsx
@@ -14,10 +14,10 @@ export default function CompanyLogos({ companies, selectedCompanyId }: Props) {
   );
 
   return (
-    <article
-      id="companies"
-      className="mx-auto flex flex-col justify-center bg-black"
-    >
+    <article className="mx-auto flex flex-col justify-center bg-black">
+      <div id="companies" className="anchor-holder invisible relative p-4">
+        $
+      </div>
       <section className="bg-linear-orange-gray px-0 py-10 text-white sm:px-10">
         <h2 className="mb-10 text-center text-3xl font-semibold">
           บริษัทที่เข้าร่วม

diff --git a/src/modules/home/_sections/footer.tsx b/src/modules/home/_sections/footer.tsx
@@ -2,7 +2,10 @@ import { Icon } from '@iconify/react';
 
 export default function Footer() {
   return (
-    <footer className="bg-linear-black-orange-hori p-8 text-center">
+    <footer
+      id="contact"
+      className="bg-linear-black-orange-hori p-8 text-center"
+    >
       <h2 className="mb-4 text-lg font-bold">ติดตามข่าวสาร</h2>
       <div className="flex justify-center space-x-8">
         <Icon icon="fa:instagram" className="text-3xl" />

diff --git a/src/modules/home/_sections/location.tsx b/src/modules/home/_sections/location.tsx
@@ -60,6 +60,9 @@ export default function Location() {
   return (
     <div className="relative mx-auto flex min-h-svh flex-col justify-center lg:h-svh xl:max-w-screen-xl">
       <div className="flex h-full w-full flex-col gap-5 p-10 sm:p-20 lg:justify-center xl:p-0">
+        <div id="locations" className="anchor-holder invisible p-4">
+          $
+        </div>
         <h2 className="w-full text-2xl font-bold sm:text-3xl md:text-4xl">
           สถานที่ และผังงาน
         </h2>

diff --git a/src/modules/home/_sections/seminar.tsx b/src/modules/home/_sections/seminar.tsx
@@ -8,8 +8,11 @@ export default async function Seminar() {
   const seminarList = await getSeminarsGroupedByDay();
 
   return (
-    <article className="relative mx-auto flex h-svh flex-col bg-black">
-      <div className="absolute h-full w-full">
+    <article className="relative mx-auto flex flex-col bg-black pb-20">
+      <div id="seminar" className="anchor-holder invisible relative p-4">
+        #
+      </div>
+      <div className="relative w-full">
         <Image
           src="/assets/illustrations/cloud.png"
           alt="cloud-png"

diff --git a/src/shared/components/navbar/_constants/nav-links.tsx b/src/shared/components/navbar/_constants/nav-links.tsx
@@ -3,22 +3,22 @@ import type { NavListItem } from '../_types';
 export const NAV_LINKS: NavListItem[] = [
   {
     name: 'เกี่ยวกับ',
-    href: '#',
+    href: '#about',
   },
   {
     name: 'สัมมนา',
-    href: '#',
+    href: '#seminar',
   },
   {
     name: 'บริษัท',
-    href: '#',
+    href: '#companies',
   },
   {
     name: 'สถานที่',
-    href: '#',
+    href: '#locations',
   },
   {
     name: 'ช่องทางติดต่อ',
-    href: '#',
+    href: '#contact',
   },
 ];
diff --git a/src/shared/components/navbar/navbar.tsx b/src/shared/components/navbar/navbar.tsx
@@ -1,14 +1,105 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Root, Trigger, Content, Arrow } from '@radix-ui/react-popover';
 import { NAV_LINKS } from './_constants';
 import Link from 'next/link';
 
 export function NavBar() {
+  const [activeSection, setActiveSection] = useState('');
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  useEffect(() => {
+    const sections = NAV_LINKS.map((navLink) =>
+      document.querySelector(navLink.href),
+    );
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setActiveSection(entry.target.id);
+          }
+        });
+      },
+      {
+        threshold: 0.8,
+      },
+    );
+
+    sections.forEach((section) => {
+      if (section) {
+        observer.observe(section);
+      }
+    });
+
+    return () => {
+      sections.forEach((section) => {
+        if (section) observer.unobserve(section);
+      });
+    };
+  }, []);
+
   return (
-    <nav className="bg-black-200 flex items-center justify-between bg-linear-orange-gray p-4">
-      <h1>CE Smart Career 2024</h1>
-      <ul className="flex space-x-6 font-bold">
+    <nav className="fixed top-0 z-10 flex w-full items-center justify-between bg-linear-orange-gray p-4">
+      <h1 className="font-bold">CE Smart Career 2024</h1>
+
+      <Root onOpenChange={(open) => setIsMenuOpen(open)}>
+        <Trigger className="md:hidden" aria-label="Open Menu">
+          <svg
+            className={`h-6 w-6 ${isMenuOpen ? 'text-white' : 'text-gray-800'}`}
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="M4 6h16M4 12h16M4 18h16"
+            ></path>
+          </svg>
+        </Trigger>
+
+        <Content
+          align="start"
+          sideOffset={5}
+          className="w-full rounded-lg bg-white p-4 shadow-md md:hidden"
+        >
+          <ul className="flex flex-col space-y-4">
+            {NAV_LINKS.map((navLink, index) => (
+              <li key={index}>
+                <Link
+                  href={navLink.href}
+                  className={`block ${
+                    activeSection === navLink.href.slice(1)
+                      ? 'text-orange-200'
+                      : 'text-gray-800 transition-colors hover:text-orange-200'
+                  }`}
+                >
+                  {navLink.name}
+                </Link>
+              </li>
+            ))}
+          </ul>
+          <Arrow className="fill-current text-white" />
+        </Content>
+      </Root>
+
+      <ul className="hidden space-x-6 font-bold md:flex">
         {NAV_LINKS.map((navLink, index) => (
           <li key={index}>
-            <Link href={navLink.href}>{navLink.name}</Link>
+            <Link
+              href={navLink.href}
+              className={`${
+                activeSection === navLink.href.slice(1)
+                  ? 'text-orange-200'
+                  : 'text-gray-500 transition-colors hover:text-white'
+              }`}
+            >
+              {navLink.name}
+            </Link>
           </li>
         ))}
       </ul>

diff --git a/src/shared/style/globals.css b/src/shared/style/globals.css
@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+html {
+  scroll-behavior: smooth;
+}
+
 body {
   font-family: Arial, Helvetica, sans-serif;
   @apply select-none;
@@ -73,6 +77,12 @@ body {
       rgba(153, 153, 153, 0) 94.08%
     );
 
+    --linear-orange-black: linear-gradient(
+      112.54deg,
+      rgba(246, 135, 30, 0.4) 10.29%,
+      rgba(0, 0, 0, 1) 100.35%
+    );
+
     --linear-gray-orange: linear-gradient(
       112.54deg,
       rgba(255, 255, 255, 0.2) 10.29%,
@@ -84,6 +94,12 @@ body {
       rgba(246, 135, 30, 0.2) 100.35%
     );
 
+    --linear-black-orange-hori: linear-gradient(
+      180deg,
+      rgba(14, 7, 21, 0.2) 10.29%,
+      rgba(246, 135, 30, 0.2) 100.35%
+    );
+
     --orange-75: #fbcea3;
     --orange-100: #fab97d;
     --orange-200: #f89b44;

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -80,6 +80,7 @@ const config: Config = {
 			'linear-gray': 'var(--linear-gray)',
 			'linear-soft-gray': 'var(--linear-soft-gray)',
 			'linear-orange-gray': 'var(--linear-orange-gray)',
+			'linear-orange-black': 'var(--linear-orange-black)',
 			'linear-gray-orange': 'var(--linear-gray-orange)',
 			'linear-black-orange-hori': 'var(--linear-black-orange-hori)',
 		  },