# Story 9.7: Navigation & Footer Styling ## Epic Reference **Epic 9:** Design & Branding Implementation ## Story Dependencies - **Story 9.1:** Color System Implementation (provides `bg-navy`, `text-gold`, `text-cream` classes) - **Story 9.3:** Logo Integration (provides `` component with variants) - **Story 1.3:** Bilingual Infrastructure (provides language toggle mechanism) - **Story 1.4:** Base UI Navigation (provides existing header structure) ## 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 with `z-50` - [ ] Navy blue background (`bg-navy`) - [ ] Logo left (desktop), centered (mobile) - [ ] Gold text for links (`text-gold`) - [ ] Active link indicator (gold underline or background) - [ ] Language toggle styled consistently - [ ] Responsive mobile menu ### Mobile Menu - [ ] Full-width dropdown/slide from left - [ ] Navy background (`bg-navy`) - [ ] Clear touch targets (44px+ minimum) - [ ] Smooth animation (200-300ms) - [ ] Close button visible ### Footer - [ ] Navy blue background (`bg-navy`) - [ ] Logo and firm info (using ``) - [ ] Contact details section - [ ] Links to Terms/Privacy pages - [ ] Copyright notice with dynamic year - [ ] Sticky footer (always at bottom even on short pages) ### Edge Cases - [ ] Guest navigation: Show Home, Posts, Contact, Login/Register - [ ] Authenticated navigation: Show Home, Dashboard, Posts, user menu - [ ] RTL layout: Logo moves to right, menu items reverse order - [ ] Empty page content: Footer stays at viewport bottom ## Technical Implementation ### Files to Modify | File | Action | Purpose | |------|--------|---------| | `resources/views/components/layouts/app/header.blade.php` | Modify | Update nav styling to brand colors | | `resources/views/components/layouts/app.blade.php` | Modify | Add footer component, ensure sticky footer | | `resources/views/components/layouts/auth.blade.php` | Modify | Add footer for auth pages | | `resources/css/app.css` | Modify | Add nav-specific utilities if needed | ### Files to Create | File | Purpose | |------|---------| | `resources/views/components/footer.blade.php` | Reusable footer component | | `resources/views/components/nav-link.blade.php` | Styled navigation link with active state | | `resources/views/components/mobile-menu.blade.php` | Mobile navigation drawer (optional - can inline) | ### Color Reference (from Story 9.1) ``` Navy Blue: bg-navy (#0A1F44) - nav/footer background Gold: text-gold (#D4AF37) - links, accents Light Gold: text-gold-light (#F4E4B8) - hover states Cream: text-cream (#F9F7F4) - footer text ``` ### Navigation Structure ```blade @include('partials.head')
{{ $slot }}
@fluxScripts ``` ### Nav Link Component ```blade @props(['active' => false, 'mobile' => false]) @php $baseClasses = $mobile ? 'block px-4 py-3 min-h-[44px] text-base font-medium transition-colors duration-150' : 'text-sm font-medium transition-colors duration-150'; $activeClasses = $active ? 'text-gold-light' : 'text-gold hover:text-gold-light'; @endphp merge(['class' => "$baseClasses $activeClasses"]) }} wire:navigate> {{ $slot }} ``` ### Footer Component ```blade ``` ### Sticky Footer CSS (if needed) ```css /* resources/css/app.css - add if flex approach insufficient */ body { display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1; } ``` ## RTL Considerations 1. **Logo Position:** Use `rtl:order-last` if logo should move to right in RTL 2. **Menu Items:** Flex containers with `rtl:flex-row-reverse` or use logical properties 3. **Icons:** Some icons (arrows, chevrons) may need flipping with `rtl:scale-x-[-1]` 4. **Spacing:** Use `ms-*`/`me-*` (margin-start/end) instead of `ml-*`/`mr-*` 5. **Text Alignment:** Use `text-start`/`text-end` instead of `text-left`/`text-right` ## Translation Keys Required ```php // resources/lang/en/nav.php return [ 'home' => 'Home', 'posts' => 'Posts', 'login' => 'Login', 'register' => 'Register', 'dashboard' => 'Dashboard', ]; // resources/lang/en/footer.php return [ 'description' => 'Professional legal services in Palestine.', 'links' => 'Quick Links', 'terms' => 'Terms of Service', 'privacy' => 'Privacy Policy', 'contact' => 'Contact Us', 'copyright' => 'All rights reserved. :name', ]; ``` ## Definition of Done - [ ] Navigation styled with navy background and gold links - [ ] Mobile menu works with smooth animation - [ ] Footer styled and positioned correctly - [ ] Sticky footer works on short-content pages - [ ] All navigation links functional - [ ] RTL layout mirrors correctly (logo right, reversed order) - [ ] Guest vs authenticated nav items display correctly - [ ] Language toggle integrated and styled - [ ] Touch targets meet 44px minimum on mobile - [ ] Tests pass ## Testing Requirements ### Feature Tests ```php // tests/Feature/NavigationTest.php test('navigation displays home link', function () { $this->get('/') ->assertSee(__('nav.home')); }); test('guest sees login link in navigation', function () { $this->get('/') ->assertSee(__('nav.login')); }); test('authenticated user sees dashboard link', function () { $user = User::factory()->create(); $this->actingAs($user) ->get('/') ->assertSee(__('nav.dashboard')) ->assertDontSee(__('nav.login')); }); test('footer displays on all pages', function () { $this->get('/') ->assertSee(__('footer.copyright')); }); test('footer links to terms and privacy', function () { $this->get('/') ->assertSee(__('footer.terms')) ->assertSee(__('footer.privacy')); }); ``` ### Browser Tests (Pest v4) ```php // tests/Browser/NavigationTest.php it('mobile menu toggles correctly', function () { visit('/') ->resize(375, 812) // iPhone viewport ->assertNotVisible('[x-show="mobileMenu"]') ->click('[aria-label="Toggle menu"]') ->assertVisible('[x-show="mobileMenu"]') ->click('[aria-label="Toggle menu"]') ->assertNotVisible('[x-show="mobileMenu"]'); }); it('navigation renders correctly in RTL', function () { visit('/?lang=ar') ->assertAttribute('html', 'dir', 'rtl'); }); ``` ### Manual Testing Checklist - [ ] Desktop: Nav links visible, hover states work - [ ] Mobile: Menu toggle works, touch targets adequate - [ ] RTL (Arabic): Layout mirrors correctly - [ ] LTR (English): Standard layout - [ ] Short page: Footer at viewport bottom - [ ] Long page: Footer at content bottom - [ ] Guest user: Login/Register visible - [ ] Logged in: Dashboard/user menu visible ## Estimation **Complexity:** Medium | **Effort:** 4 hours ## References - Epic 9 Definition: `docs/epics/epic-9-design-branding.md` - Color System: Story 9.1 - Logo Component: Story 9.3 - Existing Header: `resources/views/components/layouts/app/header.blade.php` - PRD Design Section: `docs/prd.md#design-requirements`