Add main menu

app/Http/Controllers/HomeController.php

@@ -8,6 +8,8 @@ class HomeController extends Controller
 {
     public function __invoke()
     {
+        session()->put('menu', 'dashboard');
+
         return \Inertia::render('Home', []);
     }
 }

app/Http/Middleware/InertiaShareMiddleware.php

@@ -23,6 +23,7 @@ class InertiaShareMiddleware
         ]);
 
         \Inertia::share([
+            'menu' => session()->get('menu'),
             'errors' => function () {
                 return Session::get('errors')
                     ? Session::get('errors')->getBag('default')->getMessages()

package.json

@@ -7,7 +7,10 @@
         "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 --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
+        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "img": "rm -R public/img && cd resources/img/svg && svg-sprite -s --symbol-dest=sprite *.svg && mv sprite/svg/sprite.symbol.svg ../sprite.svg && rm -R sprite && cd ../../../ && cp -R resources/img public/img"
+
+
     },
     "devDependencies": {
         "laravel-mix": "^6.0.1",

public/mix-manifest.json

@@ -1,5 +1,6 @@
 {
     "/js/app.js": "/js/app.js",
+    "/css/app.css": "/css/app.css",
     "/img/dpsg.gif": "/img/dpsg.gif",
-    "/css/app.css": "/css/app.css"
+    "/img/sprite.svg": "/img/sprite.svg"
 }

resources/img/sprite.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="iso-8859-1"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol viewBox="0 0 512 512" id="loss" xmlns="http://www.w3.org/2000/svg"><path d="M448 281.6h-25.6c-7.68 0-12.8 5.12-12.8 12.8v115.2h51.2V294.4c0-7.68-5.12-12.8-12.8-12.8zM345.6 230.4H320c-7.68 0-12.8 5.12-12.8 12.8v166.4h51.2V243.2c0-7.68-5.12-12.8-12.8-12.8zM243.2 179.2h-25.6c-7.68 0-12.8 5.12-12.8 12.8v217.6H256V192c0-7.68-5.12-12.8-12.8-12.8zM140.8 102.4h-25.6c-7.68 0-12.8 5.12-12.8 12.8v294.4h51.2V115.2c0-7.68-5.12-12.8-12.8-12.8z"/><path d="M486.4 460.8H51.2V25.6C51.2 10.24 40.96 0 25.6 0 10.24 0 0 10.24 0 25.6v460.8C0 501.76 10.24 512 25.6 512h460.8c15.36 0 25.6-10.24 25.6-25.6 0-15.36-10.24-25.6-25.6-25.6z"/></symbol><symbol viewBox="0 0 512 512" id="user" xmlns="http://www.w3.org/2000/svg"><path d="M0 435.2V512h512v-76.8c0-171.52-512-171.52-512 0z"/><circle cx="256" cy="128" r="128"/></symbol></svg>

resources/img/svg/loss.svg

@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M448,281.6h-25.6c-7.68,0-12.8,5.12-12.8,12.8v115.2h51.2V294.4C460.8,286.72,455.68,281.6,448,281.6z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M345.6,230.4H320c-7.68,0-12.8,5.12-12.8,12.8v166.4h51.2V243.2C358.4,235.52,353.28,230.4,345.6,230.4z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M243.2,179.2h-25.6c-7.68,0-12.8,5.12-12.8,12.8v217.6H256V192C256,184.32,250.88,179.2,243.2,179.2z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M140.8,102.4h-25.6c-7.68,0-12.8,5.12-12.8,12.8v294.4h51.2V115.2C153.6,107.52,148.48,102.4,140.8,102.4z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M486.4,460.8H51.2V25.6C51.2,10.24,40.96,0,25.6,0C10.24,0,0,10.24,0,25.6v460.8C0,501.76,10.24,512,25.6,512h460.8
+			c15.36,0,25.6-10.24,25.6-25.6C512,471.04,501.76,460.8,486.4,460.8z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

resources/img/svg/user.svg

@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M0,435.2V512h512v-76.8C512,263.68,0,263.68,0,435.2z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<circle cx="256" cy="128" r="128"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

resources/js/app.js

@@ -3,11 +3,13 @@ import { App, plugin } from '@inertiajs/inertia-vue'
 import 'font-awesome/css/font-awesome.css';
 import Echo from 'laravel-echo';
 window.io = require('socket.io-client');
+import Sprite from './components/Sprite.js';
 
 import FText from './components/FText.vue';
 
 Vue.use(plugin)
 Vue.component('f-text', FText);
+Vue.component('sprite', Sprite);
 
 const el = document.getElementById('app')
 

resources/js/components/Sprite.js

@@ -0,0 +1,17 @@
+export default {
+    props: {
+        src: { required: true, type: String }
+    },
+    render: function(createElement) {
+        var attr = this.$attrs.class ? this.$attrs.class : '';
+        return createElement('svg', {
+            class: attr + ' fill-current'
+        }, [
+            createElement('use', {
+                'attrs': {
+                    'xlink:href': `/img/sprite.svg#${this.$props.src}`
+                }
+            }, '')
+        ] )
+    }
+};

resources/js/layouts/App.vue

@@ -1,12 +1,32 @@
 <template>
-    <div class="font-sans flex flex-col flex-grow">
+    <div class="flex font-sans flex-grow">
-        <div>
+
-            dfsfdsf
+        <!-- ******************************** Sidebar ******************************** -->
+        <div class="fixed bg-gray-800 p-6 w-56 left-0 top-0 h-screen border-r border-gray-600 border-solid">
+            <div class="grid gap-2">
+                <v-link href="/dashboard" menu="dashboard" icon="loss">Dashboard</v-link>
+                <v-link href="/member" menu="member" icon="user">Mitglieder</v-link>
+            </div>
         </div>
+
+        <div class="flex-grow ml-56 bg-gray-900">
+            <slot></slot>
+        </div>
+
     </div>
 </template>
 
 <script>
+import VLink from './_VLink.vue';
+
 export default {
+    components: { VLink }
 };
 </script>
+
+<style scoped>
+.main-grid {
+    grid-template-columns: min-content 1fr;
+    display: grid;
+}
+</style>

resources/js/layouts/_VLink.vue

@@ -0,0 +1,18 @@
+<template>
+    <inertia-link class="flex text-white py-2 px-3 rounded-lg hover:bg-gray-600" :href="href" :class="{'bg-gray-700': $page.props.menu == menu}">
+        <sprite class="text-white w-6 h-6 mr-4" :src="icon"></sprite>
+        <span class="font-semibold">
+            <slot></slot>
+        </span>
+    </inertia-link>
+</template>
+
+<script>
+export default {
+    props: {
+        href: {},
+        icon: {},
+        menu: {},
+    }
+};
+</script>

resources/js/views/Home.vue

@@ -1,11 +1,14 @@
 <template>
     <div class="gap-6 grid-cols-4 grid p-6">
+
+        <!-- 
         <inertia-link v-for="block, index in blocks" class="items-center text-gray-800 bg-gray-100 hover:bg-gray-300 p-6 shadow flex flex-col" :href="block.href" :key="index">
             <span class="flex-grow mb-4">
                 <span :class="block.icon" class="fa fa-lg text-gray-700"></span>
             </span>
             <span v-html="block.label"></span>
         </inertia-link>
+        -->
     </div>
 </template>