Navigation Components

import Header from '@/components/landing-page/header'
 
// In your layout
export default function Layout({ children }) {
  return (
    <>
      <Header />
      <main>{children}</main>
    </>
  )
}

// Customize navigation links in header-client.tsx
const navigationLinks = [
  { href: '/features', label: 'Features' },
  { href: '/pricing', label: 'Pricing' },
  { href: '/blog', label: 'Blog' },
  { href: '/contact', label: 'Contact' },
]
 
// Customize CTA buttons
const ctaButtons = [
  { href: '/login', label: 'Sign In', variant: 'ghost' },
  { href: '/register', label: 'Get Started', variant: 'primary' },
]

// components/landing-page/header-client.tsx
'use client'
 
import { useState } from 'react'
import Link from 'next/link'
import { Menu, X } from 'lucide-react'
import Button from '@/components/ui/button'
import LanguageSelector from './language-selector'
import ThemeToggle from './theme-toggle'
import UserMenu from './user-menu'
 
export default function HeaderClient() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
 
  return (
    <header className="sticky top-0 z-50 w-full">
      <nav className="nextra-nav-container px-4 lg:px-8">
        {/* Logo */}
        <Link href="/" className="flex items-center">
          <span className="text-gradient font-bold text-xl">
            ignitionstack.pro
          </span>
        </Link>
 
        {/* Desktop Navigation */}
        <div className="hidden lg:flex items-center gap-8">
          {navigationLinks.map((link) => (
            <Link key={link.href} href={link.href}>
              {link.label}
            </Link>
          ))}
        </div>
 
        {/* Actions */}
        <div className="flex items-center gap-4">
          <ThemeToggle />
          <LanguageSelector />
          <UserMenu />
 
          {/* Mobile menu button */}
          <button
            className="lg:hidden"
            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
          >
            {mobileMenuOpen ? <X /> : <Menu />}
          </button>
        </div>
      </nav>
 
      {/* Mobile Menu */}
      {mobileMenuOpen && (
        <MobileMenu onClose={() => setMobileMenuOpen(false)} />
      )}
    </header>
  )
}

import Footer from '@/components/landing-page/footer'
 
// In your layout
export default function Layout({ children }) {
  return (
    <>
      <main>{children}</main>
      <Footer />
    </>
  )
}

// Customize footer links
const footerSections = [
  {
    title: 'Product',
    links: [
      { href: '/features', label: 'Features' },
      { href: '/pricing', label: 'Pricing' },
      { href: '/changelog', label: 'Changelog' },
    ],
  },
  {
    title: 'Resources',
    links: [
      { href: '/docs', label: 'Documentation' },
      { href: '/blog', label: 'Blog' },
      { href: '/support', label: 'Support' },
    ],
  },
  {
    title: 'Legal',
    links: [
      { href: '/privacy', label: 'Privacy Policy' },
      { href: '/terms', label: 'Terms of Service' },
    ],
  },
]
 
const socialLinks = [
  { icon: 'github', href: 'https://github.com/andersonlimahw' },
]

import AdminSidebar from '@/components/admin/admin-sidebar'
import AdminHeader from '@/components/admin/admin-header'
 
export default function AdminLayout({ children }) {
  return (
    <div className="flex min-h-screen">
      <AdminSidebar />
      <div className="flex-1">
        <AdminHeader />
        <main className="p-6">{children}</main>
      </div>
    </div>
  )
}

// Customize admin menu items
const menuItems = [
  {
    icon: LayoutDashboard,
    label: 'Dashboard',
    href: '/admin',
  },
  {
    icon: Users,
    label: 'Users',
    href: '/admin/users',
  },
  {
    icon: Package,
    label: 'Products',
    href: '/admin/products',
  },
  {
    icon: FileText,
    label: 'Posts',
    href: '/admin/posts',
  },
  {
    icon: BarChart,
    label: 'Analytics',
    href: '/admin/analytics',
  },
  {
    icon: Settings,
    label: 'Settings',
    href: '/admin/settings',
  },
]

import Breadcrumbs from '@/components/commons/breadcrumbs'
 
// Automatic breadcrumbs from route
<Breadcrumbs />
 
// Custom breadcrumbs
<Breadcrumbs
  items={[
    { label: 'Home', href: '/' },
    { label: 'Products', href: '/products' },
    { label: 'Product Name' }, // No href = current page
  ]}
/>

'use client'
 
import { useTheme } from 'next-themes'
import { Sun, Moon } from 'lucide-react'
 
export function ThemeToggle() {
  const { theme, setTheme } = useTheme()
 
  return (
    <button
      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
      className="p-2 rounded-lg hover:bg-surface-hover"
    >
      {theme === 'dark' ? (
        <Sun className="w-5 h-5" />
      ) : (
        <Moon className="w-5 h-5" />
      )}
    </button>
  )
}

'use client'
 
import { useRouter, usePathname } from 'next/navigation'
import { useLocale } from 'next-intl'
 
const languages = [
  { code: 'en', label: 'English', flag: '🇺🇸' },
  { code: 'pt', label: 'Português', flag: '🇧🇷' },
  { code: 'es', label: 'Español', flag: '🇪🇸' },
]
 
export function LanguageSelector() {
  const locale = useLocale()
  const router = useRouter()
  const pathname = usePathname()
 
  const switchLocale = (newLocale: string) => {
    const newPath = pathname.replace(`/${locale}`, `/${newLocale}`)
    router.push(newPath)
  }
 
  return (
    <select
      value={locale}
      onChange={(e) => switchLocale(e.target.value)}
      className="bg-transparent"
    >
      {languages.map((lang) => (
        <option key={lang.code} value={lang.code}>
          {lang.flag} {lang.label}
        </option>
      ))}
    </select>
  )
}

'use client'
 
import { useUser } from '@/hooks/use-user'
import { signOut } from '@/lib/auth'
 
export function UserMenu() {
  const { user, isLoading } = useUser()
 
  if (isLoading) {
    return <Skeleton className="w-8 h-8 rounded-full" />
  }
 
  if (!user) {
    return (
      <Link href="/login">
        <Button variant="ghost">Sign In</Button>
      </Link>
    )
  }
 
  return (
    <Dropdown>
      <Dropdown.Trigger>
        <Avatar src={user.avatar_url} alt={user.name} />
      </Dropdown.Trigger>
      <Dropdown.Content>
        <Dropdown.Item href="/dashboard">Dashboard</Dropdown.Item>
        <Dropdown.Item href="/settings">Settings</Dropdown.Item>
        <Dropdown.Separator />
        <Dropdown.Item onClick={() => signOut()}>
          Sign Out
        </Dropdown.Item>
      </Dropdown.Content>
    </Dropdown>
  )
}

.nextra-nav-container {
  background-color: rgba(var(--color-bg-primary), 0.8);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgb(var(--color-border-primary));
}

import { usePathname } from 'next/navigation'
import { cn } from '@/lib/utils'
 
function NavLink({ href, children }) {
  const pathname = usePathname()
  const isActive = pathname === href
 
  return (
    <Link
      href={href}
      className={cn(
        "transition-colors",
        isActive
          ? "text-accent-orange"
          : "text-content-body hover:text-content-primary"
      )}
    >
      {children}
    </Link>
  )
}