jaro/ikea
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

restyling dashboard layout

Browse Source
This commit is contained in:
Geriano
2022-09-08 15:09:50 +07:00
parent 364af7a558
commit 5fd44b83a6
9 changed files with 106 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
resources/js/Components/DashboardLayout/Sidebar/Builder.vue
View File

@@ -5,12 +5,13 @@ import Links from "./Links.vue"
export default defineComponent({
props: {
open: Boolean,
menus: Array,
},
setup(props, { attrs }) {
return props => {
const { menus } = props
const { menus, open } = props
const padding = (menu, initial = 0) => menu && menu.parent_id !== null ? padding(menu.parent, initial + 8) : initial
const generate = (menu, attrs = {}) => {
@@ -20,12 +21,13 @@ export default defineComponent({
padding: padding(menu),
menu,
childs: menu.childs,
open,
}, menu.childs.map(child => generate(child, {
padding: padding(child)
})))
}
return h(Link, { ...attrs, padding: padding(menu), menu })
return h(Link, { ...attrs, padding: padding(menu), menu, open, })
}
return h('div', { class: 'flex flex-col' }, menus.map(menu => generate(menu)))

8
resources/js/Components/DashboardLayout/Sidebar/Link.vue
View File

@@ -6,6 +6,7 @@ import axios from 'axios'
const { menu } = defineProps({
menu: Object,
open: Boolean,
padding: Number,
})
@@ -52,15 +53,16 @@ onUpdated(fetch)
<Link
:href="link"
:class="`${themes().get('sidebar', 'bg-slate-700 text-gray-200')} ${active && 'bg-slate-800'} pl-${padding !== 0 && padding}`"
:title="menu.name"
class="w-full px-4 py-3"
>
<div class="flex items-center justify-between">
<div class="flex items-center" :class="{ 'justify-between': open, 'justify-center': !open }">
<div class="flex items-center space-x-2">
<Icon :name="menu.icon" />
<p class="uppercase font-semibold">{{ __(menu.name) }}</p>
<p v-if="open" class="uppercase font-semibold">{{ __(menu.name) }}</p>
</div>
<div v-if="menu.counter_handler && counter !== null" ref="element" class="flex-none flex items-center justify-center min-w-[1.5rem] min-h-[1.5rem] rounded-full bg-red-500 text-white text-xs p-1 transition-all">
<div v-if="open && menu.counter_handler && counter !== null" ref="element" class="flex-none flex items-center justify-center min-w-[1.5rem] min-h-[1.5rem] rounded-full bg-red-500 text-white text-xs p-1 transition-all">
<p>{{ counter }}</p>
</div>
</div>

33
resources/js/Components/DashboardLayout/Sidebar/Links.vue
View File

@@ -2,8 +2,9 @@
import { getCurrentInstance, onMounted, onUpdated, ref } from 'vue'
import Icon from '@/Components/Icon.vue'
const { menu, childs } = defineProps({
const { menu, childs, open } = defineProps({
menu: Object,
open: Boolean,
childs: Array,
padding: Number,
})
@@ -24,7 +25,7 @@ const trace = menu => {
const active = childs.find(trace)
const self = getCurrentInstance()
const open = ref(active ? true : false)
const show = ref(open ? (active ? true : false) : false)
const fetch = async () => {
try {
const { data } = await axios.get(route(`superuser.menu.counter`, menu.id))
@@ -74,27 +75,31 @@ onUpdated(fetch)
<template>
<div class="w-full flex flex-col">
<button
@click.prevent="open = ! open"
:class="`${themes().get('sidebar', 'bg-slate-700 text-gray-200')} ${open && 'dark:bg-gray-800'} pl-${padding !== 0 && padding}`"
@click.prevent="show = ! show"
:class="`${themes().get('sidebar', 'bg-slate-700 text-gray-200')} ${show && 'dark:bg-gray-800'} pl-${padding !== 0 && padding}`"
:title="menu.name"
class="w-full p-4"
>
<div class="flex items-center space-x-2">
<div class="flex items-center justify-center space-x-2">
<Icon :name="menu.icon" />
<p class="uppercase font-semibold w-full text-left">{{ __(menu.name) }}</p>
<div class="flex items-center space-x-2">
<div v-if="counter > 0" ref="element" class="flex items-center justify-center bg-red-500 text-white text-center rounded-full p-1">
<p class="text-xs">
{{ counter }}
</p>
<template v-if="open">
<p class="uppercase font-semibold w-full text-left">{{ __(menu.name) }}</p>
<div class="flex items-center space-x-2">
<div v-if="counter > 0" ref="element" class="flex items-center justify-center bg-red-500 text-white text-center rounded-full p-1">
<p class="text-xs">
{{ counter }}
</p>
</div>
<Icon name="caret-left" class="transition-all ease-in-out duration-150" :class="show && '-rotate-90'" />
</div>
<Icon name="caret-left" class="transition-all ease-in-out duration-150" :class="open && '-rotate-90'" />
</div>
</template>
</div>
</button>
<Transition name="slide-fade" mode="in-out">
<div v-if="open" class="flex flex-col" ref="container">
<div v-if="show && open" class="flex flex-col" ref="container">
<slot />
</div>
</Transition>