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

5.0 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)

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'])

<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