Marketing UI

"use client"; import Link from "next/link"; import { useEffect, useState, useRef } from "react"; const NavLink = ({ ...props }) => { const { children, href = "", className = "", active = "", } = props; const [pathname, setPathname] = useState("/"); const isActive = pathname == href; const activeClass = isActive ? active : ""; useEffect(() => { setPathname(window.location.pathname); }, [props]); return ( {children} ); }; const Title = ({ children }) => (

{children}

); const SectionsList = ({ items }) => (

{item?.name}

); const SearchBox = ({ onSearch, searchRef }) => (

onSearch(e.target.value)} className='w-full pl-12 pr-3 py-2 bg-white text-sm text-gray-500 bg-transparent outline-none border ring-blue-600 focus:ring-2 shadow-sm rounded-lg duration-200' />

); const Sidebar = () => { const componentType = { marketingUIComponent: [ { name: "Banners", href: "/components/banners" }, { name: "CTA Sections", href: "/components/ctas" }, { name: "Team Sections", href: "/components/team-sections" }, { name: "Contact Sections", href: "/components/contact-sections" }, { name: "Footers", href: "/components/footers" }, { name: "Logo Grid", href: "/components/logo-grid" }, { name: "Hero Sections", href: "/components/heroes" }, { name: "Feature Sections", href: "/components/feature-sections" }, { name: "Pricing Sections", href: "/components/pricing-sections" }, { name: "Testimonials", href: "/components/testimonials" }, { name: "Stats", href: "/components/stats" }, { name: "Newsletter Sections", href: "/components/newsletter-sections" }, ], // applicationUIComponent: [ // { name: "Inputs", href: "/components/inputs" }, // { name: "Tables", href: "/components/tables" }, // { name: "Paginations", href: "/components/paginations" }, // { name: "Cards", href: "/components/cards" }, // { name: "Alerts", href: "/components/alerts" }, // { name: "Section Headers", href: "/components/section-headers" }, // { name: "Buttons", href: "/components/buttons" }, // { name: "Navbars", href: "/components/navbars" }, // { name: "Select Menus", href: "/components/select-menus" }, // { name: "Modals", href: "/components/modals" }, // { name: "Avatars", href: "/components/avatars" }, // { name: "Authentication", href: "/components/auth" }, // { name: "Radio Groups", href: "/components/radio-groups" }, // { name: "Context Menu", href: "/components/context-menu" }, // ], }; const [sidebarOpen, setSidebarOpen] = useState(false); const [isAnimating, setIsAnimating] = useState(false); const [searchQuery, setSearchQuery] = useState(""); const [filteredComponents, setFilteredComponents] = useState(componentType); const searchRef = useRef(null); useEffect(() => { const savedSidebarState = localStorage.getItem('sidebarOpen'); if (savedSidebarState !== null) { setSidebarOpen(JSON.parse(savedSidebarState)); } const handleKeyDown = (e) => { if ((e.metaKey || e.ctrlKey) && e.key === 'k') { e.preventDefault(); searchRef.current.focus(); } }; window.addEventListener('keydown', handleKeyDown); return () => { window.removeEventListener('keydown', handleKeyDown); }; }, []); useEffect(() => { const filtered = { marketingUIComponent: componentType.marketingUIComponent.filter(item => item.name.toLowerCase().includes(searchQuery.toLowerCase()) ), // applicationUIComponent: componentType.applicationUIComponent.filter(item => // item.name.toLowerCase().includes(searchQuery.toLowerCase()) // ) }; setFilteredComponents(filtered); }, [searchQuery]); const toggleSidebar = () => { setIsAnimating(true); setTimeout(() => setIsAnimating(false), 300); const newState = !sidebarOpen; setSidebarOpen(newState); localStorage.setItem('sidebarOpen', JSON.stringify(newState)); }; const handleSearch = (query) => { setSearchQuery(query); }; return ( <> ); }; export default Sidebar;

Sidebars

Standard Sidebar

Dark Sidebar

Mini Sidebar