naser
/
libra
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
libra/docs/stories/story-1.4-base-ui-navigatio...

8.6 KiB
Raw Blame History

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

/* 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

<!-- 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

<!-- 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

<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

<!-- 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

<!-- 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