Skip to main content
AniDojo provides two navigation components: Navbar for general navigation and AuthNavbar for pre-authentication pages with integrated search. Standard navigation component with responsive mobile menu and scroll-based styling.

​
Import

import Navbar from '@/components/Navbar';

​
Props

No props required - fully self-contained component.

​
Features

  • Fixed Positioning: Stays at top of viewport with fixed positioning
  • Scroll-Based Styling: Background becomes opaque with backdrop blur on scroll
  • Responsive Menu: Hamburger menu for mobile, horizontal nav for desktop
  • Search Integration: Built-in search input (desktop) or button (mobile)
  • Animation: Smooth transitions for menu and scroll effects

​
Usage

import Navbar from '@/components/Navbar';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Navbar />
        <main className="pt-20">{children}</main>
      </body>
    </html>
  );
}
The component includes these default navigation items: 
const navItems = ['BROWSE', 'LISTS', 'MEMBERS', 'JOURNAL'];
Each item links to /${item.toLowerCase()}:
  • BROWSE → /browse
  • LISTS → /lists
  • MEMBERS → /members
  • JOURNAL → /journal

​
Scroll Behavior

The navbar changes appearance based on scroll position: 
const [scrolled, setScrolled] = useState(false);

useEffect(() => {
  const handleScroll = () => {
    setScrolled(window.scrollY > 20);
  };
  
  window.addEventListener('scroll', handleScroll);
  return () => window.removeEventListener('scroll', handleScroll);
}, []);
States:
  • Not scrolled: bg-transparent
  • Scrolled (>20px): bg-ink/95 backdrop-blur-sm shadow-ink

​
Mobile Menu

Full-screen overlay menu with slide-in animation: 
<div className={`
  fixed inset-0 bg-ink z-10
  transform transition-transform duration-300
  ${isMenuOpen ? 'translate-y-0' : '-translate-y-full'}
`}>
  {/* Menu content */}
</div>
Auto-close: Menu automatically closes when window is resized to desktop size (≥768px).

​
Source Reference

Source code: ~/workspace/source/src/components/Navbar.tsx:1-112

​
AuthNavbar

Authentication-focused navigation with GlobalSearch integration for landing and auth pages.

​
Import

import AuthNavbar from '@/components/AuthNavbar';

​
Props

No props required - fully self-contained component.

​
Features

  • GlobalSearch Integration: Uses GlobalSearch component instead of basic input
  • Auth-Focused Links: Sign In, Create Account, and Browse
  • Gradient Background: Subtle gradient from ink to transparent when not scrolled
  • Mobile-First Logo: Logo only appears on mobile, maximizing desktop space for search

​
Usage

import AuthNavbar from '@/components/AuthNavbar';

export default function LandingPage() {
  return (
    <>
      <AuthNavbar />
      <main>
        {/* Landing content */}
      </main>
    </>
  );
}
Auth-specific navigation structure: 
const navItems = [
  { href: '/signin', label: 'SIGN IN' },
  { href: '/signup', label: 'CREATE ACCOUNT' },
  { href: '/browse', label: 'BROWSE' },
];

​
Background Styling

Dynamic background based on scroll state: 
<div className="absolute inset-0 bg-gradient-to-b from-ink to-transparent" />
Creates a subtle gradient fade effect

​
Search Integration

Integrates GlobalSearch component for full autocomplete functionality: 
<div className="hidden md:flex items-center space-x-4">
  <GlobalSearch className="w-48 lg:w-64" />
</div>
See GlobalSearch documentation for search features.

​
Source Reference

Source code: ~/workspace/source/src/components/AuthNavbar.tsx:1-103

​
Styling System

Both navbar components use AniDojo’s custom theme colors:

​
Color Palette

​
ink
color
Dark background color (main background)
​
cream
color
Light text color (primary text)
​
crimson-bright
color
Accent color for hover states

​
Common Classes

.nav-link {
  /* Custom link styling defined in global CSS */
  transition: color 0.2s;
}

.shadow-ink {
  /* Custom shadow using ink color */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

​
Animation Patterns

Both components use consistent animation patterns:

​
Mobile Menu Animation

// Slide in from top
className="transform transition-transform duration-300 ease-out
  ${isMenuOpen ? 'translate-y-0' : '-translate-y-full'}"

{navItems.map((item, index) => (
  <Link
    className={`animate-slide-up stagger-${index + 1}`}
  >
    {item}
  </Link>
))}

​
Comparison

​
Best Practices

​
Layout Spacing

Both navbars are fixed position, so add padding to your main content: 
<body>
  <Navbar />
  <main className="pt-20"> {/* Account for navbar height */}
    {children}
  </main>
</body>

​
Responsive Testing

Test at these breakpoints:
  • Mobile: < 768px (menu button shows)
  • Desktop: ≥ 768px (horizontal nav shows)

​
Z-Index Layering

// Navbar structure
header       z-50   // Header container
  logo       z-20   // Logo (mobile)
  menu       z-10   // Mobile menu overlay
  controls   z-20   // Mobile controls

GlobalSearch

Search component used in AuthNavbar

Theme System

Theme colors and styling

Build docs developers (and LLMs) love

Get started for freeTalk to us