Handle menu isVisible false

code16 · Oct 12, 2023 · 00f65f5 · 00f65f5
1 parent 5090e3e
commit 00f65f5
Show file tree

Hide file tree

Showing 11 changed files with 90 additions and 62 deletions.
diff --git a/resources/js/Layouts/Layout.vue b/resources/js/Layouts/Layout.vue
@@ -18,55 +18,65 @@ import { ChevronDownIcon, MagnifyingGlassIcon } from '@heroicons/vue/20/solid'
 import Notifications from "@/components/Notifications.vue";
 import { useDialogs } from "@/utils/dialogs";
 import { Modal } from '@sharp/ui';
-
+import useMenu from "@/composables/useMenu";
+import { config } from "@/utils/config";
+import Logo from "@/components/Logo.vue";
 
 const sidebarOpen = ref(false);
-const { dialogs } = useDialogs();
+const dialogs = useDialogs();
+const menu = useMenu();
 </script>
 
 
 <template>
     <div>
-        <TransitionRoot as="template" :show="sidebarOpen">
-            <Dialog as="div" class="relative z-50 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">
-                    <div class="fixed inset-0 bg-gray-900/80" />
-                </TransitionChild>
-
-                <div class="fixed inset-0 flex">
-                    <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">
-                        <DialogPanel class="relative mr-16 flex w-full max-w-xs flex-1">
-                            <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 left-full top-0 flex w-16 justify-center pt-5">
-                                    <button type="button" class="-m-2.5 p-2.5" @click="sidebarOpen = false">
-                                        <span class="sr-only">Close sidebar</span>
-                                        <XMarkIcon class="h-6 w-6 text-white" aria-hidden="true" />
-                                    </button>
-                                </div>
-                            </TransitionChild>
-                            <!-- Sidebar component, swap this element with another sidebar if you like -->
-                            <LeftNav />
-                        </DialogPanel>
+        <template v-if="menu.isVisible">
+            <TransitionRoot as="template" :show="sidebarOpen">
+                <Dialog as="div" class="relative z-50 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">
+                        <div class="fixed inset-0 bg-gray-900/80" />
                     </TransitionChild>
-                </div>
-            </Dialog>
-        </TransitionRoot>
 
-        <!-- Static sidebar for desktop -->
-        <div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
-            <!-- Sidebar component, swap this element with another sidebar if you like -->
-            <LeftNav />
-        </div>
+                    <div class="fixed inset-0 flex">
+                        <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">
+                            <DialogPanel class="relative mr-16 flex w-full max-w-xs flex-1">
+                                <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 left-full top-0 flex w-16 justify-center pt-5">
+                                        <button type="button" class="-m-2.5 p-2.5" @click="sidebarOpen = false">
+                                            <span class="sr-only">Close sidebar</span>
+                                            <XMarkIcon class="h-6 w-6 text-white" aria-hidden="true" />
+                                        </button>
+                                    </div>
+                                </TransitionChild>
+                                <!-- Sidebar component, swap this element with another sidebar if you like -->
+                                <LeftNav />
+                            </DialogPanel>
+                        </TransitionChild>
+                    </div>
+                </Dialog>
+            </TransitionRoot>
 
-        <div class="lg:pl-72">
+            <!-- Static sidebar for desktop -->
+            <div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
+                <!-- Sidebar component, swap this element with another sidebar if you like -->
+                <LeftNav />
+            </div>
+        </template>
+
+        <div :class="{ 'lg:pl-72': menu.isVisible }">
             <div class="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 bg-primary-600 px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:px-8">
-                <button type="button" class="-m-2.5 p-2.5 text-gray-700 lg:hidden" @click="sidebarOpen = true">
-                    <span class="sr-only">Open sidebar</span>
-                    <Bars3Icon class="h-6 w-6" aria-hidden="true" />
-                </button>
+                <template v-if="menu.isVisible">
+                    <button type="button" class="-m-2.5 p-2.5 text-gray-700 lg:hidden" @click="sidebarOpen = true">
+                        <span class="sr-only">Open sidebar</span>
+                        <Bars3Icon class="h-6 w-6" aria-hidden="true" />
+                    </button>
 
