From bbb0eb8f6c1a341a47a8cc4c35d443ce405c10ff Mon Sep 17 00:00:00 2001
From: EwelinaLasowy <ewelina.lasowy@blumilk.pl>
Date: Thu, 27 Jan 2022 11:05:50 +0100
Subject: [PATCH] change layout

---
 resources/js/Pages/Dashboard.vue         |  98 ++++-
 resources/js/Shared/Layout.vue           |  19 -
 resources/js/Shared/Layout/AppLayout.vue |   8 +-
 resources/js/Shared/MainMenu.vue         | 451 ++++++++++++-----------
 4 files changed, 346 insertions(+), 230 deletions(-)
 delete mode 100644 resources/js/Shared/Layout.vue

diff --git a/resources/js/Pages/Dashboard.vue b/resources/js/Pages/Dashboard.vue
index 4eb47d9..4fab9a5 100644
--- a/resources/js/Pages/Dashboard.vue
+++ b/resources/js/Pages/Dashboard.vue
@@ -37,7 +37,7 @@
                             <div class="mt-5 flex justify-center sm:mt-0">
                                 <InertiaLink
                                     href="#"
-                                    class="flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+                                    class="inline-flex items-center px-4 py-3 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
                                 >
                                     View profile
                                 </InertiaLink>
@@ -370,4 +370,98 @@ export default {
         };
     },
 };
-</script>
\ No newline at end of file
+</script>
+
+
+<!--<script>-->
+<!--import { ref } from 'vue';-->
+<!--import {-->
+<!--    Dialog,-->
+<!--    DialogOverlay,-->
+<!--    Menu,-->
+<!--    MenuButton,-->
+<!--    MenuItem,-->
+<!--    MenuItems,-->
+<!--    TransitionChild,-->
+<!--    TransitionRoot,-->
+<!--} from '@headlessui/vue';-->
+<!--import {-->
+<!--    BellIcon,-->
+<!--    ClockIcon,-->
+<!--    CogIcon,-->
+<!--    CreditCardIcon,-->
+<!--    DocumentReportIcon,-->
+<!--    HomeIcon,-->
+<!--    MenuAlt1Icon,-->
+<!--    QuestionMarkCircleIcon,-->
+<!--    ScaleIcon,-->
+<!--    ShieldCheckIcon,-->
+<!--    UserGroupIcon,-->
+<!--    XIcon,-->
+<!--} from '@heroicons/vue/outline';-->
+<!--import {-->
+<!--    CalendarIcon,-->
+<!--    CashIcon,-->
+<!--    CheckCircleIcon,-->
+<!--    ChevronDownIcon,-->
+<!--    ChevronRightIcon,-->
+<!--    OfficeBuildingIcon,-->
+<!--    SearchIcon, SunIcon,-->
+<!--} from '@heroicons/vue/solid';-->
+
+<!--const cards = [-->
+<!--    { name: 'Account balance', href: '#', icon: ScaleIcon, amount: '$30,659.45' },-->
+<!--];-->
+<!--const transactions = [-->
+<!--    {-->
+<!--        id: 1,-->
+<!--        name: 'Payment to Molly Sanders',-->
+<!--        href: '#',-->
+<!--        amount: '$20,000',-->
+<!--        currency: 'USD',-->
+<!--        status: 'success',-->
+<!--        date: 'July 11, 2020',-->
+<!--        datetime: '2020-07-11',-->
+<!--    },-->
+<!--];-->
+<!--const statusStyles = {-->
+<!--    success: 'bg-green-100 text-green-800',-->
+<!--    processing: 'bg-yellow-100 text-yellow-800',-->
+<!--    failed: 'bg-gray-100 text-gray-800',-->
+<!--};-->
+
+<!--export default {-->
+<!--    components: {-->
+<!--        Dialog,-->
+<!--        DialogOverlay,-->
+<!--        Menu,-->
+<!--        MenuButton,-->
+<!--        MenuItem,-->
+<!--        MenuItems,-->
+<!--        TransitionChild,-->
+<!--        TransitionRoot,-->
+<!--        BellIcon,-->
+<!--        CashIcon,-->
+<!--        CheckCircleIcon,-->
+<!--        ChevronDownIcon,-->
+<!--        ChevronRightIcon,-->
+<!--        MenuAlt1Icon,-->
+<!--        OfficeBuildingIcon,-->
+<!--        SearchIcon,-->
+<!--        XIcon,-->
+<!--        HomeIcon,-->
+<!--        UserGroupIcon,-->
+<!--        SunIcon,-->
+<!--        CalendarIcon,-->
+<!--    },-->
+<!--    setup() {-->
+<!--        const sidebarOpen = ref(false);-->
+<!--        return {-->
+<!--            cards,-->
+<!--            transactions,-->
+<!--            statusStyles,-->
+<!--            sidebarOpen,-->
+<!--        };-->
+<!--    },-->
+<!--};-->
+<!--</script>-->
\ No newline at end of file
diff --git a/resources/js/Shared/Layout.vue b/resources/js/Shared/Layout.vue
deleted file mode 100644
index 55883ac..0000000
--- a/resources/js/Shared/Layout.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-    <div class="min-h-full">
-        <MainMenu />
-        <main class="-mt-24 pb-8">
-            <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:max-w-7xl lg:px-8">
-                <slot />
-            </div>
-        </main>
-    </div>
-</template>
-
-<script>
-import MainMenu from '@/Shared/MainMenu';
-
-export default {
-    name: 'Layout',
-    components: {MainMenu},
-};
-</script>
diff --git a/resources/js/Shared/Layout/AppLayout.vue b/resources/js/Shared/Layout/AppLayout.vue
index ea11dfa..71cdcaa 100644
--- a/resources/js/Shared/Layout/AppLayout.vue
+++ b/resources/js/Shared/Layout/AppLayout.vue
@@ -1,9 +1,11 @@
 <template>
     <div class="min-h-full">
         <MainMenu />
