reviewd and fixed epic 1 & 2

2025-12-20 21:14:15 +02:00
parent 8f95089814
commit b93b9363a6
9 changed files with 1040 additions and 66 deletions
@@ -16,6 +16,12 @@ So that **I can easily navigate the platform on any device**.
 - **Follows pattern:** Flux UI navbar patterns, mobile-first design
 - **Touch points:** All pages (layout component)

+### Referenced Documents
+- **PRD Section 5.2:** Navigation System - menu structure, language toggle requirements
+- **PRD Section 7.1:** Brand Identity & Visual Guidelines - color palette, typography, spacing
+- **PRD Section 7.2-7.4:** Design principles, UI/UX requirements, responsive breakpoints
+- **Story 1.3:** Bilingual Infrastructure - RTL/LTR detection via `app()->getLocale()`, font configuration
+
 ## Acceptance Criteria

 ### Color Scheme
@@ -139,17 +145,106 @@ So that **I can easily navigate the platform on any device**.
 <!-- resources/views/components/logo.blade.php -->
@props(['size' => 'default'])

-<img
-    src="{{ asset('images/logo.svg') }}"
-    alt="{{ __('Libra Law Firm') }}"
-    @class([
-        'h-8' => $size === 'small',
-        'h-12' => $size === 'default',
-        'h-16' => $size === 'large',
-    ])
-/>
+@if(file_exists(public_path('images/logo.svg')))
+    <img
+        src="{{ asset('images/logo.svg') }}"
+        alt="{{ __('Libra Law Firm') }}"
+        @class([
+            'h-8' => $size === 'small',
+            'h-12' => $size === 'default',
+            'h-16' => $size === 'large',
+        ])
+    />
+@else
+    <span @class([
+        'font-bold text-gold',
+        'text-lg' => $size === 'small',
+        'text-2xl' => $size === 'default',
+        'text-3xl' => $size === 'large',
+    ])>Libra</span>
+@endif
 ```

+### Asset Dependencies
+- **Logo SVG:** Required at `public/images/logo.svg`
+- **Fallback:** Text "Libra" in gold displayed if logo asset not available
+- **Logo Specs:** SVG format preferred, min 120px width desktop, 80px mobile
+- **Note:** Logo asset to be provided by client; use text fallback during development
+
+### Auth-Aware Navigation
+```blade
+<!-- Guest vs Authenticated menu items -->
+<flux:navbar.links class="text-gold">
+    <flux:navbar.link href="/" :active="request()->is('/')">
+        {{ __('navigation.home') }}
+    </flux:navbar.link>
+    <flux:navbar.link href="/booking" :active="request()->is('booking*')">
+        {{ __('navigation.booking') }}
+    </flux:navbar.link>
+    <flux:navbar.link href="/posts" :active="request()->is('posts*')">
+        {{ __('navigation.posts') }}
+    </flux:navbar.link>
+
+    @auth
+        <flux:navbar.link href="/dashboard" :active="request()->is('dashboard*')">
+            {{ __('navigation.dashboard') }}
+        </flux:navbar.link>
+        <form method="POST" action="{{ route('logout') }}" class="inline">
+            @csrf
+            <flux:navbar.link
+                href="{{ route('logout') }}"
+                onclick="event.preventDefault(); this.closest('form').submit();"
+            >
+                {{ __('navigation.logout') }}
+            </flux:navbar.link>
+        </form>
+    @else
+        <flux:navbar.link href="/login" :active="request()->is('login')">
+            {{ __('navigation.login') }}
+        </flux:navbar.link>
+    @endauth
+</flux:navbar.links>
+```
+
+## Test Scenarios
+
+### Navigation Rendering Tests
+- [ ] Navigation component renders on all pages
+- [ ] Logo displays correctly (or text fallback if SVG missing)
+- [ ] All menu links are visible and clickable
+- [ ] Active page is visually indicated in navigation
+- [ ] Navigation has correct navy background and gold text
+
+### Mobile Menu Tests
+- [ ] Hamburger menu icon visible on mobile viewports
+- [ ] Mobile menu toggles open on click
+- [ ] Mobile menu closes on outside click
+- [ ] Mobile menu closes when navigating to a link
+- [ ] Touch targets are at least 44px height
+
+### Authentication State Tests
+- [ ] Guest users see: Home, Booking, Posts, Login
+- [ ] Authenticated users see: Home, Booking, Posts, Dashboard, Logout
+- [ ] Logout form submits correctly and logs user out
+
+### Language Toggle Tests
+- [ ] Language toggle visible in navigation
+- [ ] Switching to Arabic applies RTL layout
+- [ ] Switching to English applies LTR layout
+- [ ] Language preference persists across page loads
+
+### Footer Tests
+- [ ] Footer renders at bottom of viewport (sticky footer)
+- [ ] Footer contains logo (smaller version)
+- [ ] Footer contains Terms of Service and Privacy Policy links
+- [ ] Copyright year displays current year dynamically
+
+### Responsive Tests
+- [ ] No horizontal scroll on mobile (320px+)
+- [ ] No horizontal scroll on tablet (768px)
+- [ ] Layout adapts correctly at all breakpoints
+- [ ] Logo centered on mobile, left-aligned on desktop
+
 ## Definition of Done

 - [ ] Navigation renders correctly on all viewports