generated from theradcoza/Laravel-Docker-Dev-Template
131 lines
3.6 KiB
Markdown
131 lines
3.6 KiB
Markdown
# Frontend Menu Management
|
|
|
|
This template includes a dynamic menu management system that allows administrators to create and manage frontend navigation menus through the admin panel.
|
|
|
|
## Features
|
|
|
|
- **Dynamic Menus**: Create multiple menus (header, footer, sidebar, etc.)
|
|
- **Nested Items**: Support for parent-child menu items (dropdowns)
|
|
- **Multiple Link Types**:
|
|
- External links (URLs)
|
|
- Named routes
|
|
- Module links (auto-generates route from module slug)
|
|
- **Permission-Based Filtering**: Menu items are automatically filtered based on user permissions
|
|
- **Drag & Drop Reordering**: Reorder menu items in the admin panel
|
|
|
|
## How It Works
|
|
|
|
### Permission Filtering
|
|
|
|
Menu items are automatically filtered based on the current user's permissions:
|
|
|
|
1. **Module Items**: If a menu item links to a module (e.g., `companies`), the user must have `{module}.view` permission (e.g., `companies.view`) to see that item.
|
|
|
|
2. **Permission Items**: If a menu item has a specific `permission` set, the user must have that exact permission.
|
|
|
|
3. **Admin Users**: Users with the `admin` role can see all menu items.
|
|
|
|
4. **Guest Users**: Only see items with no permission or module restrictions.
|
|
|
|
## Usage
|
|
|
|
### In Blade Templates
|
|
|
|
Use the `<x-frontend-menu>` component to render a menu:
|
|
|
|
```blade
|
|
{{-- Desktop navigation --}}
|
|
<x-frontend-menu menu="header" />
|
|
|
|
{{-- Mobile/responsive navigation --}}
|
|
<x-frontend-menu-responsive menu="header" />
|
|
|
|
{{-- By location --}}
|
|
<x-frontend-menu menu="footer" />
|
|
```
|
|
|
|
### Programmatic Access
|
|
|
|
```php
|
|
use App\Services\MenuService;
|
|
|
|
$menuService = app(MenuService::class);
|
|
|
|
// Get menu items (already filtered for current user)
|
|
$items = $menuService->getMenu('header');
|
|
|
|
// Get available modules for menu items
|
|
$modules = $menuService->getAvailableModules();
|
|
|
|
// Get available routes for menu items
|
|
$routes = $menuService->getAvailableRoutes();
|
|
```
|
|
|
|
## Admin Panel
|
|
|
|
Navigate to **Settings > Menus** in the admin panel to:
|
|
|
|
1. Create new menus
|
|
2. Add/edit/delete menu items
|
|
3. Set item types (link, route, module)
|
|
4. Configure permissions for each item
|
|
5. Reorder items via drag & drop
|
|
|
|
## Database Structure
|
|
|
|
### `menus` table
|
|
- `id` - Primary key
|
|
- `name` - Display name
|
|
- `slug` - Unique identifier (used in templates)
|
|
- `location` - Optional location hint (header, footer, sidebar)
|
|
- `is_active` - Toggle menu visibility
|
|
|
|
### `menu_items` table
|
|
- `id` - Primary key
|
|
- `menu_id` - Foreign key to menus
|
|
- `parent_id` - For nested items
|
|
- `title` - Display text
|
|
- `type` - link, route, or module
|
|
- `url` - For external links
|
|
- `route` - For named routes
|
|
- `route_params` - JSON parameters for routes
|
|
- `module` - Module slug for permission checking
|
|
- `permission` - Specific permission required
|
|
- `icon` - Heroicon name
|
|
- `target` - _self or _blank
|
|
- `order` - Sort order
|
|
- `is_active` - Toggle visibility
|
|
|
|
## Adding Menu Items for New Modules
|
|
|
|
When creating a new module, add a menu item to link to it:
|
|
|
|
1. Go to **Settings > Menus** in admin
|
|
2. Edit the "Header Navigation" menu
|
|
3. Click "New" in the Items section
|
|
4. Set:
|
|
- **Title**: Your module name
|
|
- **Type**: Module
|
|
- **Module**: Select your module from dropdown
|
|
5. Save
|
|
|
|
The menu item will automatically:
|
|
- Generate the correct URL (`/{module-slug}`)
|
|
- Check for `{module}.view` permission
|
|
- Hide from users without permission
|
|
|
|
## Customization
|
|
|
|
### Custom Menu Component
|
|
|
|
Copy and modify the default component:
|
|
|
|
```bash
|
|
cp resources/views/components/frontend-menu.blade.php \
|
|
resources/views/components/my-custom-menu.blade.php
|
|
```
|
|
|
|
### Styling
|
|
|
|
The default components use Tailwind CSS classes. Modify the component templates to match your design.
|