logout, 아이콘 변경
This commit is contained in:
yoon
parent
21f48d0e27
commit
97cebc26d8
@ -8,158 +8,11 @@
|
|||||||
|
|
||||||
<div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">
|
<div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">
|
||||||
<ul class="navbar-nav flex-row align-items-center ms-auto">
|
<ul class="navbar-nav flex-row align-items-center ms-auto">
|
||||||
<!-- Language -->
|
|
||||||
<li class="nav-item dropdown-language dropdown me-2 me-xl-0">
|
|
||||||
<a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown">
|
|
||||||
<i class="bx bx-globe bx-md"></i>
|
|
||||||
</a>
|
|
||||||
<ul class="dropdown-menu dropdown-menu-end">
|
|
||||||
<li>
|
|
||||||
<a class="dropdown-item" href="javascript:void(0);" data-language="en" data-text-direction="ltr">
|
|
||||||
<span>English</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a class="dropdown-item" href="javascript:void(0);" data-language="fr" data-text-direction="ltr">
|
|
||||||
<span>French</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a class="dropdown-item" href="javascript:void(0);" data-language="ar" data-text-direction="rtl">
|
|
||||||
<span>Arabic</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a class="dropdown-item" href="javascript:void(0);" data-language="de" data-text-direction="ltr">
|
|
||||||
<span>German</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<!-- /Language -->
|
|
||||||
|
|
||||||
<!-- Style Switcher -->
|
<button class="btn p-1" @click="switchToLightMode"><i class='bx bxs-sun link-warning'></i></button>
|
||||||
<li class="nav-item dropdown-style-switcher dropdown me-2 me-xl-0">
|
<button class="btn p-1" @click="switchToDarkMode"><i class='bx bxs-moon' ></i></button>
|
||||||
<a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown">
|
|
||||||
<i class="bx bx-md"></i>
|
|
||||||
</a>
|
|
||||||
<ul class="dropdown-menu dropdown-menu-end dropdown-styles">
|
|
||||||
<li>
|
|
||||||
<a class="dropdown-item" href="javascript:void(0);" data-theme="light">
|
|
||||||
<span><i class="bx bx-sun bx-md me-3"></i>Light</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a class="dropdown-item" href="javascript:void(0);" data-theme="dark">
|
|
||||||
<span><i class="bx bx-moon bx-md me-3"></i>Dark</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a class="dropdown-item" href="javascript:void(0);" data-theme="system">
|
|
||||||
<span><i class="bx bx-desktop bx-md me-3"></i>System</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<!-- / Style Switcher-->
|
|
||||||
|
|
||||||
<!-- Quick links -->
|
<i class="bx bx-bell bx-md bx-log-out cursor-pointer" @click="handleLogout"></i>
|
||||||
<li class="nav-item dropdown-shortcuts navbar-dropdown dropdown me-2 me-xl-0">
|
|
||||||
<a
|
|
||||||
class="nav-link dropdown-toggle hide-arrow"
|
|
||||||
href="javascript:void(0);"
|
|
||||||
data-bs-toggle="dropdown"
|
|
||||||
data-bs-auto-close="outside"
|
|
||||||
aria-expanded="false"
|
|
||||||
>
|
|
||||||
<i class="bx bx-grid-alt bx-md"></i>
|
|
||||||
</a>
|
|
||||||
<div class="dropdown-menu dropdown-menu-end p-0">
|
|
||||||
<div class="dropdown-menu-header border-bottom">
|
|
||||||
<div class="dropdown-header d-flex align-items-center py-3">
|
|
||||||
<h6 class="mb-0 me-auto">Shortcuts</h6>
|
|
||||||
<a
|
|
||||||
href="javascript:void(0)"
|
|
||||||
class="dropdown-shortcuts-add py-2"
|
|
||||||
data-bs-toggle="tooltip"
|
|
||||||
data-bs-placement="top"
|
|
||||||
title="Add shortcuts"
|
|
||||||
><i class="bx bx-plus-circle text-heading"></i
|
|
||||||
></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="dropdown-shortcuts-list scrollable-container">
|
|
||||||
<div class="row row-bordered overflow-visible g-0">
|
|
||||||
<div class="dropdown-shortcuts-item col">
|
|
||||||
<span class="dropdown-shortcuts-icon rounded-circle mb-3">
|
|
||||||
<i class="bx bx-calendar bx-26px text-heading"></i>
|
|
||||||
</span>
|
|
||||||
<a href="app-calendar.html" class="stretched-link">Calendar</a>
|
|
||||||
<small>Appointments</small>
|
|
||||||
</div>
|
|
||||||
<div class="dropdown-shortcuts-item col">
|
|
||||||
<span class="dropdown-shortcuts-icon rounded-circle mb-3">
|
|
||||||
<i class="bx bx-food-menu bx-26px text-heading"></i>
|
|
||||||
</span>
|
|
||||||
<a href="app-invoice-list.html" class="stretched-link">Invoice App</a>
|
|
||||||
<small>Manage Accounts</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row row-bordered overflow-visible g-0">
|
|
||||||
<div class="dropdown-shortcuts-item col">
|
|
||||||
<span class="dropdown-shortcuts-icon rounded-circle mb-3">
|
|
||||||
<i class="bx bx-user bx-26px text-heading"></i>
|
|
||||||
</span>
|
|
||||||
<a href="app-user-list.html" class="stretched-link">User App</a>
|
|
||||||
<small>Manage Users</small>
|
|
||||||
</div>
|
|
||||||
<div class="dropdown-shortcuts-item col">
|
|
||||||
<span class="dropdown-shortcuts-icon rounded-circle mb-3">
|
|
||||||
<i class="bx bx-check-shield bx-26px text-heading"></i>
|
|
||||||
</span>
|
|
||||||
<a href="app-access-roles.html" class="stretched-link">Role Management</a>
|
|
||||||
<small>Permission</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row row-bordered overflow-visible g-0">
|
|
||||||
<div class="dropdown-shortcuts-item col">
|
|
||||||
<span class="dropdown-shortcuts-icon rounded-circle mb-3">
|
|
||||||
<i class="bx bx-pie-chart-alt-2 bx-26px text-heading"></i>
|
|
||||||
</span>
|
|
||||||
<a href="index.html" class="stretched-link">Dashboard</a>
|
|
||||||
<small>User Dashboard</small>
|
|
||||||
</div>
|
|
||||||
<div class="dropdown-shortcuts-item col">
|
|
||||||
<span class="dropdown-shortcuts-icon rounded-circle mb-3">
|
|
||||||
<i class="bx bx-cog bx-26px text-heading"></i>
|
|
||||||
</span>
|
|
||||||
<a href="pages-account-settings-account.html" class="stretched-link">Setting</a>
|
|
||||||
<small>Account Settings</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row row-bordered overflow-visible g-0">
|
|
||||||
<div class="dropdown-shortcuts-item col">
|
|
||||||
<span class="dropdown-shortcuts-icon rounded-circle mb-3">
|
|
||||||
<i class="bx bx-help-circle bx-26px text-heading"></i>
|
|
||||||
</span>
|
|
||||||
<a href="pages-faq.html" class="stretched-link">FAQs</a>
|
|
||||||
<small>FAQs & Articles</small>
|
|
||||||
</div>
|
|
||||||
<div class="dropdown-shortcuts-item col">
|
|
||||||
<span class="dropdown-shortcuts-icon rounded-circle mb-3">
|
|
||||||
<i class="bx bx-window-open bx-26px text-heading"></i>
|
|
||||||
</span>
|
|
||||||
<a href="modal-examples.html" class="stretched-link">Modals</a>
|
|
||||||
<small>Useful Popups</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<!-- Quick links -->
|
|
||||||
|
|
||||||
<button @click="switchToDarkMode">다크 모드</button>
|
|
||||||
<button @click="switchToLightMode">라이트 모드</button>
|
|
||||||
|
|
||||||
<!-- Notification -->
|
<!-- Notification -->
|
||||||
<li class="nav-item dropdown-notifications navbar-dropdown dropdown me-3 me-xl-2">
|
<li class="nav-item dropdown-notifications navbar-dropdown dropdown me-3 me-xl-2">
|
||||||
@ -490,9 +343,14 @@
|
|||||||
</nav>
|
</nav>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import { useAuthStore } from '@s/useAuthStore';
|
||||||
|
import { useRouter } from 'vue-router';
|
||||||
import { useThemeStore } from '@s/darkmode';
|
import { useThemeStore } from '@s/darkmode';
|
||||||
import { onMounted } from 'vue';
|
import { onMounted } from 'vue';
|
||||||
|
|
||||||
|
const authStore = useAuthStore();
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
const { isDarkMode, switchToDarkMode, switchToLightMode } = useThemeStore();
|
const { isDarkMode, switchToDarkMode, switchToLightMode } = useThemeStore();
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
@ -502,5 +360,10 @@ onMounted(() => {
|
|||||||
switchToLightMode();
|
switchToLightMode();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const handleLogout = async () => {
|
||||||
|
await authStore.logout();
|
||||||
|
router.push('/login');
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
<style></style>
|
<style></style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user