-        <main class="-mt-24 pb-8">
-            <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:max-w-7xl lg:px-8">
-                <slot />
+        <main class="lg:ml-64 flex flex-col flex-1 py-8">
+            <div>
+                <div class="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8 lg:max-w-7xl">
+                    <slot />
+                </div>
             </div>
         </main>
     </div>
diff --git a/resources/js/Shared/MainMenu.vue b/resources/js/Shared/MainMenu.vue
index ac465eb..d446ab4 100644
--- a/resources/js/Shared/MainMenu.vue
+++ b/resources/js/Shared/MainMenu.vue
@@ -1,31 +1,191 @@
 <template>
-    <Popover
-        v-slot="{ open }"
-        as="header"
-        class="pb-24 bg-gradient-to-r from-blumilk-500 to-blumilk-600"
+    <TransitionRoot
+        as="template"
+        :show="sidebarOpen"
     >
-        <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:max-w-7xl lg:px-8">
-            <div class="relative flex flex-wrap items-center justify-center lg:justify-between">
-                <!-- Logo -->
-                <div class="absolute left-0 py-5 flex-shrink-0 lg:static">
-                    <InertiaLink href="/">
-                        <img
-                            class="h-8 w-auto"
-                            src="/img/logo-white.png"
-                            alt="Workflow"
-                        >
-                    </InertiaLink>
+        <Dialog
+            as="div"
+            class="fixed inset-0 flex z-40 lg:hidden"
+            @close="sidebarOpen = false"
+        >
+            <TransitionChild
+                as="template"
+                enter="transition-opacity ease-linear duration-300"
+                enter-from="opacity-0"
+                enter-to="opacity-100"
+                leave="transition-opacity ease-linear duration-300"
+                leave-from="opacity-100"
+                leave-to="opacity-0"
+            >
+                <DialogOverlay class="fixed inset-0 bg-gray-600 bg-opacity-75" />
+            </TransitionChild>
+            <TransitionChild
+                as="template"
+                enter="transition ease-in-out duration-300 transform"
+                enter-from="-translate-x-full"
+                enter-to="translate-x-0"
+                leave="transition ease-in-out duration-300 transform"
+                leave-from="translate-x-0"
+                leave-to="-translate-x-full"
+            >
+                <div class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-blumilk-700">
+                    <TransitionChild
+                        as="template"
+                        enter="ease-in-out duration-300"
+                        enter-from="opacity-0"
+                        enter-to="opacity-100"
+                        leave="ease-in-out duration-300"
+                        leave-from="opacity-100"
+                        leave-to="opacity-0"
+                    >
+                        <div class="absolute top-0 right-0 -mr-12 pt-2">
+                            <button
+                                type="button"
+                                class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
+                                @click="sidebarOpen = false"
+                            >
+                                <span class="sr-only">Close sidebar</span>
+                                <XIcon
+                                    class="h-6 w-6 text-white"
+                                    aria-hidden="true"
+                                />
+                            </button>
+                        </div>
+                    </TransitionChild>
+                    <div class="flex-shrink-0 flex items-center px-4">
+                        <InertiaLink href="/">
+                            <img
+                                class="h-8 w-auto"
+                                src="/img/logo-white.png"
+                                alt="Workflow"
+                            >
+                        </InertiaLink>
+                    </div>
+                    <nav
+                        class="mt-5 flex-shrink-0 h-full divide-y divide-blumilk-800 overflow-y-auto"
+                        aria-label="Sidebar"
+                    >
+                        <div class="px-2 space-y-1">
+                            <a
+                                v-for="item in navigation"
+                                :key="item.name"
+                                :href="item.href"
+                                :class="[item.current ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center px-2 py-2 text-base font-medium rounded-md']"
+                                :aria-current="item.current ? 'page' : undefined"
+                            >
+                                <component
+                                    :is="item.icon"
+                                    class="mr-4 flex-shrink-0 h-6 w-6 text-blumilk-200"
+                                    aria-hidden="true"
+                                />
+                                {{ item.name }}
+                            </a>
+                        </div>
+                        <div class="mt-6 pt-6">
+                            <div class="px-2 space-y-1">
+                                <a
+                                    v-for="item in secondaryNavigation"
+                                    :key="item.name"
+                                    :href="item.href"
+                                    class="group flex items-center px-2 py-2 text-base font-medium rounded-md text-blumilk-100 hover:text-white hover:bg-blumilk-600"
+                                >
+                                    <component
+                                        :is="item.icon"
+                                        class="mr-4 h-6 w-6 text-blumilk-200"
+                                        aria-hidden="true"
+                                    />
+                                    {{ item.name }}
+                                </a>
+                            </div>
+                        </div>
+                    </nav>
                 </div>
