libra/docs/stories/story-9.7-navigation-footer-styling.md

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

<!-- 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