create custom resource manager

.gitignore

@@ -0,0 +1,10 @@
+/.idea
+/vendor
+/node_modules
+package-lock.json
+composer.phar
+composer.lock
+phpunit.xml
+.phpunit.result.cache
+.DS_Store
+Thumbs.db

composer.json

@@ -0,0 +1,29 @@
+{
+    "name": "digital-creative/collapsible-resource-manager",
+    "description": "A Laravel Nova tool.",
+    "keywords": [
+        "laravel",
+        "nova"
+    ],
+    "license": "MIT",
+    "require": {
+        "php": ">=7.1.0"
+    },
+    "autoload": {
+        "psr-4": {
+            "DigitalCreative\\CollapsibleResourceManager\\": "src/"
+        }
+    },
+    "extra": {
+        "laravel": {
+            "providers": [
+                "DigitalCreative\\CollapsibleResourceManager\\ToolServiceProvider"
+            ]
+        }
+    },
+    "config": {
+        "sort-packages": true
+    },
+    "minimum-stability": "dev",
+    "prefer-stable": true
+}

dist/mix-manifest.json

@@ -0,0 +1,3 @@
+{
+    "/js/tool.js": "/js/tool.js"
+}

package.json

@@ -0,0 +1,20 @@
+{
+    "private": true,
+    "scripts": {
+        "dev": "npm run development",
+        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "watch-poll": "npm run watch -- --watch-poll",
+        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "prod": "npm run production",
+        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
+    },
+    "devDependencies": {
+        "cross-env": "^5.0.0",
+        "laravel-mix": "^1.0",
+        "vue2-transitions": "^0.3.0"
+    },
+    "dependencies": {
+        "vue": "^2.5.0"
+    }
+}

resources/js/components/CollapsibleResourceManager.vue

