# Base Layout Implementation

## Overview
The base layout has been migrated from Django to Laravel while maintaining design parity and functionality. The implementation uses Laravel's Blade templating system and leverages Laravel's built-in features.

## Key Components

### Static Assets Organization
- Images placed in `public/images/`
- JavaScript modules in `resources/js/modules/`
- CSS files in `resources/css/`
- Using Laravel Vite for asset compilation

### Layout Structure
Location: `resources/views/layouts/app.blade.php`

### Key Changes from Django Implementation

1. Template Syntax Adaptations:
   - `{% extends %}` → `@extends()`
   - `{% block %}` → `@section()`/`@yield()`
   - `{% static %}` → `@vite()`
   - `{% csrf_token %}` → `@csrf`
   - `{% if %}` → `@if`/`@auth`/`@guest`

2. Authentication Handling:
   - Using Laravel's built-in auth system
   - Adapted Django user checks to Laravel guards/middleware
   - Modified permission checks using Laravel's Gate/Policy system

3. Asset Management:
   - Moved from Django's static files to Laravel's Vite
   - CSS and JS now bundled through Vite
   - Custom scripts moved to resources directory for compilation

4. Features Maintained:
   - Dark mode support with system preference detection
   - Responsive navigation with mobile menu
   - User authentication UI
   - Search functionality
   - Flash messages

### Required Routes
The following routes need to be defined to support the layout:
```php
- home
- parks.index
- rides.index
- search
- moderation.dashboard
- profile.show
- settings
- admin.index
- login
- register
- terms
- privacy
```

## Component Styling
- Maintained Tailwind CSS classes from Django implementation
- Custom styles for dropdowns and HTMX functionality preserved
- Dark mode classes mapped directly from Django

## JavaScript Dependencies
1. Core Libraries:
   - Alpine.js (via Vite)
   - HTMX (via CDN)
   - Font Awesome (via CDN)

2. Custom Modules (migrated to resources/js/modules):
   - alerts.js
   - location-autocomplete.js
   - main.js
   - park-map.js
   - photo-gallery.js
   - search.js

## Next Steps

1. Components Migration:
   - Convert remaining Django templates to Blade components
   - Create Livewire components for interactive features

2. JavaScript Integration:
   - Set up Vite configuration for module bundling
   - Integrate modules with Laravel's asset pipeline
   - Test JavaScript functionality

3. Styling:
   - Configure Tailwind for Laravel
   - Verify dark mode functionality
   - Test responsive design

4. Authentication:
   - Implement Laravel auth routes
   - Set up user permissions
   - Test authentication flow

5. Testing:
   - Verify all interactive features
   - Test responsive design
   - Ensure dark mode works correctly
   - Validate authentication flows

## Technical Notes

### Performance Considerations
1. Asset Loading:
   - Critical CSS inlined in head
   - Non-critical assets deferred
   - JavaScript modules loaded asynchronously

2. Optimization:
   - Images placed in public directory for direct serving
   - CSS/JS bundled and minified via Vite
   - Caching headers maintained

### Browser Compatibility
- Maintains support for modern browsers
- Dark mode detection uses modern APIs
- Fallbacks in place for older browsers

### Security
- CSRF protection implemented
- XSS prevention through Laravel's security features
- Content Security Policy considerations documented