PixelPilot uiux-consistent-navigation.instructions.md

UI/UX Consistent Navigation

Navbar and footer as shared components. Active states, responsive design, token-aware styling.

---

OVERVIEW

This skill ensures:

1. Single source of truth for navigation
2. Shared navbar component across all pages
3. Shared footer component across all pages
4. Active link highlighting with route matching
5. Consistent styling (font, spacing, colors)

---

GOLDEN RULES

1. Never duplicate navigation markup - use partials/components
2. Active state comes from route matching - not manual classes
3. Font sizes and spacing identical - use design tokens
4. Mobile menu consistent - same items as desktop
5. Footer on every page - with role="contentinfo"

---

LARAVEL BLADE STRUCTURE

resources/views/
├── layouts/
│   └── app.blade.php
├── partials/
│   ├── navbar.blade.php
│   ├── navbar-mobile.blade.php
│   └── footer.blade.php
└── pages/
    ├── home.blade.php
    ├── about.blade.php
    └── ...

---

SHARED NAVBAR (Laravel)

{{-- resources/views/partials/navbar.blade.php --}}
@props(['transparent' => false])

<header 
    class="navbar {{ $transparent ? 'navbar--transparent' : '' }}" 
    role="banner"
    x-data="{ mobileMenuOpen: false }"
>
    <div class="navbar__container">
        {{-- Logo --}}
        <x-logo class="navbar__logo" />
        
        {{-- Desktop Navigation --}}
        <nav class="navbar__nav" aria-label="Main navigation">
            @php
                $navItems = [
                    ['route' => 'features', 'label' => 'Features'],
                    ['route' => 'pricing', 'label' => 'Pricing'],
                    ['route' => 'about', 'label' => 'About'],
                    ['route' => 'contact', 'label' => 'Contact'],
                ];
            @endphp
            
            @foreach($navItems as $item)
                <a 
                    href="{{ route($item['route']) }}" 
                    class="navbar__link {{ request()->routeIs($item['route'] . '*') ? 'navbar__link--active' : '' }}"
                    @if(request()->routeIs($item['route'])) aria-current="page" @endif
                >
                    {{ $item['label'] }}
                </a>
            @endforeach
        </nav>
        
        {{-- Actions --}}
        <div class="navbar__actions">
            @auth
                <a href="{{ route('dashboard') }}" class="btn btn--ghost btn--sm">
                    Dashboard
                </a>
                <div class="navbar__user" x-data="{ open: false }">
                    <button 
                        @click="open = !open" 
                        class="navbar__avatar"
                        aria-haspopup="true"
                        :aria-expanded="open"
                    >
                        <img 
                            src="{{ Auth::user()->avatar_url ?? '/placeholder-avatar.jpg' }}" 
                            alt="{{ Auth::user()->name }}"
                            width="32"
                            height="32"
                        >
                    </button>
                    <div 
                        x-show="open" 
                        @click.away="open = false"
                        class="navbar__dropdown"
                    >
                        <a href="{{ route('profile') }}">Profile</a>
                        <a href="{{ route('settings') }}">Settings</a>
                        <hr>
                        <form method="POST" action="{{ route('logout') }}">
                            @csrf
                            <button type="submit">Sign Out</button>
                        </form>
                    </div>
                </div>
            @else
                <a href="{{ route('login') }}" class="btn btn--ghost btn--sm">
                    Sign In
                </a>
                <a href="{{ route('register') }}" class="btn btn--primary btn--sm">
                    Get Started
                </a>
            @endauth
        </div>
        
        {{-- Mobile Menu Toggle --}}
        <button 
            class="navbar__toggle"
            @click="mobileMenuOpen = !mobileMenuOpen"
            :aria-expanded="mobileMenuOpen"
            aria-label="Toggle navigation menu"
        >
            <i x-show="!mobileMenuOpen" data-lucide="menu"></i>
            <i x-show="mobileMenuOpen" data-lucide="x"></i>
        </button>
    </div>
    
    {{-- Mobile Menu --}}
    <div 
        class="navbar__mobile-menu"
        x-show="mobileMenuOpen"
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0 -translate-y-2"
        x-transition:enter-end="opacity-100 translate-y-0"
        x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100 translate-y-0"
        x-transition:leave-end="opacity-0 -translate-y-2"
    >
        @include('partials.navbar-mobile', ['navItems' => $navItems])
    </div>
</header>