277 lines
8.6 KiB
Markdown
277 lines
8.6 KiB
Markdown
# Story 1.4: Base UI & Navigation
|
|
|
|
## Epic Reference
|
|
**Epic 1:** Core Foundation & Infrastructure
|
|
|
|
## User Story
|
|
As a **website visitor or logged-in user**,
|
|
I want **a professional, responsive navigation system with brand colors**,
|
|
So that **I can easily navigate the platform on any device**.
|
|
|
|
## Story Context
|
|
|
|
### Existing System Integration
|
|
- **Integrates with:** Flux UI Free, Tailwind CSS 4, bilingual system
|
|
- **Technology:** Livewire Volt, Flux UI components, Alpine.js
|
|
- **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
|
|
- [ ] Primary: Dark Navy Blue (#0A1F44) - backgrounds, headers
|
|
- [ ] Accent: Gold (#D4AF37) - buttons, links, accents
|
|
- [ ] Light Gold: #F4E4B8 - hover states
|
|
- [ ] Off-White/Cream: #F9F7F4 - cards, content areas
|
|
- [ ] Charcoal Gray: #2C3E50 - secondary text
|
|
- [ ] Custom Tailwind colors configured via @theme
|
|
|
|
### Navigation Bar
|
|
- [ ] Fixed top position
|
|
- [ ] Navy blue background
|
|
- [ ] Logo placement: left on desktop, centered on mobile
|
|
- [ ] Main menu items: Home, Booking, Posts, Login/Dashboard
|
|
- [ ] Language toggle (Arabic/English) visible
|
|
- [ ] Responsive mobile hamburger menu
|
|
- [ ] Gold text for links, hover effects
|
|
|
|
### Mobile Menu
|
|
- [ ] Full-width dropdown or slide-in
|
|
- [ ] Navy background with gold text
|
|
- [ ] Touch-friendly targets (44px+ height)
|
|
- [ ] Smooth open/close animation
|
|
- [ ] Close on outside click or navigation
|
|
|
|
### Footer
|
|
- [ ] Navy blue background
|
|
- [ ] Libra logo (smaller version)
|
|
- [ ] Firm contact information
|
|
- [ ] Links: Terms of Service, Privacy Policy
|
|
- [ ] Copyright notice with current year
|
|
- [ ] Sticky footer (always at bottom of viewport)
|
|
|
|
### Layout Components
|
|
- [ ] Card-based layouts with proper shadows and border-radius
|
|
- [ ] Consistent spacing using Tailwind utilities
|
|
- [ ] Container max-width: 1200px, centered
|
|
- [ ] WCAG AA contrast compliance verified
|
|
|
|
### Integration Requirements
|
|
- [ ] Flux UI components used where available
|
|
- [ ] Works with RTL and LTR layouts
|
|
- [ ] Navigation state reflects current page
|
|
- [ ] Login/logout state reflected in menu
|
|
|
|
### Quality Requirements
|
|
- [ ] Responsive on all breakpoints (mobile, tablet, desktop)
|
|
- [ ] No horizontal scroll on any viewport
|
|
- [ ] Fast loading (minimal CSS/JS)
|
|
- [ ] Tests verify navigation rendering
|
|
|
|
## Technical Notes
|
|
|
|
### Tailwind Color Configuration
|
|
```css
|
|
/* In resources/css/app.css */
|
|
@import "tailwindcss";
|
|
|
|
@theme {
|
|
--color-navy: #0A1F44;
|
|
--color-gold: #D4AF37;
|
|
--color-gold-light: #F4E4B8;
|
|
--color-cream: #F9F7F4;
|
|
--color-charcoal: #2C3E50;
|
|
--color-success: #27AE60;
|
|
--color-danger: #E74C3C;
|
|
--color-warning: #F39C12;
|
|
}
|
|
```
|
|
|
|
### Layout Component Structure
|
|
```blade
|
|
<!-- resources/views/components/layouts/app.blade.php -->
|
|
<!DOCTYPE html>
|
|
<html lang="{{ app()->getLocale() }}" dir="{{ app()->getLocale() === 'ar' ? 'rtl' : 'ltr' }}">
|
|
<head>...</head>
|
|
<body class="bg-cream min-h-screen flex flex-col">
|
|
<x-navigation />
|
|
<main class="flex-1 container mx-auto px-4 py-8">
|
|
{{ $slot }}
|
|
</main>
|
|
<x-footer />
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
### Navigation Component
|
|
```blade
|
|
<!-- Using Flux UI navbar -->
|
|
<flux:navbar class="bg-navy">
|
|
<flux:brand href="/" class="text-gold">
|
|
<x-logo />
|
|
</flux:brand>
|
|
|
|
<flux:navbar.links class="text-gold">
|
|
<flux:navbar.link href="/" :active="request()->is('/')">
|
|
{{ __('navigation.home') }}
|
|
</flux:navbar.link>
|
|
<!-- More links -->
|
|
</flux:navbar.links>
|
|
|
|
<x-language-toggle />
|
|
</flux:navbar>
|
|
```
|
|
|
|
### Mobile Menu with Alpine.js
|
|
```blade
|
|
<div x-data="{ open: false }">
|
|
<button @click="open = !open" class="md:hidden">
|
|
<flux:icon name="menu" />
|
|
</button>
|
|
<div x-show="open" x-transition @click.away="open = false">
|
|
<!-- Mobile menu content -->
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
### Logo Component
|
|
```blade
|
|
<!-- resources/views/components/logo.blade.php -->
|
|
@props(['size' => 'default'])
|
|
|
|
@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
|
|
- [ ] Color scheme matches brand guidelines
|
|
- [ ] Mobile menu opens/closes smoothly
|
|
- [ ] Footer sticks to bottom of page
|
|
- [ ] Language toggle functional
|
|
- [ ] RTL/LTR layouts correct
|
|
- [ ] All navigation links work
|
|
- [ ] Login state reflected in menu
|
|
- [ ] Tests pass for navigation
|
|
- [ ] Code formatted with Pint
|
|
|
|
## Dependencies
|
|
|
|
- **Story 1.1:** Database schema (for user authentication state)
|
|
- **Story 1.2:** Authentication (for login/logout state in nav)
|
|
- **Story 1.3:** Bilingual infrastructure (for language toggle and translations)
|
|
|
|
## Risk Assessment
|
|
|
|
- **Primary Risk:** Flux UI limitations for custom styling
|
|
- **Mitigation:** Extend Flux components with custom Tailwind classes
|
|
- **Rollback:** Build custom navigation if Flux doesn't meet needs
|
|
|
|
## Estimation
|
|
|
|
**Complexity:** Medium
|
|
**Estimated Effort:** 4-5 hours
|