"use client"; import React, { useState, useEffect } from "react"; import Link from "next/link"; import { motion, AnimatePresence } from "framer-motion"; import { Search, Menu, X, Github, Command, Sparkles, LayoutGrid } from "lucide-react"; import { cn } from "@/src/lib/utils"; import Image from "next/image"; // Define your navigation links here const NAV_LINKS = [ { name: "Components", href: "#" }, { name: "Templates", href: "#" }, { name: "Pricing", href: "#" }, { name: "Docs", href: "#" }, ]; export function LinearTechNav() { const [scrolled, setScrolled] = useState(false); const [mobileMenuOpen, setMobileMenuOpen] = useState(false); // For the UI only - usually triggers a modal const handleSearchClick = () => { console.log("Open search modal..."); // setSearchModalOpen(true); }; // 1. Scroll Effect: Adds a border and backdrop blur when scrolling down useEffect(() => { const handleScroll = () => { setScrolled(window.scrollY > 20); }; window.addEventListener("scroll", handleScroll); return () => window.removeEventListener("scroll", handleScroll); }, []); // 2. Keyboard shortcut listener (Ctrl+K) visual feedback useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if ((e.ctrlKey || e.metaKey) && e.key === "k") { e.preventDefault(); handleSearchClick(); } }; window.addEventListener("keydown", handleKeyDown); return () => window.removeEventListener("keydown", handleKeyDown); }, []); return ( <>

{/* --- LEFT SECTION: Logo & Desktop Nav --- */}

{/* Logo */}

Uilora. {/* Desktop Links */}

{/* --- RIGHT SECTION: Search, Socials, Mobile Toggle --- */}

{/* Desktop Search Button */} {/* Mobile Search Icon Only */} {/* Divider */}

{/* Social Icons */} {/* Mobile Menu Toggle */}

{/* --- MOBILE MENU DROPDOWN --- */} {mobileMenuOpen && (

{NAV_LINKS.map((link) => ( setMobileMenuOpen(false)} > {link.name} ))} {/* Mobile Socials inside menu */}

)}

{/* Spacer to prevent content from hiding behind fixed header */}

); }

Property	Type	Default	Description
items	Array<{name: string, href: string}>	[]	Array of navigation items with name and href.
className	string	undefined	Additional CSS classes for the nav container.
activeTab	string	undefined	Controlled state for active tab (usually via router).

Linear Tech Nav

Props