108 lines
3.6 KiB
Vue
108 lines
3.6 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { MenuItemType } from '~/typs'
|
||
|
|
import { auth_data } from '~/hooks/utils'
|
||
|
|
|
||
|
|
const { t } = useI18n()
|
||
|
|
|
||
|
|
const props = defineProps<{
|
||
|
|
title: string
|
||
|
|
items: Array<MenuItemType>
|
||
|
|
}>()
|
||
|
|
const authData = auth_data()
|
||
|
|
|
||
|
|
const emit = defineEmits(['onNavMenu'])
|
||
|
|
const isOpen = ref(false)
|
||
|
|
const on_item = (item: MenuItemType, event: Event) => {
|
||
|
|
event.preventDefault()
|
||
|
|
event.stopImmediatePropagation()
|
||
|
|
event.stopPropagation()
|
||
|
|
emit('onNavMenu', item)
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<template>
|
||
|
|
<nav
|
||
|
|
class="flex items-center justify-between flex-wrap p-1 fixed w-full z-10 top-0 left-0"
|
||
|
|
:class="{ 'shadow-lg bg-indigo-900' : isOpen , 'bg-blue-900' : !isOpen}"
|
||
|
|
@keydown.escape="isOpen = false"
|
||
|
|
>
|
||
|
|
<!--Logo etc-->
|
||
|
|
<div class="flex items-center flex-shrink-0 text-white ml-2 mr-6">
|
||
|
|
<a
|
||
|
|
aria-current="page"
|
||
|
|
href="/"
|
||
|
|
class="router-link-active router-link-exact-active flex items-center text-white no-underline hover:text-white hover:no-underline"
|
||
|
|
title="LibreCloud"
|
||
|
|
>
|
||
|
|
<span class="hidden text-sm md:block mr-2">LibreCloud</span>
|
||
|
|
<span class="w-11 h-11 rounded-full mr-2">
|
||
|
|
<img class="h-11 w-auto rounded" src="/assets/images/app_w.svg" alt="App">
|
||
|
|
</span>
|
||
|
|
<span
|
||
|
|
class="text-xl pl-2"
|
||
|
|
><i class="em em-grinning"></i> {{ props.title }} </span>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!--Toggle button (hidden on large screens)-->
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="block lg:hidden px-2 text-gray-300 hover:text-white focus:outline-none focus:text-white"
|
||
|
|
:class="{ 'transition transform-180': isOpen }"
|
||
|
|
@click="isOpen = !isOpen"
|
||
|
|
>
|
||
|
|
<svg
|
||
|
|
class="h-6 w-6 fill-current"
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
v-show="isOpen"
|
||
|
|
fill-rule="evenodd"
|
||
|
|
clip-rule="evenodd"
|
||
|
|
d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z"
|
||
|
|
/>
|
||
|
|
<path
|
||
|
|
v-show="!isOpen"
|
||
|
|
fill-rule="evenodd"
|
||
|
|
d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<!--Menu-->
|
||
|
|
<div
|
||
|
|
class="w-full flex-grow lg:flex lg:items-center lg:w-auto"
|
||
|
|
:class="{ 'block shadow-3xl': isOpen, 'hidden': !isOpen }"
|
||
|
|
>
|
||
|
|
<ul
|
||
|
|
class="pt-4 lg:pt-0 list-reset lg:flex justify-end flex-1 items-center"
|
||
|
|
>
|
||
|
|
<li v-for="item in items" :key="item.id" class="mr-3">
|
||
|
|
<a
|
||
|
|
class="inline-block py-2 px-4 text-white no-underline"
|
||
|
|
:class="item.active ? '' : 'text-gray-400 no-underline hover:text-gray-200 hover:text-underline'"
|
||
|
|
:href="item.link"
|
||
|
|
@click="on_item(item,$event)"
|
||
|
|
>{{ item.title }}
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="p-1">
|
||
|
|
<div class="bg-white flex items-center rounded-full shadow-xl">
|
||
|
|
<slot name="search" />
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="p-1" v-if="authData.auth !== ''">
|
||
|
|
<router-link class="icon-btn text-2xl text-white no-underline" to="/logout" :title="t('button.logout')">
|
||
|
|
<carbon-logout />
|
||
|
|
</router-link>
|
||
|
|
</li>
|
||
|
|
<li class="p-1" v-else>
|
||
|
|
<router-link class="icon-btn text-2xl text-white no-underline" to="/login" :title="t('button.login')">
|
||
|
|
<carbon-login />
|
||
|
|
</router-link>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
</template>
|