# 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
...
{{ $slot }}
```
### Navigation Component
```blade
{{ __('navigation.home') }}
```
### Mobile Menu with Alpine.js
```blade
```
### Logo Component
```blade
@props(['size' => 'default'])
@if(file_exists(public_path('images/logo.svg')))
 }})
$size === 'small',
'h-12' => $size === 'default',
'h-16' => $size === 'large',
])
/>
@else
$size === 'small',
'text-2xl' => $size === 'default',
'text-3xl' => $size === 'large',
])>Libra
@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
{{ __('navigation.home') }}
{{ __('navigation.booking') }}
{{ __('navigation.posts') }}
@auth
{{ __('navigation.dashboard') }}
@else
{{ __('navigation.login') }}
@endauth
```
## 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