MoonShine Admin Panel

MoonShine is a modern administration panel designed for the Laravel framework, though its core CRUD logic is decoupled from the framework, allowing for potential use with Symfony, Yii, or other systems. It is built to be highly customizable, AI-assisted, and mobile-friendly.

Key Features:

• AI-Assisted Development: Uses tools like Forty-Five (AI assistant for generating CRUD pages via prompts) and MoonVibe (admin panel generator).
• Design Flexibility: Supports 20+ ready-made themes and a palette generator to match any brand identity.
• Mobile Management: Includes a Telegram Mini App that provides a native-app experience for managing projects via Telegram.
• Extensibility: Offers a marketplace with 50+ ready-made solutions such as file managers, role systems, two-factor authentication, and visual editors.
• Layout Freedom: Allows for significant UI adjustments, including multiple sidebars and custom dashboard layouts.

To prevent ID conflicts and script initialization errors when multiple fields of the same type appear on a single page (e.g., in a list or complex form), follow these principles:

1. Generate Unique IDs: Use uniqid() or the field's actual id attribute to create unique identifiers for DOM elements.
2. Pass Config to Alpine: Instead of relying on global state, pass configuration (including the unique ID) directly into the Alpine.js component via x-data.
3. Instance-based Initialization: Ensure each field instance manages its own state and DOM elements using the unique ID.

<div
    x-data="yandexMap({
        lat: {{ $value['lat'] ?? $defaultLat }},
        lng: {{ $value['lng'] ?? $defaultLng }},
        fieldId: '{{ $attributes->get('id', 'field-' . uniqid()) }}'
    })"
    {{ $attributes->except(['name']) }}
    x-init="initMap()"
>
    <div :id="fieldId" class="map-container"></div>
    <input type="hidden" {{ $attributes->only(['name']) }} x-model="coordinates" />
</div>

The <x-moonshine::layout.mobile-bar> component allows you to define a custom dropdown menu specifically for mobile devices. This is useful if your mobile navigation should differ from your desktop TopBar or Sidebar.

Rules for MobileBar:

• Placement: Must be placed above the Sidebar and TopBar in the layout structure.
• Structure: Uses the same CSS wrappers as TopBar (menu-logo, menu menu--horizontal, menu-actions, menu-burger).
• Burger: The <x-moonshine::layout.burger> component inside a MobileBar must have the mobile-bar attribute.
• Default Behavior: If omitted, the mobile menu will simply duplicate the content of the TopBar or Sidebar.

<x-moonshine::layout.mobile-bar>
    <x-moonshine::layout.div class="menu-logo">
        <x-moonshine::layout.logo href="/" logo="/logo.svg"/>
    </x-moonshine::layout.div>

    <x-moonshine::layout.div class="menu menu--horizontal">
        <x-moonshine::layout.menu
            :elements="[
                ['label' => 'Home', 'url' => '/'],
                ['label' => 'Mobile-Only Menu', 'url' => '/mobile']
            ]"
        />
    </x-moonshine::layout.div>

    <x-moonshine::layout.div class="menu-burger">
        <x-moonshine::layout.burger mobile-bar />
    </x-moonshine::layout.div>
</x-moonshine::layout.mobile-bar>

MoonShine requires a specific nested wrapper structure for proper CSS positioning, sidebar functionality, and mobile responsiveness. Never skip or modify this hierarchy.

Required Hierarchy

1. <x-moonshine::layout.wrapper>
2. <x-moonshine::layout.sidebar> (Optional)
3. <x-moonshine::layout.div class="layout-main"> (Required)
4. <x-moonshine::layout.div class="layout-page"> (Required)
5. <x-moonshine::layout.header> and <x-moonshine::layout.content>

Common Implementation Patterns

Sidebar Layout (Standard): Use this when you want a vertical navigation menu.

TopBar Layout (No Sidebar): Use this when you want navigation at the top of the page instead of a sidebar.

{{-- Sidebar Layout --}}
<x-moonshine::layout.wrapper>
    <x-moonshine::layout.sidebar>
        <!-- Sidebar navigation -->
    </x-moonshine::layout.sidebar>

    <x-moonshine::layout.div class="layout-main">
        <x-moonshine::layout.div class="layout-page">
            <x-moonshine::layout.header>
                <x-moonshine::breadcrumbs :items="['/' => 'Home']" />
            </x-moonshine::layout.header>
            <x-moonshine::layout.content>
                <!-- Content -->
            </x-moonshine::layout.content>
        </x-moonshine::layout.div>
    </x-moonshine::layout.div>
</x-moonshine::layout.wrapper>

{{-- TopBar Layout --}}
<x-moonshine::layout.wrapper>
    <x-moonshine::layout.top-bar>
        <!-- Top navigation -->
    </x-moonshine::layout.top-bar>

    <x-moonshine::layout.div class="layout-main">
        <x-moonshine::layout.div class="layout-page">
            <x-moonshine::layout.header>
                <!-- Page header -->
            </x-moonshine::layout.header>
            <x-moonshine::layout.content>
                <!-- Content -->
            </x-moonshine::layout.content>
        </x-moonshine::layout.div>
    </x-moonshine::layout.div>
</x-moonshine::layout.wrapper>