140 lines
3.9 KiB
Vue
140 lines
3.9 KiB
Vue
<template>
|
||
<div
|
||
class="h-[100vh] z-40 bg-white flex flex-col px-4 pt-8 border-r border-slate-200 transition-all"
|
||
:class="{'w-[300px]': isOpenMenu, 'w-[70px]': !isOpenMenu}"
|
||
>
|
||
<div class="pl-1 flex items-center mb-8 justify-between">
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||
aria-hidden="true"
|
||
role="img"
|
||
class="iconify iconify--logos"
|
||
width="31.88"
|
||
height="32"
|
||
preserveAspectRatio="xMidYMid meet"
|
||
viewBox="0 0 256 257"
|
||
>
|
||
<defs><linearGradient
|
||
id="IconifyId1813088fe1fbc01fb466"
|
||
x1="-.828%"
|
||
x2="57.636%"
|
||
y1="7.652%"
|
||
y2="78.411%"
|
||
><stop
|
||
offset="0%"
|
||
stop-color="#41D1FF"
|
||
/><stop
|
||
offset="100%"
|
||
stop-color="#BD34FE"
|
||
/></linearGradient><linearGradient
|
||
id="IconifyId1813088fe1fbc01fb467"
|
||
x1="43.376%"
|
||
x2="50.316%"
|
||
y1="2.242%"
|
||
y2="89.03%"
|
||
><stop
|
||
offset="0%"
|
||
stop-color="#FFEA83"
|
||
/><stop
|
||
offset="8.333%"
|
||
stop-color="#FFDD35"
|
||
/><stop
|
||
offset="100%"
|
||
stop-color="#FFA800"
|
||
/></linearGradient></defs><path
|
||
fill="url(#IconifyId1813088fe1fbc01fb466)"
|
||
d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"
|
||
/><path
|
||
fill="url(#IconifyId1813088fe1fbc01fb467)"
|
||
d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"
|
||
/>
|
||
</svg>
|
||
<div
|
||
class="p-1 px-2 rounded-md transition-all cursor-pointer hover:bg-gray-200"
|
||
:class="{'rotate-90': !isOpenMenu, '-rotate-90': isOpenMenu}"
|
||
@click="toggleMenu"
|
||
>
|
||
<i class="ri-upload-line" />
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-col">
|
||
<div
|
||
v-for="{title, icon, link, type, name} in menu"
|
||
:key="`${title}${name}`"
|
||
>
|
||
<router-link
|
||
v-if="type === 'link'"
|
||
class="flex p-2 rounded-md hover:bg-gray-100 flex items-center"
|
||
:class="{'bg-gray-200': pageName === name}"
|
||
:to="link"
|
||
>
|
||
<i :class="`ri-${icon} text-slate-600 mr-2 `" />
|
||
<span
|
||
v-if="isOpenMenu"
|
||
class="text-slate-700"
|
||
>{{ title }}</span>
|
||
</router-link>
|
||
<div
|
||
v-if="type === 'line'"
|
||
class="border-b my-4 border-slate-200"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {mapGetters, mapMutations} from "vuex";
|
||
|
||
export default {
|
||
name: 'App',
|
||
components: {},
|
||
data() {
|
||
const menu = [
|
||
{
|
||
title: "Главная",
|
||
icon: "home-4-line",
|
||
link: "/",
|
||
type: "link",
|
||
name: "main"
|
||
},
|
||
{
|
||
title: "Главная1",
|
||
icon: "home-4-line",
|
||
link: "/page1",
|
||
type: "link",
|
||
name: "page1"
|
||
},
|
||
{
|
||
title: "Главная2",
|
||
icon: "home-4-line",
|
||
link: "/page2",
|
||
type: "link",
|
||
name: "page2"
|
||
},
|
||
{
|
||
title: "Выход",
|
||
icon: "logout-circle-line",
|
||
link: "/auth",
|
||
type: "link",
|
||
name: ""
|
||
},
|
||
]
|
||
return {
|
||
menu
|
||
}
|
||
},
|
||
computed: {
|
||
...mapGetters('layout', ['isOpenMenu']),
|
||
pageName() {
|
||
return this.$route.name
|
||
}
|
||
},
|
||
methods: {
|
||
...mapMutations('layout', ['toggleMenu']),
|
||
}
|
||
}
|
||
|
||
</script>
|