SAFEKISO/inspond-nuxt-safekiso/base/components/BaseNavSideBar1.vue

<!-- This example requires Tailwind CSS v2.0+ -->
<template>
    <div class="flex-1 h-0 pt-5 pb-4 overflow-y-auto bg-white">
        <div class="flex-shrink-0 flex items-center px-4">
            <a href="javascript:void(0)" @click="router.push('/')">
                <!--{{ siteName }}-->
                <img
                    src="/kiso_ci_1.png"
                    alt="KISO CI"
                    width="500"
                    height="600"
                />
            </a>
        </div>
        <nav class="flex-1 mt-5 px-2 space-y-1 bg-white" aria-label="Sidebar">
            <template v-for="item in currentMenu['main']" :key="item.idx">
                <div v-if="!item.subs">
                    <a
                        href="javascript:void(0)"
                        :class="[
                            item['current']
                                ? 'bg-gray-100 text-gray-900'
                                : 'bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-900',
                            'group w-full flex items-center pl-2 py-2 text-sm font-medium rounded-md',
                        ]"
                        @click="handleItemClick(item)"
                    >
                        <component
                            :is="item['icon']"
                            :class="[
                                item['current']
                                    ? 'text-gray-500'
                                    : 'text-gray-400 group-hover:text-gray-500',
                                'mr-3 flex-shrink-0 h-6 w-6',
                            ]"
                            aria-hidden="true"
                        />
                        {{ item['title'] }}
                    </a>
                </div>
                <Disclosure
                    v-else
                    v-slot="{ open, close }"
                    as="div"
                    class="space-y-1"
                >
                    <DisclosureButton
                        :class="[
                            item['current']
                                ? 'bg-gray-100 text-gray-900'
                                : 'bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-900',
                            'group w-full flex items-center pl-2 pr-1 py-2 text-left text-sm font-medium rounded-md',
                        ]"
                    >
                        <component
                            :is="item['icon']"
                            class="mr-3 flex-shrink-0 h-6 w-6 text-gray-400 group-hover:text-gray-500"
                            aria-hidden="true"
                        />
                        <span class="flex-1">
                            {{ item.title }}
                        </span>
                        <svg
                            :class="[
                                open
                                    ? 'text-gray-400 rotate-90'
                                    : 'text-gray-300',
                                'ml-3 flex-shrink-0 h-5 w-5 transform group-hover:text-gray-400 transition-colors ease-in-out duration-150',
                            ]"
                            viewBox="0 0 20 20"
                            aria-hidden="true"
                        >
                            <path d="M6 6L14 10L6 14V6Z" fill="currentColor" />
                        </svg>
                    </DisclosureButton>
                    <DisclosurePanel class="space-y-1">
                        <a
                            v-for="subItem in item.subs"
                            :key="subItem['idx']"
                            href="javascript:void(0)"
                            :class="[
                                subItem['current']
                                    ? 'bg-gray-100 text-gray-900'
                                    : 'bg-white text-gray-600 hover:text-gray-900 hover:bg-gray-50',
                                'group w-full flex items-center pl-10 pr-2 py-2 text-sm font-medium rounded-md ',
                            ]"
                            @click="handleSubItemClick(subItem)"
                        >
                            {{ subItem['title'] }}
                        </a>
                    </DisclosurePanel>
                    <button
                        v-show="false"
                        :ref="(el) => (elements[item.idx] = el)"
                        :data-id="item.idx"
                        @click="doClose(close)"
                    ></button>
                    <DisclosureStateEmitter
                        :show="open"
                        @show="hideOther(item.idx)"
                    />
                </Disclosure>
            </template>
        </nav>
    </div>

    <div class="flex-shrink-0 flex bg-white p-4">
        <a href="#" class="flex-shrink-0 group block">
            <div class="flex items-center">
                <div class="space-y-1">
                    <h3
                        id="projects-headline"
                        class="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider"
                    ></h3>
                    <div
                        class="space-y-1"
                        role="group"
                        aria-labelledby="projects-headline"
                    >
                        <a
                            href="javascript:void(0)"
                            class="group flex items-center px-3 py-2 text-sm font-medium text-gray-600 rounded-md hover:text-gray-900 hover:bg-gray-50"
                            @click="doSignInAndOut()"
                        >
                            <span class="truncate">
                                {{ isAuthenticated ? '로그아웃' : '로그인' }}
                            </span>
                        </a>

                        <a
                            v-for="item in currentMenu['sub']"
                            :key="item.idx"
                            href="javascript:void(0)"
                            class="group flex items-center px-3 py-2 text-sm font-medium text-gray-600 rounded-md hover:text-gray-900 hover:bg-gray-50"
                            @click="handleItemClick(item)"
                        >
                            <span class="truncate">
                                {{ item.title }}
                            </span>
                        </a>
                    </div>
                </div>
            </div>
        </a>
    </div>
</template>

<script setup lang="ts">
import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue';
const props = defineProps({
    onMove: {
        type: Function,
        required: true,
    },
});

const isAuthenticated = _crossCtl.isAuthenticated;

const siteName = ref(_siteConfig.siteName);

const router = useRouter();

const currentMenu = _crossCtl.menu;

const elements = ref([]);

async function doSignInAndOut() {
    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 {
        console.log("go user login");
        navigateTo({
            path: '/user/signin',
        });
    }
}

function handleItemClick(item) {
    hideOther(Number.MAX_SAFE_INTEGER);
    _crossCtl.moveToMenuItem(item);
    props.onMove();
}

function handleSubItemClick(item) {
    _crossCtl.moveToMenuItem(item);
    props.onMove();
}

function hideOther(id) {
    let targetEl = null;
    const items = elements.value.filter((elm) => {
        if (elm.getAttribute('data-id') == id.toString()) {
            targetEl = elm;
        }
        return elm.getAttribute('data-id') !== id.toString();
        // return true;
    });
    items.forEach((elm) => elm.click());

    // targetEl.click();
}

function doClose(close) {
    close();
}
</script>