+            </TransitionChild>
+            <div
+                class="flex-shrink-0 w-14"
+                aria-hidden="true"
+            >
+                <!-- Dummy element to force sidebar to shrink to fit close icon -->
+            </div>
+        </Dialog>
+    </TransitionRoot>
 
-                <!-- Right section on desktop -->
-                <div class="hidden lg:ml-4 lg:flex lg:items-center lg:py-5 lg:pr-0.5">
-                    <div class="mr-4">
+    <!-- Static sidebar for desktop -->
+    <div class="hidden lg:flex lg:w-64 lg:flex-col lg:fixed lg:inset-y-0">
+        <!-- Sidebar component, swap this element with another sidebar if you like -->
+        <div class="flex flex-col flex-grow bg-blumilk-700 pt-5 pb-4 overflow-y-auto">
+            <div class="flex items-center flex-shrink-0 px-4">
+                <InertiaLink href="/">
+                    <img
+                        class="h-8 w-auto"
+                        src="/img/logo-white.png"
+                        alt="Workflow"
+                    >
+                </InertiaLink>
+            </div>
+            <nav
+                class="mt-5 flex-1 flex flex-col divide-y divide-blumilk-800 overflow-y-auto"
+                aria-label="Sidebar"
+            >
+                <div class="px-2 space-y-1">
+                    <a
+                        v-for="item in navigation"
+                        :key="item.name"
+                        :href="item.href"
+                        :class="[item.current ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center px-2 py-2 text-sm leading-6 font-medium rounded-md']"
+                        :aria-current="item.current ? 'page' : undefined"
+                    >
+                        <component
+                            :is="item.icon"
+                            class="mr-4 flex-shrink-0 h-6 w-6 text-blumilk-200"
+                            aria-hidden="true"
+                        />
+                        {{ item.name }}
+                    </a>
+                </div>
+                <div class="mt-6 pt-6">
+                    <div class="px-2 space-y-1">
+                        <a
+                            v-for="item in secondaryNavigation"
+                            :key="item.name"
+                            :href="item.href"
+                            class="group flex items-center px-2 py-2 text-sm leading-6 font-medium rounded-md text-blumilk-100 hover:text-white hover:bg-blumilk-600"
+                        >
+                            <component
+                                :is="item.icon"
+                                class="mr-4 h-6 w-6 text-blumilk-200"
+                                aria-hidden="true"
+                            />
+                            {{ item.name }}
+                        </a>
+                    </div>
+                </div>
+            </nav>
+        </div>
+    </div>
+
+    <div class="lg:pl-64 flex flex-col flex-1">
+        <div class="relative z-10 flex-shrink-0 flex h-16 bg-white border-b border-gray-200">
+            <button
+                type="button"
+                class="px-4 border-r border-gray-200 text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blumilk-500 lg:hidden"
+                @click="sidebarOpen = true"
+            >
+                <span class="sr-only">Open sidebar</span>
+                <MenuAlt1Icon
+                    class="h-6 w-6"
+                    aria-hidden="true"
+                />
+            </button>
+            <div class="flex-1 px-4 flex justify-between sm:px-6 lg:max-w-7xl lg:mx-auto lg:px-8">
+                <div class="flex items-center">
+                    <div>
                         <Menu
                             as="div"
                             class="relative inline-block text-left"
                         >
                             <div>