-                <!-- Separator -->
-                <div class="h-6 w-px bg-gray-900/10 lg:hidden" aria-hidden="true" />
+                    <!-- Separator -->
+                    <div class="h-6 w-px bg-gray-900/10 lg:hidden" aria-hidden="true" />
+                </template>
+                <template v-else>
+                    <Logo />
+                </template>
 
                 <div class="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
                     <div class="flex-1"></div>
@@ -76,11 +86,6 @@ const { dialogs } = useDialogs();
                             <MagnifyingGlassIcon class="h-6 w-6" aria-hidden="true" />
                         </button>
 
-                        <button type="button" class="-m-2.5 p-2.5 text-gray-400 hover:text-gray-500">
-                            <span class="sr-only">View notifications</span>
-                            <BellIcon class="h-6 w-6" aria-hidden="true" />
-                        </button>
-
                         <!-- Separator -->
                         <div class="hidden lg:block lg:h-6 lg:w-px lg:bg-gray-900/10" aria-hidden="true" />
 

diff --git a/resources/js/Pages/Dashboard/Dashboard.vue b/resources/js/Pages/Dashboard/Dashboard.vue
@@ -3,7 +3,7 @@
     import { useFilters } from "@sharp/filters";
     import { parseQuery, stringifyQuery } from "@/utils/querystring";
     import { router } from "@inertiajs/vue3";
-    import { Grid, SectionTitle, } from '@sharp/ui';
+    import { SectionTitle, } from '@sharp/ui';
     import Widget from "@sharp/dashboard/src/components/Widget.vue";
     import Layout from "@/Layouts/Layout.vue";
     import { SharpFilter } from '@sharp/filters';
@@ -44,7 +44,8 @@
             query: {
                 ...filters.getQueryParams(filters.values),
                 ...parseQuery(location.search),
-            }
+            },
+            entityKey: dashboardKey,
         });
     }
 </script>
@@ -54,7 +55,7 @@
         <Title :entity-key="route().params.dashboardKey" />
 
         <WithCommands :commands="commands">
-            <div class="container">
+            <div class="container mx-auto">
                 <div class="my-4">
                     <div class="row gx-3">
                         <div class="col">
@@ -150,12 +151,18 @@
                                 </template>
                             </div>
 
-                            <Grid :rows="section.rows" row-class="g-3" v-slot="{ itemLayout: widgetLayout }">
-                                <Widget
-                                    :widget="dashboard.widgets[widgetLayout.key]"
-                                    :value="dashboard.data[widgetLayout.key]"
-                                />
-                            </Grid>
+                            <div class="grid grid-cols-12 gap-4">
+                                <template v-for="row in section.rows">
+                                    <template v-for="widgetLayout in row">
+                                        <div class="col-[span_var(--size)]" :style="{ '--size': widgetLayout.size }">
+                                            <Widget
+                                                :widget="dashboard.widgets[widgetLayout.key]"
+                                                :value="dashboard.data[widgetLayout.key]"
+                                            />
+                                        </div>
+                                    </template>
+                                </template>
+                            </div>
                         </div>
                     </template>
                 </div>

diff --git a/resources/js/Pages/Form/Form.vue b/resources/js/Pages/Form/Form.vue
@@ -53,7 +53,7 @@
     <Layout>
         <Title :breadcrumb="breadcrumb" />
 
-        <div class="container">
+        <div class="container mx-auto">
             <FormComponent
                 :form="form"
                 :entity-key="entityKey"

diff --git a/resources/js/Pages/Show/Show.vue b/resources/js/Pages/Show/Show.vue
@@ -76,7 +76,7 @@
         <Title :breadcrumb="breadcrumb" />
 
         <WithCommands :commands="commands">
-            <div class="container">
+            <div class="container mx-auto">
                 <div class="action-bar mt-4 mb-3">
                     <div class="row align-items-center gx-3">
                         <div class="col">

diff --git a/resources/js/components/LeftNav.vue b/resources/js/components/LeftNav.vue
@@ -6,21 +6,17 @@ import { ChevronRightIcon } from '@heroicons/vue/20/solid';
 import { GlobalFiltersData, MenuData } from "@/types";
 import { Link } from "@inertiajs/vue3";
 import { GlobalFilters } from '@sharp/filters';
