# 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)
## 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'])
 }})
$size === 'small',
'h-12' => $size === 'default',
'h-16' => $size === 'large',
])
/>
```
## 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