-                                <MenuButton class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-1 focus:ring-gray-300">
+                                <MenuButton class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500">
                                     {{ years.current }}
                                     <ChevronDownIcon class="-mr-1 ml-2 h-5 w-5" />
                                 </MenuButton>
@@ -65,10 +225,11 @@
                             </transition>
                         </Menu>
                     </div>
-
+                </div>
+                <div class="ml-4 flex items-center md:ml-6">
                     <button
                         type="button"
-                        class="flex-shrink-0 p-1 text-cyan-200 rounded-full hover:text-white hover:bg-white hover:bg-opacity-10 focus:outline-none focus:ring-2 focus:ring-white"
+                        class="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
                     >
                         <span class="sr-only">View notifications</span>
                         <BellIcon
@@ -80,30 +241,31 @@
                     <!-- Profile dropdown -->
                     <Menu
                         as="div"
-                        class="ml-4 relative flex-shrink-0"
+                        class="ml-3 relative"
                     >
                         <div>
-                            <MenuButton
-                                class="rounded-full flex text-sm ring-2 ring-white ring-opacity-20 focus:outline-none focus:ring-opacity-100"
-                                dusk="user-menu"
-                            >
-                                <span class="sr-only">{{ user.avatar }}</span>
+                            <MenuButton class="max-w-xs bg-white rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500 lg:p-2 lg:rounded-md lg:hover:bg-gray-50">
                                 <img
                                     class="h-8 w-8 rounded-full"
                                     :src="user.avatar"
-                                    alt=""
+                                    alt="Avatar"
                                 >
+                                <span class="hidden ml-3 text-gray-700 text-sm font-medium lg:block"><span class="sr-only">Open user menu for </span>{{ user.name }}</span>
+                                <ChevronDownIcon
+                                    class="hidden flex-shrink-0 ml-1 h-5 w-5 text-gray-400 lg:block"
+                                    aria-hidden="true"
+                                />
                             </MenuButton>
                         </div>
                         <transition
+                            enter-active-class="transition ease-out duration-100"
+                            enter-from-class="transform opacity-0 scale-95"
+                            enter-to-class="transform opacity-100 scale-100"
                             leave-active-class="transition ease-in duration-75"
                             leave-from-class="transform opacity-100 scale-100"
                             leave-to-class="transform opacity-0 scale-95"
                         >
-                            <MenuItems
-                                class="origin-top-right z-40 absolute -right-2 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
-                                dusk="user-menu-list"
-                            >
+                            <MenuItems class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
                                 <MenuItem
                                     v-for="item in userNavigation"
                                     :key="item.name"
@@ -122,222 +284,99 @@
                         </transition>
                     </Menu>
                 </div>
