From e871d453a85d3f5c1087e4c9f8e60b3e9b9faf88 Mon Sep 17 00:00:00 2001
From: arraysid <arraysdotid@gmail.com>
Date: Sun, 1 Jun 2025 08:42:59 +0700
Subject: [PATCH] refactor: simplify Header component by removing unused scroll
 handling and improving mobile menu structure

---
 .../src/app/(public)/_components/header.tsx   | 36 +++----------------
 .../app/(public)/{articles => teams}/page.tsx |  0
 apps/landing/src/data/navigations.json        |  4 ---
 3 files changed, 5 insertions(+), 35 deletions(-)
 rename apps/landing/src/app/(public)/{articles => teams}/page.tsx (100%)

diff --git a/apps/landing/src/app/(public)/_components/header.tsx b/apps/landing/src/app/(public)/_components/header.tsx
index 1f533a1..5e2d0ec 100644
--- a/apps/landing/src/app/(public)/_components/header.tsx
+++ b/apps/landing/src/app/(public)/_components/header.tsx
@@ -13,45 +13,26 @@ import { LuMenu, LuX } from 'react-icons/lu';
 export function Header() {
   const router = useRouter();
   const pathname = usePathname();
-  const [isScrolled, setIsScrolled] = useState(false);
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
   useEffect(() => {
-    const handleScroll = () => {
-      setIsScrolled(window.scrollY > 10);
-    };
-
-    window.addEventListener('scroll', handleScroll);
-
-    // Lock body scroll when mobile menu is open
     if (mobileMenuOpen) {
       document.body.style.overflow = 'hidden';
     } else {
       document.body.style.overflow = 'auto';
     }
-
     return () => {
-      window.removeEventListener('scroll', handleScroll);
       document.body.style.overflow = 'auto';
     };
   }, [mobileMenuOpen]);
 
-  // Close mobile menu when route changes
   useEffect(() => {
     setMobileMenuOpen(false);
   }, [pathname]);
 
   return (
-    <header
-      className={cn(
-        'sticky top-0 z-50 w-full transition-all duration-300',
-        isScrolled
-          ? 'bg-background/90 backdrop-blur-lg border-b shadow-sm'
-          : 'bg-background/70'
-      )}
-    >
+    <header className="sticky top-0 w-full z-50 bg-background/70">
       <div className="container flex h-20 items-center justify-between">
-        {/* Logo */}
         <Link
           href="/"
           className="relative overflow-hidden rounded z-50"
@@ -60,7 +41,6 @@ export function Header() {
           <LogoSimple className="w-24 md:w-28" />
         </Link>
 
-        {/* Desktop Navigation */}
         <nav className="hidden md:flex items-center gap-8">
           {NAVIGATIONS.map(({ link, title }) => (
             <Link
@@ -84,7 +64,6 @@ export function Header() {
           ))}
         </nav>
 
-        {/* Desktop Auth Buttons */}
         <div className="hidden md:flex items-center gap-x-3">
           <Button
             onClick={() => router.push('/signin')}
@@ -93,7 +72,7 @@ export function Header() {
             Masuk
           </Button>
           <Button
-            variant="primary"
+            variant="bordered"
             onClick={() => router.push('/signup')}
             className="px-5 py-2 text-sm font-medium shadow-lg shadow-primary/20 hover:shadow-primary/30"
           >
@@ -101,9 +80,8 @@ export function Header() {
           </Button>
         </div>
 
-        {/* Mobile Menu Button */}
         <button
-          onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+          onClick={() => setMobileMenuOpen((prev) => !prev)}
           className="flex md:hidden relative z-50 p-2 rounded-lg hover:bg-muted transition-colors"
           aria-label={mobileMenuOpen ? 'Tutup menu' : 'Buka menu'}
         >
@@ -114,16 +92,14 @@ export function Header() {
           )}
         </button>
 
-        {/* Fullscreen Mobile Menu */}
         <AnimatePresence>
           {mobileMenuOpen && (
             <motion.div
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
               exit={{ opacity: 0 }}
-              className="fixed inset-0 z-40 bg-background flex flex-col"
+              className="fixed inset-0 z-60 bg-background flex flex-col"
             >
-              {/* Menu Header */}
               <div className="container flex h-20 items-center justify-between">
                 <Link
                   href="/"
@@ -142,7 +118,6 @@ export function Header() {
                 </button>
               </div>
 
-              {/* Navigation Links */}
               <motion.nav
                 className="flex-1 flex flex-col items-center justify-center gap-6 py-10"
                 initial={{ y: 20, opacity: 0 }}
@@ -166,7 +141,6 @@ export function Header() {
                 ))}
               </motion.nav>
 
-              {/* Auth Buttons */}
               <motion.div
                 className="container space-y-4 pb-10"
                 initial={{ y: 20, opacity: 0 }}
@@ -183,7 +157,7 @@ export function Header() {
                   Masuk
                 </Button>
                 <Button
-                  variant="primary"
+                  variant="bordered"
                   onClick={() => {
                     setMobileMenuOpen(false);
                     router.push('/signup');
diff --git a/apps/landing/src/app/(public)/articles/page.tsx b/apps/landing/src/app/(public)/teams/page.tsx
similarity index 100%
rename from apps/landing/src/app/(public)/articles/page.tsx
rename to apps/landing/src/app/(public)/teams/page.tsx
diff --git a/apps/landing/src/data/navigations.json b/apps/landing/src/data/navigations.json
index 3894f4e..012c973 100644
--- a/apps/landing/src/data/navigations.json
+++ b/apps/landing/src/data/navigations.json
@@ -15,10 +15,6 @@
     "title": "Roadmap",
     "link": "/roadmap"
   },
-  {
-    "title": "Artikel",
-    "link": "/articles"
-  },
   {
     "title": "Team",
     "link": "/teams"