182 lines
5.0 KiB
Markdown
182 lines
5.0 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)
|
|
|
|
## 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'])
|
|
|
|
<img
|
|
src="{{ asset('images/logo.svg') }}"
|
|
alt="{{ __('Libra Law Firm') }}"
|
|
@class([
|
|
'h-8' => $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
|