105 lines
3.2 KiB
Markdown
105 lines
3.2 KiB
Markdown
# 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">
|
|
© {{ 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
|