README

This package provides an elegant and responsive admin panel and landing page layout for applications using Laravel Jetstream with Livewire. It offers a quick and easy way to scaffold your application's administrative interface and landing page, saving you time and effort in the early stages of development.

Libraries

Installation

Are you a visual learner?, check our youtube video https://youtu.be/yPIGqrF1GAM

You can install the package via composer:

composer require ivanaquino/jet-admin

Some frontend features works by using flowbite so you have to install it:

npm i -D flowbite

Add the view paths and require Flowbite as a plugin inside tailwind.config.js also add darkMode:

{
    darkMode: 'class',
    //...
    plugins: [
        require('flowbite/plugin')
    ],
}

It's simple to change main color, you just have to modify the tailwind config file tailwind.config.js.

{
    theme: {
        extend: {
            // ...
            colors: {
                'primary': {
                    '50': '#eaf5ff',
                    '100': '#d9ecff',
                    '200': '#badbff',
                    '300': '#91c1ff',
                    '400': '#659bff',
                    '500': '#4273ff',
                    '600': '#2149ff',
                    '700': '#183bec',
                    '800': '#1533be',
                    '900': '#1b3494',
                    '950': '#101d56',
                },
            },
        },
    },
}

Import the Flowbite JavaScript package inside the ./resources/js/app.js file to enable the interactive components such as modals, dropdowns, navbars, and more.

import 'flowbite';

Publish jet-admin javascript

php artisan vendor:publish --tag="jet-admin-js"

Now add jet-admin js to ./resources/js/app.js

import './vendor/jet_admin';

To change navigation items you have to publish config file:

php artisan vendor:publish --tag="jet-admin-config"

This is the contents of the published config file:

return [
    /*
     |--------------------------------------------------------------------------
     | Landing Navigation
     |--------------------------------------------------------------------------
     |
     | name: Could be a string or a translation key this will be passed through the __() function
     | route: Could be a url or a route name
     |
     |*/
    'landing_navigation' => [
        [
            'name' => 'Home',
            'route' => '/',
        ],
    ],

    /*
     |--------------------------------------------------------------------------
     | Dashboard Navigation
     |--------------------------------------------------------------------------
     |
     | Items in this array will be used to generate the dashboard sidebar
     | - name: The label that will be displayed in the sidebar
     | - route: Could be a route name or a URL
     | - active_route: The route name or URL that will be used to determine if the item is active
     | - icon: The icon that will be displayed in the sidebar, Heroicons' name.
     |
     |*/
    'dashboard_navigation' => [
        [
            'name' => 'Dashboard',
            'route' => 'dashboard',
            'active_route' => 'dashboard*',
            'icon' => 'home',
        ],
        [
            'name' => 'Profile',
            'route' => 'profile.show',
            'active_route' => 'profile.show',
            'icon' => 'user',
        ],
        // [
        //     'name' => 'Url example',
        //     'route' => 'my-url',
        //     'active_route' => 'my-url',
        //     'icon' => 'shield-exclamation',
        // ],
    ],
];

Optionally, you can publish the views using

php artisan vendor:publish --tag="jet-admin-views"

Usage

Landing layout

<x-jet-admin::landing-layout>
    Your own content goes here...
</x-jet-admin::landing-layout>

Dashboard ayout

<x-jet-admin::dashboard-layout>
    Your dashboard content goes here...
</x-jet-admin::dashboard-layout>

{{-- OR --}}

<x-jet-admin::second-dashboard-layout>
    Your dashboard content goes here...
</x-jet-admin::second-dashboard-layout>

Testing

composer test

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

License

The MIT License (MIT). Please see License File for more information.

ivanaquino / jet-admin

Maintainers

Details