Add ability to disable header items handling (#108)

dcasia · Oct 13, 2023 · 7fba56e · 7fba56e
1 parent 37cb439
commit 7fba56e
Show file tree

Hide file tree

Showing 9 changed files with 136 additions and 33 deletions.
diff --git a/README.md b/README.md
@@ -49,6 +49,23 @@ class NovaServiceProvider extends NovaApplicationServiceProvider {
 }
 ```
 
+## Configuration
+
+You can also enable/disable the main header menu handling. For example, if you don't want the user menu, theme switcher,
+and notification icon to be moved to the bottom left side, you can manually disable it by adding these lines to your Nova config file:
+
+```php
+// config/nova.php
+
+'vendors' => [
+    'collapsible_resource_manager' => [
+        'move_user_menu' => false,
+        'move_theme_switcher' => false,
+        'move_notification_center' => false
+    ]
+]
+```
+
 ## ⭐️ Show Your Support
 
 Please give a ⭐️ if this project helped you!

diff --git a/config/nova.php b/config/nova.php
@@ -0,0 +1,9 @@
+<?php
+
+declare(strict_types = 1);
+
+return [
+    'move_user_menu' => true,
+    'move_theme_switcher' => true,
+    'move_notification_center' => true,
+];
diff --git a/dist/css/card.css b/dist/css/card.css
diff --git a/dist/js/tool.js b/dist/js/tool.js
diff --git a/resources/js/components/Menu.vue b/resources/js/components/Menu.vue
@@ -2,7 +2,7 @@
 
     <div class="flex h-full whitespace-nowrap"
          :class="{
-            'min-h-[calc(100vh-66px)]': screen === 'responsive',
+            'min-h-[calc(100vh-50px)]': screen === 'responsive',
             'lg:flex hidden min-h-[calc(100vh-56px)]': screen === 'desktop'
          }">
 
@@ -29,24 +29,26 @@
 
             </div>
 
-            <div class="space-y-1 flex flex-col justify-center items-center fixed bottom-2">
+            <div v-if="hasLowerMenu" class="space-y-2 flex flex-col justify-center items-center fixed bottom-0 pb-2 pt-4 left-0 w-14 bg-white dark:bg-gray-800">
 
-                <component :is="NotificationCenter" v-if="notificationCenterEnabled"/>
-                <component :is="ThemeDropdown" v-if="themeSwitcherEnabled"/>
+                <div class="bg-gradient-to-t from-white dark:from-gray-800 to-transparent -mt-14 h-10 w-full pointer-events-none"/>
 
-                <hr v-if="themeSwitcherEnabled || notificationCenterEnabled"
+                <component :is="NotificationCenter" v-if="config.move_notification_center && notificationCenterEnabled"/>
+                <component :is="ThemeDropdown" v-if="config.move_theme_switcher && themeSwitcherEnabled"/>
+
+                <hr v-if="config.move_user_menu && (themeSwitcherEnabled || notificationCenterEnabled)"
                     class="border-gray-200 dark:border-gray-700 w-full" style="margin: 10px 0"/>
 
-                <UserMenu/>
+                <UserMenu v-if="config.move_user_menu"/>
 
             </div>
 
         </div>
 
-        <div class="bg-[rgba(var(--colors-gray-50))] dark:bg-[rgba(var(--colors-gray-500),.05)] transition-width duration-300 flex overflow-x-hidden relative"
+        <div class="bg-[rgba(var(--colors-gray-50))] dark:bg-[rgba(var(--colors-gray-900),.65)] lg:dark:bg-[rgba(var(--colors-gray-500),.05)] transition-width duration-300 flex overflow-x-hidden relative"
             :class="{
                 'w-[240px] border-r border-gray-200 dark:border-gray-700': screen === 'desktop' && currentActiveMenu,
-                'w-full': screen === 'responsive',
+                'w-full dark:border-r dark:border-gray-700': screen === 'responsive',
                 'w-[0px] border-transparent': currentActiveMenu === null,
              }">
 
@@ -100,6 +102,18 @@
 
         },
         computed: {
+            config() {
+                return Nova.config('collapsible_resource_manager')
+            },
+            hasLowerMenu() {
+
+                if (this.config.move_user_menu || this.config.move_notification_center || this.config.move_theme_switcher) {
+                    return true
+                }
+
+                return this.themeSwitcherEnabled || this.notificationCenterEnabled
+
+            },
             storeActiveMenu() {
                 return this.recursiveFind(this.menus)
             },
@@ -208,7 +222,7 @@
 
     #nova {
 
-        div[dusk="global-search-component"] {
+        div[dusk="global-search-component"].handle-global-search-component {
 
             max-width: 100%;
 
@@ -235,7 +249,7 @@
                 width: 0;
             }
 
-            div[dusk="global-search-component"] {
+            div[dusk="global-search-component"].handle-global-search-component {
 
                 @apply max-w-xs;
 
@@ -264,5 +278,9 @@
 
     }
 
+    #collapsible-resource-manager-responsive ~ div{
+        background-color: red !important;
+    }
+
 
 </style>
diff --git a/resources/js/components/SvgIcon.vue b/resources/js/components/SvgIcon.vue
@@ -1,6 +1,6 @@
 <template>
 
-    <template v-if="type.trimStart().startsWith('<svg')">
+    <template v-if="type?.trim()?.startsWith('<svg')">
         <div v-html="type"/>
     </template>
 

diff --git a/resources/js/tool.js b/resources/js/tool.js
@@ -2,6 +2,15 @@ import Menu from './components/Menu.vue'
 import Noop from './components/Noop.vue'
 import { createVNode, render, nextTick } from 'vue'
 
+const version = parseFloat(Nova.config('version').replaceAll('.', ''))
+const config = Nova.config('collapsible_resource_manager')
+
+const settings = {
+    UserMenu: config.move_user_menu,
+    NotificationCenter: config.move_notification_center,
+    ThemeDropdown: config.move_theme_switcher,
+}
+
 Nova.booting(app => {
 
     const components = {
@@ -20,6 +29,14 @@ Nova.booting(app => {
          */
         if ([ 'NotificationCenter', 'UserMenu', 'ThemeDropdown', 'MainMenu' ].includes(name)) {
 
+            for (const key in settings) {
+
+                if (key === name && settings[ key ] === false) {
+                    return componentFn.call(this, name, component)
+                }
+
+            }
+
             components[ name ] = component
 
             return componentFn.call(this, name, Noop)
@@ -31,11 +48,29 @@ Nova.booting(app => {
     }
 
     app.mixin({
+        data() {
+            return {
+                toDestroy: [],
+            }
+        },
         async mounted() {
 
+            if (this._.type?.__file?.endsWith('GlobalSearch.vue')) {
+
+                if (settings.UserMenu && settings.NotificationCenter && settings.ThemeDropdown) {
+                    this._.vnode.el.classList.add('handle-global-search-component')
+                }
+
+            }
+
             if (this._.type?.name === 'Noop') {
 
                 const screen = this._.attrs[ 'data-screen' ]
+                const mobile = this._.attrs[ 'mobile' ]
+
+                if (mobile) {
+                    this._.vnode.el?.parentElement?.classList?.add('hidden')
+                }
 
                 if (screen === undefined) {
                     return
@@ -53,17 +88,21 @@ Nova.booting(app => {
                 const container = document.createElement('div')
                 container.id = `collapsible-resource-manager-${ screen }`
 
-                let target = null
+                let element = null
 
                 if (screen === 'desktop') {
-                    target = '#nova div[data-testid="content"] > div:first-child'
+                    element = document.querySelector('#nova div[data-testid="content"] > div:first-child')
                 }
 
                 if (screen === 'responsive') {
-                    target = '#nova div[dusk="sidebar-menu"][data-screen="responsive"]'
-                }
 
-                let element = document.querySelector(target)
+                    if (version <= 42713) {
+                        element = this._.vnode.el
+                    } else {
+                        element = this._.vnode.el.parentElement.parentElement
+                    }
+
+                }
 
                 if (element) {
 
@@ -74,11 +113,20 @@ Nova.booting(app => {
 
                     render(vnode, container)
 
+                    this.toDestroy.push(container)
+
                 }
 
             }
 
         },
+        unmounted() {
+
+            for (const element of this.toDestroy) {
+                render(null, element)
+            }
+
+        },
     })
 
 })
diff --git a/src/CollapsibleResourceManagerServiceProvider.php b/src/CollapsibleResourceManagerServiceProvider.php
@@ -19,9 +19,20 @@ public function boot(): void
 
         Nova::serving(function (ServingNova $event): void {
 
+            Nova::provideToScript([
+                'collapsible_resource_manager' => config('nova.vendors.collapsible_resource_manager'),
+            ]);
+
             Nova::script('collapsible-resource-manager', __DIR__ . '/../dist/js/tool.js');
             Nova::style('collapsible-resource-manager', __DIR__ . '/../dist/css/card.css');
 
         });
     }
+
+    public function register(): void
+    {
+        $this->mergeConfigFrom(
+            __DIR__ . '/../config/nova.php', 'nova.vendors.collapsible_resource_manager',
+        );
+    }
 }
diff --git a/yarn.lock b/yarn.lock
@@ -1232,9 +1232,9 @@
   integrity sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==
 
 "@types/node@*":
-  version "20.8.4"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.8.4.tgz#0e9ebb2ff29d5c3302fc84477d066fa7c6b441aa"
-  integrity sha512-ZVPnqU58giiCjSxjVUESDtdPk4QR5WQhhINbc9UBrKLU68MX5BF6kbQzTrkwbolyr0X8ChBpXfavr5mZFKZQ5A==
+  version "20.8.5"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.8.5.tgz#13352ae1f80032171616910e8aba2e3e52e57d96"
+  integrity sha512-SPlobFgbidfIeOYlzXiEjSYeIJiOCthv+9tSQVpvk4PAdIIc+2SmjNVzWXk9t0Y7dl73Zdf+OgXKHX9XtkqUpw==
   dependencies:
     undici-types "~5.25.1"
 
@@ -2515,9 +2515,9 @@ [email protected]:
   integrity sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==
 
 electron-to-chromium@^1.4.535:
-  version "1.4.551"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.551.tgz#14db6660a88f66ce095ea2657abe5653bc7f42ed"
-  integrity sha512-/Ng/W/kFv7wdEHYzxdK7Cv0BHEGSkSB3M0Ssl8Ndr1eMiYeas/+Mv4cNaDqamqWx6nd2uQZfPz6g25z25M/sdw==
+  version "1.4.553"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.553.tgz#56fd65afddbd713c52f0e95d0223b3368f520865"
+  integrity sha512-HiRdtyKS2+VhiXvjhMvvxiMC33FJJqTA5EB2YHgFZW6v7HkK4Q9Ahv2V7O2ZPgAjw+MyCJVMQvigj13H8t+wvA==
 
 elliptic@^6.5.3:
   version "6.5.4"
@@ -2803,9 +2803,9 @@ [email protected]:
   integrity sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==
 
 fraction.js@^4.3.6:
-  version "4.3.6"
-  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.6.tgz#e9e3acec6c9a28cf7bc36cbe35eea4ceb2c5c92d"
-  integrity sha512-n2aZ9tNfYDwaHhvFTkhFErqOMIb8uyzSQ+vGJBjZyanAKZVbGUQ1sngfk9FdkBw7G26O7AgNjLcecLffD1c7eg==
+  version "4.3.7"
+  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
+  integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
 
 [email protected]:
   version "0.5.2"
@@ -2837,9 +2837,9 @@ fsevents@~2.3.2:
   integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
 
 function-bind@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
-  integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
+  integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
 
 gensync@^1.0.0-beta.2:
   version "1.0.0-beta.2"
@@ -3544,9 +3544,9 @@ lru-cache@^6.0.0:
     yallist "^4.0.0"
 
 magic-string@^0.30.0:
-  version "0.30.4"
-  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.4.tgz#c2c683265fc18dda49b56fc7318d33ca0332c98c"
-  integrity sha512-Q/TKtsC5BPm0kGqgBIF9oXAs/xEf2vRKiIB4wCRQTJOQIByZ1d+NnUOotvJOvNpi5RNIgVOMC3pOuaP1ZTDlVg==
+  version "0.30.5"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.5.tgz#1994d980bd1c8835dc6e78db7cbd4ae4f24746f9"
+  integrity sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==
   dependencies:
     "@jridgewell/sourcemap-codec" "^1.4.15"