-
-                <div class="w-full py-5 lg:border-t lg:border-white lg:border-opacity-20">
-                    <div class="lg:items-center">
-                        <div class="hidden lg:block">
-                            <nav class="flex space-x-4">
-                                <InertiaLink
-                                    v-for="item in navigation"
-                                    :key="item.name"
-                                    :href="item.href"
-                                    :class="[item.current ? 'text-white' : 'text-cyan-100', 'text-sm font-medium rounded-md bg-white bg-opacity-0 px-3 py-2 hover:bg-opacity-10']"
-                                    :aria-current="item.current ? 'page' : undefined"
-                                >
-                                    {{ item.name }}
-                                </InertiaLink>
-                            </nav>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Menu button -->
-                <div class="absolute right-0 flex-shrink-0 lg:hidden">
-                    <!-- Mobile menu button -->
-                    <PopoverButton
-                        class="bg-transparent p-2 rounded-md inline-flex items-center justify-center text-cyan-200 hover:text-white hover:bg-white hover:bg-opacity-10 focus:outline-none focus:ring-2 focus:ring-white"
-                    >
-                        <span class="sr-only">Open main menu</span>
-                        <MenuIcon
-                            v-if="!open"
-                            class="block h-6 w-6"
-                            aria-hidden="true"
-                        />
-                        <XIcon
-                            v-else
-                            class="block h-6 w-6"
-                            aria-hidden="true"
-                        />
-                    </PopoverButton>
-                </div>
             </div>
         </div>
-
-        <TransitionRoot
-            as="template"
-            :show="open"
-        >
-            <div class="lg:hidden">
-                <TransitionChild
-                    as="template"
-                    enter="duration-150 ease-out"
-                    enter-from="opacity-0"
-                    enter-to="opacity-100"
-                    leave="duration-150 ease-in"
-                    leave-from="opacity-100"
-                    leave-to="opacity-0"
-                >
-                    <PopoverOverlay class="z-20 fixed inset-0 bg-black bg-opacity-25" />
-                </TransitionChild>
-
-                <TransitionChild
-                    as="template"
-                    enter="duration-150 ease-out"
-                    enter-from="opacity-0 scale-95"
-                    enter-to="opacity-100 scale-100"
-                    leave="duration-150 ease-in"
-                    leave-from="opacity-100 scale-100"
-                    leave-to="opacity-0 scale-95"
-                >
-                    <PopoverPanel
-                        focus
-                        class="z-30 absolute top-0 inset-x-0 max-w-3xl mx-auto w-full p-2 transition transform origin-top"
-                    >
-                        <div
-                            class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 bg-white divide-y divide-gray-200"
-                        >
-                            <div class="pt-3 pb-2">
-                                <div class="flex items-center justify-between px-4">
-                                    <div>
-                                        <img
-                                            class="h-8 w-auto"
-                                            src="/img/logo-white.png"
-                                            alt="Workflow"
-                                        >
-                                    </div>
-                                    <div class="-mr-2">
-                                        <PopoverButton
-                                            class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-cyan-500"
-                                        >
-                                            <span class="sr-only">Close menu</span>
-                                            <XIcon
-                                                class="h-6 w-6"
-                                                aria-hidden="true"
-                                            />
-                                        </PopoverButton>
-                                    </div>
-                                </div>
-                                <div class="mt-3 px-2 space-y-1">
-                                    <InertiaLink
-                                        v-for="item in navigation"
-                                        :key="item.name"
-                                        :href="item.href"
-                                        class="block rounded-md px-3 py-2 text-base text-gray-900 font-medium hover:bg-gray-100 hover:text-gray-800"
-                                    >
-                                        {{ item.name }}
-                                    </InertiaLink>
-                                </div>
-                            </div>
-                            <div class="pt-4 pb-2">
-                                <div class="flex items-center px-5">
-                                    <div class="flex-shrink-0">
-                                        <img
-                                            class="h-10 w-10 rounded-full"
-                                            :src="user.avatar"
-                                            alt=""
-                                        >
-                                    </div>
-                                    <div class="ml-3 min-w-0 flex-1">
-                                        <div class="text-base font-medium text-gray-800 truncate">
-                                            {{ user.name }}
-                                        </div>
-                                        <div class="text-sm font-medium text-gray-500 truncate">
-                                            {{ user.email }}
-                                        </div>
-                                    </div>
-                                    <button
-                                        type="button"
-                                        class="ml-auto flex-shrink-0 bg-white p-1 text-gray-400 rounded-full hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500"
-                                    >
-                                        <span class="sr-only">View notifications</span>
-                                        <BellIcon
-                                            class="h-6 w-6"
-                                            aria-hidden="true"
-                                        />
-                                    </button>
-                                </div>
-                                <div class="mt-3 px-2 space-y-1">
-                                    <InertiaLink
-                                        v-for="item in userNavigation"
-                                        :key="item.name"
-                                        :method="item.method"
-                                        :as="item.as"
-                                        :href="item.href"
-                                        class="block w-full text-left rounded-md px-3 py-2 text-base text-gray-900 font-medium hover:bg-gray-100 hover:text-gray-800"
-                                    >
-                                        {{ item.name }}
-                                    </InertiaLink>
-                                </div>
-                            </div>
-                        </div>
-                    </PopoverPanel>
-                </TransitionChild>
-            </div>
-        </TransitionRoot>
-    </Popover>
+    </div>
 </template>
 
 <script>
