create-landing-app 0.2.0 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-landing-app",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Create a production-ready Next.js landing page with one command",
   "type": "module",
   "bin": {
@@ -44,5 +44,7 @@
     "ts-jest": "^29.1.0",
     "typescript": "^5.0.0"
   },
-  "engines": { "node": ">=20.9.0" }
+  "engines": {
+    "node": ">=20.9.0"
+  }
 }

package/templates/nextjs/base/components/navs/navbar.tsx

@@ -1,13 +1,40 @@
+"use client";
+import { useState, useEffect, useRef } from "react";
 import Link from "next/link";
 import { NAV_LINKS, SITE_NAME } from "@/constants/common";
 import NavbarMobile from "./navbar-mobile";
 import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 // __NAVBAR_IMPORT__
 
-// Server component — no animation needed at nav level
 export default function Navbar() {
+  const [isVisible, setIsVisible] = useState(true);
+  const lastScrollY = useRef(0);
+
+  useEffect(() => {
+    const controlNavbar = () => {
+      const currentScrollY = window.scrollY;
+
+      if (currentScrollY < lastScrollY.current || currentScrollY < 10) {
+        setIsVisible(true); // scrolling up OR near top → show
+      } else {
+        setIsVisible(false); // scrolling down → hide
+      }
+
+      lastScrollY.current = currentScrollY;
+    };
+
+    window.addEventListener("scroll", controlNavbar);
+    return () => window.removeEventListener("scroll", controlNavbar);
+  }, []);
+
   return (
-    <header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/80 backdrop-blur-sm header-shadow">
+    <header
+      className={cn(
+        "fixed top-0 z-50 w-full border-b border-border/40 bg-background/80 backdrop-blur-sm header-shadow transition-transform duration-300",
+        isVisible ? "translate-y-0" : "-translate-y-[calc(100%+20px)]"
+      )}
+    >
       <div className="content-container flex h-16 items-center justify-between">
         {/* Logo */}
         <Link href="/" className="flex items-center gap-2 text-xl font-bold text-primary">

package/templates/nextjs/optional/i18n-dict/files/components/navs/navbar.tsx

@@ -1,15 +1,42 @@
 "use client";
+import { useState, useEffect, useRef } from "react";
 import Link from "next/link";
 import { NAV_LINKS, SITE_NAME } from "@/constants/common";
 import NavbarMobile from "./navbar-mobile";
 import { Button } from "@/components/ui/button";
 import LanguageSwitcher from "./language-switcher";
 import { useDictionary } from "@/lib/dict-context";
+import { cn } from "@/lib/utils";
 
 export default function Navbar() {
   const dict = useDictionary();
+  const [isVisible, setIsVisible] = useState(true);
+  const lastScrollY = useRef(0);
+
+  useEffect(() => {
+    const controlNavbar = () => {
+      const currentScrollY = window.scrollY;
+
+      if (currentScrollY < lastScrollY.current || currentScrollY < 10) {
+        setIsVisible(true);
+      } else {
+        setIsVisible(false);
+      }
+
+      lastScrollY.current = currentScrollY;
+    };
+
+    window.addEventListener("scroll", controlNavbar);
+    return () => window.removeEventListener("scroll", controlNavbar);
+  }, []);
+
   return (
-    <header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/80 backdrop-blur-sm header-shadow">
+    <header
+      className={cn(
+        "fixed top-0 z-50 w-full border-b border-border/40 bg-background/80 backdrop-blur-sm header-shadow transition-transform duration-300",
+        isVisible ? "translate-y-0" : "-translate-y-[calc(100%+20px)]"
+      )}
+    >
       <div className="content-container flex h-16 items-center justify-between">
         {/* Logo */}
         <Link href="/" className="flex items-center gap-2 text-xl font-bold text-primary">