silva
/
adrema
2
1
Fork 0
Code Issues 23 Pull Requests 1 Projects 1 Releases 104 Wiki Activity

Add main menu

This commit is contained in:
philipp lang 2021-04-11 00:57:47 +02:00
parent 504238844b
commit 1f1c43b39e
12 changed files with 179 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/Http/Controllers/HomeController.php
View File

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

1
app/Http/Middleware/InertiaShareMiddleware.php
View File

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

5
package.json
View File

@ -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",

3
public/mix-manifest.json
View File

@ -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"
}

1
resources/img/sprite.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 947 B

61
resources/img/svg/loss.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

45
resources/img/svg/user.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 639 B

2
resources/js/app.js vendored
View File

@ -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')

17
resources/js/components/Sprite.js vendored Normal file
View File

@ -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}`
}
}, '')
] )
}
};

26
resources/js/layouts/App.vue
View File

@ -1,12 +1,32 @@
<template>
<div class="font-sans flex flex-col flex-grow">
<div>
dfsfdsf
<div class="flex font-sans flex-grow">
<!-- ******************************** 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>

18
resources/js/layouts/_VLink.vue Normal file
View File

@ -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>

3
resources/js/views/Home.vue
View File

@ -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>