+import { ref } from 'vue';
 import {
+    Dialog,
+    DialogOverlay,
     Menu,
     MenuButton,
     MenuItem,
     MenuItems,
-    Popover,
-    PopoverButton,
-    PopoverOverlay,
-    PopoverPanel,
     TransitionChild,
     TransitionRoot,
 } from '@headlessui/vue';
-import {BellIcon, MenuIcon, XIcon} from '@heroicons/vue/outline';
+import {
+    BellIcon,
+    CogIcon,
+    HomeIcon,
+    MenuAlt1Icon,
+    QuestionMarkCircleIcon,
+    ShieldCheckIcon,
+    UserGroupIcon,
+    XIcon,
+    SunIcon,
+    CalendarIcon,
+} from '@heroicons/vue/outline';
+import {
+    CashIcon,
+    CheckCircleIcon,
+    ChevronDownIcon,
+    ChevronRightIcon,
+    OfficeBuildingIcon,
+    SearchIcon,
+} from '@heroicons/vue/solid';
 import {computed} from 'vue';
 import {usePage} from '@inertiajs/inertia-vue3';
-import {ChevronDownIcon, CheckIcon} from '@heroicons/vue/solid';
+
+const secondaryNavigation = [
+    { name: 'Settings', href: '#', icon: CogIcon },
+    { name: 'Help', href: '#', icon: QuestionMarkCircleIcon },
+    { name: 'Privacy', href: '#', icon: ShieldCheckIcon },
+];
 
 export default {
-    name: 'MainMenu',
     components: {
+        Dialog,
+        DialogOverlay,
         Menu,
         MenuButton,
         MenuItem,
         MenuItems,
-        Popover,
-        PopoverButton,
-        PopoverOverlay,
-        PopoverPanel,
         TransitionChild,
         TransitionRoot,
         BellIcon,
-        MenuIcon,
-        XIcon,
+        CashIcon,
+        CheckCircleIcon,
         ChevronDownIcon,
-        CheckIcon,
+        ChevronRightIcon,
+        MenuAlt1Icon,
+        OfficeBuildingIcon,
+        SearchIcon,
+        XIcon,
+        HomeIcon,
+        UserGroupIcon,
+        SunIcon,
+        CalendarIcon,
     },
     setup() {
+        const sidebarOpen = ref(false);
         const user = computed(() => usePage().props.value.auth.user);
         const years = computed(() => usePage().props.value.years);
-
         const navigation = [
-            {name: 'Strona główna', href: '/', current: true},
-            {name: 'Użytkownicy', href: '/users', current: false},
-            {name: 'Dostępne urlopy', href: '/vacation-limits', current: false},
-            {name: 'Dni wolne', href: '/holidays', current: false},
+            {name: 'Strona główna', href: '/', icon: HomeIcon, current: true},
+            {name: 'Użytkownicy', href: '/users', icon: UserGroupIcon, current: false},
+            {name: 'Dostępne urlopy', href: '/vacation-limits', icon: SunIcon, current: false},
+            {name: 'Dni wolne', href: '/holidays', icon: CalendarIcon, current: false},
         ];
         const userNavigation = [
             {name: 'Your Profile', href: '#'},
             {name: 'Settings', href: '#'},
             {name: 'Wyloguj się', href: '/logout', method: 'post', as: 'button'},
         ];
-
         return {
             user,
             years,
             navigation,
+            secondaryNavigation,
             userNavigation,
+            sidebarOpen,
         };
     },
 };
-
-</script>
-
+</script>
\ No newline at end of file