OmniBoard/resources/js/Layouts/AuthenticatedLayout.vue

<script setup>
import { ref } from 'vue';
import ApplicationLogo from '@/Components/ApplicationLogo.vue';
import Dropdown from '@/Components/Dropdown.vue';
import DropdownLink from '@/Components/DropdownLink.vue';
import { Link } from '@inertiajs/vue3';
import SetQueueNameForm from '@/Components/SetQueueNameForm.vue';
import SetQueueSectorForm from '@/Components/SetQueueSectorForm.vue';

const showingSidebar = ref(false);

const menuItems = [
    { name: 'Dashboard', route: 'dashboard', icon: 'M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z' },
    { name: 'Monitoramento', route: '#', icon: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z' },
    { name: 'Filas', route: '#', icon: 'M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10' },
    { name: 'Agentes', route: '#', icon: 'M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z' },
];
</script>

<template>
    <div class="flex h-screen bg-gray-50 overflow-hidden font-sans text-gray-800">

        <aside :class="showingSidebar ? 'translate-x-0 ease-out' : '-translate-x-full ease-in'"
            class="fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-lg md:shadow-none border-r border-gray-200 transform transition-transform duration-300 md:relative md:translate-x-0">

            <div class="flex items-center justify-center h-20 bg-white border-b border-gray-100">
                <Link :href="route('dashboard')" class="flex items-center space-x-2 group">
                    <div class="flex flex-col items-center">
                        <span class="text-2xl font-bold tracking-wide">
                            <span class="text-ingline-800">Ing</span>
                            <span class="text-ingline-500">line</span>
                        </span>
                        <span
                            class="text-[10px] uppercase tracking-[0.2em] text-ingline-black font-semibold">Systems</span>
                    </div>
                </Link>
            </div>

            <nav class="mt-6 px-3 space-y-1">
                <Link v-for="item in menuItems" :key="item.name" :href="item.route === '#' ? '#' : route(item.route)"
                    class="group flex items-center px-4 py-3 text-sm font-medium rounded-lg transition-all duration-200"
                    :class="item.active || route().current(item.route)
                        ? 'bg-ingline-500 text-white shadow-md shadow-blue-200'
                        : 'text-gray-600 hover:bg-gray-50 hover:text-ingline-600'">

                    <svg class="mr-3 flex-shrink-0 h-5 w-5 transition-colors duration-200"
                        :class="item.active || route().current(item.route) ? 'text-white' : 'text-gray-400 group-hover:text-ingline-500'"
                        xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="item.icon" />
                    </svg>
                    {{ item.name }}
                </Link>
            </nav>

            <div class="absolute bottom-0 w-full p-4 bg-white border-t border-gray-100">
                <div class="flex items-center space-x-3">
                    <div
                        class="h-9 w-9 rounded-full bg-ingline-50 flex items-center justify-center text-ingline-600 font-bold border border-ingline-100">
                        {{ $page.props.auth.user.name.charAt(0) }}
                    </div>
                    <div>
                        <p class="text-sm font-bold text-gray-800">{{ $page.props.auth.user.name }}</p>
                        <div class="flex items-center">
                            <div class="h-1.5 w-1.5 rounded-full bg-green-500 mr-1.5"></div>
                            <p class="text-xs text-gray-500">Conectado</p>
                        </div>
                    </div>
                </div>
            </div>
        </aside>

        <div class="flex-1 flex flex-col overflow-hidden bg-gray-50">

            <header
                class="bg-white shadow-sm h-16 flex items-center justify-between px-8 z-10 border-b border-gray-100">

                <button @click="showingSidebar = !showingSidebar"
                    class="md:hidden text-gray-500 hover:text-ingline-500 focus:outline-none">
                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M4 6h16M4 12h16M4 18h16" />
                    </svg>
                </button>

                <div class="flex-1 ml-4 md:ml-0">
                    <slot name="header" />
                </div>

                <div class="flex items-center space-x-4">
                    <button
                        class="relative p-2 text-gray-400 hover:text-ingline-500 transition-colors rounded-full hover:bg-gray-50">
                        <span
                            class="absolute top-1.5 right-1.5 h-2 w-2 rounded-full bg-red-500 border-2 border-white"></span>
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9">
                            </path>
                        </svg>
                    </button>

                    <div class="relative">
                        <Dropdown align="right" width="48">
                            <template #trigger>
                                <button type="button"
                                    class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-600 bg-white hover:text-ingline-600 focus:outline-none transition ease-in-out duration-150">
                                    Opções
                                    <svg class="ml-2 -mr-0.5 h-4 w-4" xmlns="http://www.w3.org/2000/svg"
                                        viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd"
                                            d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                                            clip-rule="evenodd" />
                                    </svg>
                                </button>
                            </template>
                            <template #content>

                                <DropdownLink :href="route('profile.edit')"> Perfil </DropdownLink>
                                <SetQueueNameForm />
                                <SetQueueSectorForm />
                                <div class="border-t border-gray-100 my-1"></div>
                                <DropdownLink :href="route('logout')" method="post" as="button"> Sair </DropdownLink>

                            </template>
                        </Dropdown>
                    </div>
                </div>
            </header>



            <main class="flex-1 overflow-x-hidden overflow-y-auto">
                <div class="container mx-auto px-6 py-8">
                    <slot />
                </div>
            </main>
        </div>

        <div v-if="showingSidebar" @click="showingSidebar = false"
            class="fixed inset-0 z-40 bg-gray-900 opacity-20 md:hidden">
        </div>
    </div>
</template>