first
This commit is contained in:
476
inspond-nuxt-safekiso/base/components/TopNavBar1.vue
Normal file
476
inspond-nuxt-safekiso/base/components/TopNavBar1.vue
Normal file
@@ -0,0 +1,476 @@
|
||||
<!-- This example requires Tailwind CSS v2.0+ -->
|
||||
<template>
|
||||
<Disclosure v-slot="{ open }" as="nav" class="bg-white shadow">
|
||||
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex h-16 justify-between">
|
||||
<div class="flex">
|
||||
<div class="flex flex-shrink-0 items-center">
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
@click="handleItemClick($event, null)"
|
||||
>
|
||||
<img
|
||||
class="block h-8 w-auto lg:hidden"
|
||||
:src="siteLogoUrl"
|
||||
alt="site logo image"
|
||||
/>
|
||||
<img
|
||||
class="hidden h-8 w-auto lg:block"
|
||||
:src="siteLogoUrl"
|
||||
alt="site logo image"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="hidden sm:ml-6 sm:flex sm:space-x-8">
|
||||
<!-- Current: "border-indigo-500 text-gray-900", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" -->
|
||||
<template
|
||||
v-for="item in currentMenu['main']"
|
||||
:key="item.idx"
|
||||
>
|
||||
<a
|
||||
v-if="item.subs == undefined"
|
||||
href="javascript:void(0)"
|
||||
:class="
|
||||
isCurrentMenu(item)
|
||||
? 'inline-flex items-center border-b-2 border-indigo-500 px-1 pt-1 text-sm font-medium text-gray-900'
|
||||
: 'inline-flex items-center border-b-2 border-transparent px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700'
|
||||
"
|
||||
@click="handleItemClick($event, item)"
|
||||
>{{ item['title'] }}</a
|
||||
>
|
||||
<div
|
||||
v-else
|
||||
:class="
|
||||
isCurrentMenu(item)
|
||||
? 'inline-flex items-center border-b-2 border-indigo-500 px-1 pt-1 text-sm font-medium text-gray-900'
|
||||
: 'inline-flex items-center border-b-2 border-transparent px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700'
|
||||
"
|
||||
>
|
||||
<!-- dropdown -->
|
||||
<Menu as="div" class="relative ml-3">
|
||||
<div>
|
||||
<MenuButton class="flex">
|
||||
{{ item['title'] }}
|
||||
<svg
|
||||
x-state:on="Item active"
|
||||
x-state:off="Item inactive"
|
||||
class="h-5 w-5 group-hover:text-gray-500 text-gray-400"
|
||||
x-bind:class="{ 'text-gray-600': flyoutMenuOpen, 'text-gray-400': !flyoutMenuOpen }"
|
||||
x-description="Heroicon name: chevron-down"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</MenuButton>
|
||||
</div>
|
||||
<transition
|
||||
enter-active-class="transition ease-out duration-200"
|
||||
enter-from-class="transform opacity-0 scale-95"
|
||||
enter-to-class="transform opacity-100 scale-100"
|
||||
leave-active-class="transition ease-in duration-75"
|
||||
leave-from-class="transform opacity-100 scale-100"
|
||||
leave-to-class="transform opacity-0 scale-95"
|
||||
>
|
||||
<MenuItems
|
||||
class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
|
||||
>
|
||||
<MenuItem
|
||||
v-for="subItem in item['subs']"
|
||||
v-slot="{ active }"
|
||||
:key="subItem.idx"
|
||||
>
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
:class="[
|
||||
active
|
||||
? 'bg-gray-100'
|
||||
: '',
|
||||
'block px-4 py-2 text-sm text-gray-700',
|
||||
]"
|
||||
@click="
|
||||
handleItemClick(
|
||||
$event,
|
||||
subItem
|
||||
)
|
||||
"
|
||||
>{{ subItem.title }}</a
|
||||
>
|
||||
</MenuItem>
|
||||
</MenuItems>
|
||||
</transition>
|
||||
</Menu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template
|
||||
v-for="item in currentMenu['sub']"
|
||||
:key="item.idx"
|
||||
>
|
||||
<a
|
||||
v-if="item.subs == undefined"
|
||||
href="javascript:void(0)"
|
||||
:class="
|
||||
isCurrentMenu(item)
|
||||
? 'inline-flex items-center border-b-2 border-indigo-500 px-1 pt-1 text-sm font-medium text-gray-900'
|
||||
: 'inline-flex items-center border-b-2 border-transparent px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700'
|
||||
"
|
||||
@click="handleItemClick($event, item)"
|
||||
>{{ item['title'] }}</a
|
||||
>
|
||||
<div
|
||||
v-else
|
||||
:class="
|
||||
isCurrentMenu(item)
|
||||
? 'inline-flex items-center border-b-2 border-indigo-500 px-1 pt-1 text-sm font-medium text-gray-900'
|
||||
: 'inline-flex items-center border-b-2 border-transparent px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700'
|
||||
"
|
||||
>
|
||||
<!-- dropdown -->
|
||||
<Menu as="div" class="relative ml-3">
|
||||
<div>
|
||||
<MenuButton class="flex">
|
||||
{{ item['title'] }}
|
||||
<svg
|
||||
x-state:on="Item active"
|
||||
x-state:off="Item inactive"
|
||||
class="h-5 w-5 group-hover:text-gray-500 text-gray-400"
|
||||
x-bind:class="{ 'text-gray-600': flyoutMenuOpen, 'text-gray-400': !flyoutMenuOpen }"
|
||||
x-description="Heroicon name: chevron-down"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</MenuButton>
|
||||
</div>
|
||||
<transition
|
||||
enter-active-class="transition ease-out duration-200"
|
||||
enter-from-class="transform opacity-0 scale-95"
|
||||
enter-to-class="transform opacity-100 scale-100"
|
||||
leave-active-class="transition ease-in duration-75"
|
||||
leave-from-class="transform opacity-100 scale-100"
|
||||
leave-to-class="transform opacity-0 scale-95"
|
||||
>
|
||||
<MenuItems
|
||||
class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
|
||||
>
|
||||
<MenuItem
|
||||
v-for="subItem in item['subs']"
|
||||
v-slot="{ active }"
|
||||
:key="subItem.idx"
|
||||
>
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
:class="[
|
||||
active
|
||||
? 'bg-gray-100'
|
||||
: '',
|
||||
'block px-4 py-2 text-sm text-gray-700',
|
||||
]"
|
||||
@click="
|
||||
handleItemClick(
|
||||
$event,
|
||||
subItem
|
||||
)
|
||||
"
|
||||
>{{ subItem.title }}</a
|
||||
>
|
||||
</MenuItem>
|
||||
</MenuItems>
|
||||
</transition>
|
||||
</Menu>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden sm:ml-6 sm:flex sm:items-center">
|
||||
<button
|
||||
v-if="false"
|
||||
type="button"
|
||||
class="rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
|
||||
>
|
||||
<span class="sr-only">View notifications</span>
|
||||
<BellIcon class="h-6 w-6" aria-hidden="true" />
|
||||
</button>
|
||||
|
||||
<!-- Profile dropdown -->
|
||||
<Menu as="div" class="relative ml-3">
|
||||
<div>
|
||||
<MenuButton
|
||||
class="flex rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
|
||||
>
|
||||
<span class="sr-only">Open user menu</span>
|
||||
<BaseUserProfileImage :image-size="2" />
|
||||
</MenuButton>
|
||||
</div>
|
||||
<transition
|
||||
enter-active-class="transition ease-out duration-200"
|
||||
enter-from-class="transform opacity-0 scale-95"
|
||||
enter-to-class="transform opacity-100 scale-100"
|
||||
leave-active-class="transition ease-in duration-75"
|
||||
leave-from-class="transform opacity-100 scale-100"
|
||||
leave-to-class="transform opacity-0 scale-95"
|
||||
>
|
||||
<MenuItems
|
||||
class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
|
||||
>
|
||||
<MenuItem
|
||||
v-if="isAuthenticated"
|
||||
v-slot="{ active }"
|
||||
>
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
:class="[
|
||||
active ? 'bg-gray-100' : '',
|
||||
'block px-4 py-2 text-sm text-gray-700',
|
||||
]"
|
||||
@click="moveToPath('/user/info')"
|
||||
>설정</a
|
||||
>
|
||||
</MenuItem>
|
||||
<MenuItem v-slot="{ active }">
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
:class="[
|
||||
active ? 'bg-gray-100' : '',
|
||||
'block px-4 py-2 text-sm text-gray-700',
|
||||
]"
|
||||
@click="doSignInAndOut($event)"
|
||||
>{{
|
||||
isAuthenticated == true
|
||||
? '로그아웃'
|
||||
: '로그인'
|
||||
}}</a
|
||||
>
|
||||
</MenuItem>
|
||||
</MenuItems>
|
||||
</transition>
|
||||
</Menu>
|
||||
</div>
|
||||
<div class="-mr-2 flex items-center sm:hidden">
|
||||
<!-- Mobile menu button -->
|
||||
<DisclosureButton
|
||||
class="inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
|
||||
>
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<Bars3Icon
|
||||
v-if="!open"
|
||||
class="block h-6 w-6"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<XMarkIcon
|
||||
v-else
|
||||
class="block h-6 w-6"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</DisclosureButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DisclosurePanel class="sm:hidden">
|
||||
<div class="space-y-1 pt-2 pb-3">
|
||||
<!-- Current: "bg-indigo-50 border-indigo-500 text-indigo-700", Default: "border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700" -->
|
||||
|
||||
<template v-for="item in currentMenu['main']" :key="item.idx">
|
||||
<DisclosureButton
|
||||
v-if="item.path != undefined"
|
||||
as="a"
|
||||
href="javascript:void(0)"
|
||||
:class="
|
||||
currentRoutePath == item.path
|
||||
? 'block border-l-4 border-indigo-500 bg-indigo-50 py-2 pl-3 pr-4 text-base font-medium text-indigo-700'
|
||||
: 'block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-500 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-700'
|
||||
"
|
||||
@click="handleItemClick($event, item)"
|
||||
>{{ item['title'] }}</DisclosureButton
|
||||
>
|
||||
<a
|
||||
v-else
|
||||
href="javascript:void(0)"
|
||||
:class="
|
||||
currentRoutePath == item.path
|
||||
? 'block border-l-4 border-indigo-500 bg-indigo-50 py-2 pl-3 pr-4 text-base font-medium text-indigo-700'
|
||||
: 'block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-500 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-700'
|
||||
"
|
||||
>{{ item['title'] }}</a
|
||||
>
|
||||
<template v-for="subItem in item.subs" :key="subItem.idx">
|
||||
<DisclosureButton
|
||||
v-if="subItem.path != undefined"
|
||||
as="a"
|
||||
href="javascript:void(0)"
|
||||
:class="
|
||||
currentRoutePath == subItem.path
|
||||
? 'block border-l-4 border-indigo-500 bg-indigo-50 py-2 pl-3 pr-4 text-base font-medium text-indigo-700'
|
||||
: 'block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-500 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-700'
|
||||
"
|
||||
class="ml-4"
|
||||
@click="handleItemClick($event, subItem)"
|
||||
>{{ subItem['title'] }}</DisclosureButton
|
||||
>
|
||||
<a
|
||||
v-else
|
||||
href="javascript:void(0)"
|
||||
:class="
|
||||
currentRoutePath == subItem.path
|
||||
? 'block border-l-4 border-indigo-500 bg-indigo-50 py-2 pl-3 pr-4 text-base font-medium text-indigo-700'
|
||||
: 'block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-500 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-700'
|
||||
"
|
||||
>{{ subItem['title'] }}</a
|
||||
>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<template v-for="item in currentMenu['sub']" :key="item.idx">
|
||||
<DisclosureButton
|
||||
as="a"
|
||||
href="javascript:void(0)"
|
||||
:class="
|
||||
currentRoutePath == item.path
|
||||
? 'block border-l-4 border-indigo-500 bg-indigo-50 py-2 pl-3 pr-4 text-base font-medium text-indigo-700'
|
||||
: 'block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-500 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-700'
|
||||
"
|
||||
@click="handleItemClick($event, item)"
|
||||
>{{ item['title'] }}</DisclosureButton
|
||||
>
|
||||
</template>
|
||||
</div>
|
||||
<div class="border-t border-gray-200 pt-4 pb-3">
|
||||
<div class="flex items-center px-4">
|
||||
<div class="flex-shrink-0">
|
||||
<BaseUserProfileImage :image-size="3" />
|
||||
</div>
|
||||
<div v-if="false" class="ml-3">
|
||||
<div class="text-base font-medium text-gray-800">
|
||||
Tom Cook
|
||||
</div>
|
||||
<div class="text-sm font-medium text-gray-500">
|
||||
tom@example.com
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
v-if="false"
|
||||
type="button"
|
||||
class="ml-auto flex-shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
|
||||
>
|
||||
<span class="sr-only">View notifications</span>
|
||||
<BellIcon class="h-6 w-6" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="mt-3 space-y-1">
|
||||
<DisclosureButton
|
||||
v-if="isAuthenticated"
|
||||
as="a"
|
||||
href="javascript:void(0)"
|
||||
class="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800"
|
||||
@click="moveToPath('/user/info')"
|
||||
>설정</DisclosureButton
|
||||
>
|
||||
<DisclosureButton
|
||||
as="a"
|
||||
href="javascript:void(0)"
|
||||
class="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800"
|
||||
@click="doSignInAndOut($event)"
|
||||
>{{
|
||||
isAuthenticated == true ? '로그아웃' : '로그인'
|
||||
}}</DisclosureButton
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</DisclosurePanel>
|
||||
</Disclosure>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
Disclosure,
|
||||
DisclosureButton,
|
||||
DisclosurePanel,
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
MenuItems,
|
||||
} from '@headlessui/vue';
|
||||
import { Bars3Icon, BellIcon, XMarkIcon } from '@heroicons/vue/24/outline';
|
||||
const route = useRoute();
|
||||
const currentRoutePath = ref(route.path);
|
||||
const siteLogoUrl = ref(_siteConfig.siteLogoUrl);
|
||||
const currentMenu = ref(_crossCtl.menu);
|
||||
|
||||
const isAuthenticated = ref(_crossCtl.isAuthenticated);
|
||||
|
||||
function isCurrentMenu(menuItem) {
|
||||
let finalResult = false;
|
||||
|
||||
if (menuItem.path == currentRoutePath.value) {
|
||||
finalResult = true;
|
||||
} else {
|
||||
if (menuItem['subs'] != undefined) {
|
||||
for (let i = 0; i < menuItem['subs'].length; i++) {
|
||||
if (menuItem['subs'][i].path == currentRoutePath.value) {
|
||||
finalResult = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return finalResult;
|
||||
}
|
||||
|
||||
function handleItemClick(e, item) {
|
||||
if (item == null) {
|
||||
navigateTo('/');
|
||||
currentRoutePath.value = '/';
|
||||
} else {
|
||||
_crossCtl.moveToMenuItem(item);
|
||||
currentRoutePath.value = item.path;
|
||||
}
|
||||
}
|
||||
|
||||
function moveToPath(path) {
|
||||
navigateTo(path);
|
||||
currentRoutePath.value = path;
|
||||
}
|
||||
|
||||
async function doSignInAndOut(e) {
|
||||
e.target.blur();
|
||||
if (_crossCtl.isAuthenticated.value) {
|
||||
const response = await _crossCtl.doComm('signout', '', {});
|
||||
console.log('response=', response);
|
||||
if (response['responseCode'] == 200) {
|
||||
_crossCtl.setUserInfo({
|
||||
isAdmin: false,
|
||||
isApproved: false,
|
||||
isAuthenticated: false,
|
||||
isHighLeveled: false,
|
||||
isOp: false,
|
||||
isSuperOp: false,
|
||||
});
|
||||
_crossCtl.setUserProfile({});
|
||||
isAuthenticated.value = false;
|
||||
window.location.href = '/';
|
||||
} else {
|
||||
alert(response['responseMessage']);
|
||||
}
|
||||
} else {
|
||||
navigateTo({
|
||||
path: '/user/signin',
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user