# Story 9.7: Navigation & Footer Styling

## Epic Reference
**Epic 9:** Design & Branding Implementation

## User Story
As a **user**,
I want **professional navigation and footer styling**,
So that **I can easily navigate the site and find information**.

## Acceptance Criteria

### Navigation Bar
- [ ] Fixed top position
- [ ] Navy blue background
- [ ] Logo left (desktop), centered (mobile)
- [ ] Gold text for links
- [ ] Active link indicator
- [ ] Language toggle styled
- [ ] Responsive mobile menu

### Mobile Menu
- [ ] Full-width dropdown/slide
- [ ] Navy background
- [ ] Clear touch targets (44px+)
- [ ] Smooth animation

### Footer
- [ ] Navy blue background
- [ ] Logo and firm info
- [ ] Contact details
- [ ] Links to Terms/Privacy
- [ ] Copyright notice
- [ ] Sticky footer (always at bottom)

## Technical Notes

```blade
<!-- Navigation -->
<nav class="fixed top-0 inset-x-0 bg-navy z-50">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between h-16">
            <!-- Logo -->
            <a href="/" class="flex items-center">
                <x-logo size="small" />
            </a>

            <!-- Desktop Links -->
            <div class="hidden md:flex items-center gap-6">
                <x-nav-link href="/" :active="request()->is('/')">
                    {{ __('nav.home') }}
                </x-nav-link>
                <x-nav-link href="/posts" :active="request()->is('posts*')">
                    {{ __('nav.posts') }}
                </x-nav-link>
                <!-- More links -->
            </div>

            <!-- Mobile Toggle -->
            <button class="md:hidden text-gold" x-on:click="mobileMenu = !mobileMenu">
                <flux:icon name="bars-3" class="w-6 h-6" />
            </button>
        </div>
    </div>
</nav>

<!-- Footer -->
<footer class="bg-navy text-cream mt-auto">
    <div class="container mx-auto px-4 py-12">
        <div class="grid md:grid-cols-3 gap-8">
            <div>
                <x-logo variant="reversed" />
                <p class="mt-4 text-sm opacity-80">{{ __('footer.description') }}</p>
            </div>
            <div>
                <h4 class="font-semibold text-gold mb-4">{{ __('footer.links') }}</h4>
                <ul class="space-y-2 text-sm">
                    <li><a href="{{ route('page.show', 'terms') }}" class="hover:text-gold">{{ __('footer.terms') }}</a></li>
                    <li><a href="{{ route('page.show', 'privacy') }}" class="hover:text-gold">{{ __('footer.privacy') }}</a></li>
                </ul>
            </div>
            <div>
                <h4 class="font-semibold text-gold mb-4">{{ __('footer.contact') }}</h4>
                <!-- Contact info -->
            </div>
        </div>
        <div class="border-t border-cream/20 mt-8 pt-8 text-sm text-center opacity-60">
            &copy; {{ date('Y') }} {{ __('footer.copyright') }}
        </div>
    </div>
</footer>
```

## Definition of Done
- [ ] Navigation styled correctly
- [ ] Mobile menu works
- [ ] Footer styled correctly
- [ ] Sticky footer works
- [ ] Links functional
- [ ] RTL layout works
- [ ] Tests pass

## Estimation
**Complexity:** Medium | **Effort:** 4 hours