+import Logo from "@/components/Logo.vue";
 
 const menu = usePage().props.menu as MenuData;
 const globalFilters = usePage().props.globalFilters as GlobalFiltersData | null;
 </script>
 
 <template>
     <!-- Sidebar component, swap this element with another sidebar if you like -->
-    <div class="flex grow flex-col  overflow-y-auto bg-white pb-4">
+    <div class="flex grow flex-col overflow-y-auto bg-white pb-4">
         <div class="flex h-16 shrink-0 items-center bg-primary-600 px-6 py-2.5">
-            <template v-if="config('sharp.theme.logo_urls.menu')">
-                <img class="h-auto w-auto max-w-full max-h-full" :src="config('sharp.theme.logo_urls.menu')" :alt="config('sharp.name')" />
-            </template>
-            <template v-else>
-                {{ config('sharp.name') }}
-            </template>
+            <Logo />
         </div>
         <template v-if="globalFilters">
             <GlobalFilters :global-filters="globalFilters" />

diff --git a/resources/js/components/Logo.vue b/resources/js/components/Logo.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+    import { config } from "@/utils/config";
+</script>
+
+<template>
+    <template v-if="config('sharp.theme.logo_urls.menu')">
+        <div class="max-w-[200px]">
+            <img class="h-auto w-auto max-w-full max-h-full" :src="config('sharp.theme.logo_urls.menu')" :alt="config('sharp.name')" />
+        </div>
+    </template>
+    <template v-else>
+        <div class="text-white">
+            {{ config('sharp.name') }}
+        </div>
+    </template>
+</template>
diff --git a/resources/js/composables/useMenu.ts b/resources/js/composables/useMenu.ts
@@ -4,6 +4,7 @@ import { usePage } from "@inertiajs/vue3";
 class Menu implements MenuData {
     items: Array<MenuItemData>;
     userMenu: UserMenuData;
+    isVisible: boolean;
 
     constructor(menu: MenuData) {
         Object.assign(this, menu);

diff --git a/resources/js/types/generated.d.ts b/resources/js/types/generated.d.ts
@@ -585,6 +585,7 @@ export type LayoutFieldData = {
 export type MenuData = {
   items: Array<MenuItemData>;
   userMenu: UserMenuData;
+  isVisible: boolean;
 };
 export type MenuItemData = {
   icon: string | null;

diff --git a/resources/js/utils/dialogs.ts b/resources/js/utils/dialogs.ts
@@ -6,7 +6,7 @@ let modalId = 0;
 let dialogs = ref([]);
 
 export function useDialogs() {
-    return { dialogs }
+    return dialogs;
 }
 
 export function showDialog(text: string, props: ModalProps = {}) {

diff --git a/src/Data/MenuData.php b/src/Data/MenuData.php
@@ -11,6 +11,7 @@ public function __construct(
         /** @var DataCollection<MenuItemData> */
         public DataCollection $items,
         public UserMenuData $userMenu,
+        public bool $isVisible,
     ) {
     }
 
@@ -28,6 +29,7 @@ public static function from(SharpMenuManager $menuManager): self
                         ->map(fn (SharpMenuItem $item) => MenuItemData::from($item))
                 )
             ),
+            isVisible: $menuManager->menu()?->isVisible() ?? true,
         );
     }
 }
diff --git a/src/Http/Middleware/HandleInertiaRequests.php b/src/Http/Middleware/HandleInertiaRequests.php
@@ -45,7 +45,7 @@ public function share(Request $request)
                 'sharp.markdown_editor.tight_lists_only' => config('sharp.markdown_editor.tight_lists_only', true),
                 'sharp.markdown_editor.nl2br' => config('sharp.markdown_editor.nl2br', false),
                 'sharp.name' => config('sharp.name', 'Sharp'),
-                'sharp.search.enabled' => config('sharp.search.enabled', false),
+                'sharp.search.enabled' => value(config('sharp.search.enabled', false)),
                 'sharp.search.placeholder' => config('sharp.search.placeholder'),
                 'sharp.theme.logo_urls.login' => config('sharp.theme.logo_urls.login'),
                 'sharp.theme.logo_urls.menu' => config('sharp.theme.logo_urls.menu'),