@@ -0,0 +1,87 @@
+<template>
+
+    <div class="mb-8">
+
+        <h3 class="flex items-center font-normal text-white mb-6 text-base no-underline">
+
+            <div v-if="icon" class="sidebar-icon" v-html="icon"/>
+
+            <svg v-else class="sidebar-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+                <path fill="var(--sidebar-icon)"
+                      d="M3 1h4c1.1045695 0 2 .8954305 2 2v4c0 1.1045695-.8954305 2-2 2H3c-1.1045695 0-2-.8954305-2-2V3c0-1.1045695.8954305-2 2-2zm0 2v4h4V3H3zm10-2h4c1.1045695 0 2 .8954305 2 2v4c0 1.1045695-.8954305 2-2 2h-4c-1.1045695 0-2-.8954305-2-2V3c0-1.1045695.8954305-2 2-2zm0 2v4h4V3h-4zM3 11h4c1.1045695 0 2 .8954305 2 2v4c0 1.1045695-.8954305 2-2 2H3c-1.1045695 0-2-.8954305-2-2v-4c0-1.1045695.8954305-2 2-2zm0 2v4h4v-4H3zm10-2h4c1.1045695 0 2 .8954305 2 2v4c0 1.1045695-.8954305 2-2 2h-4c-1.1045695 0-2-.8954305-2-2v-4c0-1.1045695.8954305-2 2-2zm0 2v4h4v-4h-4z"/>
+            </svg>
+
+            <span class="sidebar-label">{{ title }}</span>
+
+        </h3>
+
+        <template v-for="(group, index) of groups">
+
+            <h4 class="relative select-none mt-4 ml-8 text-xs text-white-50% uppercase tracking-wide cursor-pointer"
+                v-if="group.title"
+                @click="toggleGroup(index)">
+
+                <div class="absolute collapsible-indicator">
+                    {{ activeMenu[index] ? '+' : '-' }}
+                </div>
+
+                {{ group.title }}
+
+            </h4>
+
+            <CollapseTransition :duration="150">
+
+                <ul class="list-reset" v-if="activeMenu[index]">
+
+                    <li class="leading-tight pt-4 ml-8 text-sm" v-for="resource of group.resources">
+
+                        <router-link class="text-white text-justify no-underline dim"
+                                     :to="{ name: 'index', params: { resourceName: resource.route } }">
+
+                            {{ resource.label }}
+
+                        </router-link>
+
+                    </li>
+
+                </ul>
+
+            </CollapseTransition>
+
+        </template>
+
+    </div>
+
+</template>
+
+<script>
+
+    import {CollapseTransition} from 'vue2-transitions'
+
+    export default {
+        name: 'BetterMenu',
+        components: {CollapseTransition},
+        props: ['title', 'icon', 'groups'],
+        data() {
+            return {
+                activeMenu: this.groups.map(group => !!group.expanded)
+            }
+        },
+        methods: {
+            toggleGroup(index) {
+                this.$set(this.activeMenu, index, !this.activeMenu[index])
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    .collapsible-indicator {
+        left: -20px;
+        width: 12px;
+        height: 12px;
+        display: flex;
+        justify-content: center;
+        align-content: center;
+    }
+</style>

resources/js/tool.js

@@ -0,0 +1,3 @@
+Nova.booting((Vue, router, store) => {
+    Vue.component('collapsible-resource-manager', require('./components/CollapsibleResourceManager'))
+})

resources/views/navigation.blade.php

@@ -0,0 +1,2 @@
+<collapsible-resource-manager :groups='@json($groups)' title="{{ $title }}" icon="{{ $icon }}">
+</collapsible-resource-manager>

src/CollapsibleResourceManager.php

@@ -0,0 +1,134 @@
+<?php
+
+namespace DigitalCreative\CollapsibleResourceManager;
+
+use Illuminate\Support\Collection;
+use Illuminate\View\View;
+use Laravel\Nova\Nova;
+use Laravel\Nova\Tool;
+use Laravel\Nova\Tools\ResourceManager;
+
+class CollapsibleResourceManager extends Tool
+{
+    /**
+     * @var string $title
+     */
+    private $title;
+
+    /**
+     * @var Collection $groups
+     */
+    private $groups;
+
+    /**
+     * @var string $icon
+     */
+    private $icon;
+
+    /**
+     * BetterMenu constructor.
+     *
+     * @param null|string $title
+     */
+    public function __construct(string $title = null)
+    {
+        $this->title = $title;
+        $this->groups = collect();
+    }
+
+    /**
+     * Perform any tasks that need to happen when the tool is booted.
+     *
+     * @return void
+     */
+    public function boot()
+    {
+
+        Nova::script('collapsible-resource-manager', __DIR__ . '/../dist/js/tool.js');
+
+        /**
+         * Remove the default resource manager
+         */
+        foreach (Nova::$tools as $index => $tool) {
+
+            if ($tool instanceof ResourceManager) {
+
+                unset(Nova::$tools[ $index ]);
+
+            }
+
+        }
+
+    }
+
+    /**
+     * Build the view that renders the navigation links for the tool.
+     *
+     * @return View
+     */
+    public function renderNavigation()
+    {
+        return view('collapsible-resource-manager::navigation', [
+            'groups' => $this->serializeGroups($this->groups),
+            'title' => $this->title,
+            'icon' => $this->icon,
+        ]);
+    }
+
+    /**
+     * @param string $icon
+     *
+     * @return $this
+     */
+    public function icon(string $icon): self
+    {
+        $this->icon = $icon;
+
+        return $this;
+    }
+
+    /**
+     * @param string $title
+     *
+     * @return $this
+     */
+    public function title(string $title): self
+    {
+        $this->title = $title;
+
+        return $this;
+    }
+
+    /**
+     * @param array $group
+     *
+     * @return $this
+     */
+    public function addGroup(array $group): self
+    {
+        $this->groups->push($group);
+
+        return $this;
+    }
+
+    /**
+     * @param Collection $groups
+     *
+     * @return Collection
+     */
+    private function serializeGroups(Collection $groups): Collection
+    {
+        return $groups->map(function (array $group) {
+
+            $group[ 'resources' ] = collect($group[ 'resources' ])->map(function ($resource) {
+                return [
+                    'label' => $resource::label(),
+                    'route' => $resource::uriKey()
+                ];
+            });
+
+            return $group;
+
+        });
+    }
+}

src/ToolServiceProvider.php

@@ -0,0 +1,18 @@
+<?php
+
+namespace DigitalCreative\CollapsibleResourceManager;
+
+use Illuminate\Support\ServiceProvider;
+
+class ToolServiceProvider extends ServiceProvider
+{
+    /**
+     * Bootstrap any application services.
+     *
+     * @return void
+     */
+    public function boot()
+    {
+        $this->loadViewsFrom(__DIR__ . '/../resources/views', 'collapsible-resource-manager');
+    }
+}

webpack.mix.js

@@ -0,0 +1,4 @@
+let mix = require('laravel-mix')
+
+mix.setPublicPath('dist')
+    .js('resources/js/tool.js', 'js')