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">
|
||||
<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 -->
|
||||
<li class="nav-item dropdown-style-switcher 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-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-->
|
||||
<button class="btn p-1" @click="switchToLightMode"><i class='bx bxs-sun link-warning'></i></button>
|
||||
<button class="btn p-1" @click="switchToDarkMode"><i class='bx bxs-moon' ></i></button>
|
||||
|
||||
<!-- Quick links -->
|
||||
<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>
|
||||
<i class="bx bx-bell bx-md bx-log-out cursor-pointer" @click="handleLogout"></i>
|
||||
|
||||
<!-- Notification -->
|
||||
<li class="nav-item dropdown-notifications navbar-dropdown dropdown me-3 me-xl-2">
|
||||
@ -490,9 +343,14 @@
|
||||
</nav>
|
||||
</template>
|
||||
<script setup>
|
||||
import { useAuthStore } from '@s/useAuthStore';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useThemeStore } from '@s/darkmode';
|
||||
import { onMounted } from 'vue';
|
||||
|
||||
const authStore = useAuthStore();
|
||||
const router = useRouter();
|
||||
|
||||
const { isDarkMode, switchToDarkMode, switchToLightMode } = useThemeStore();
|
||||
|
||||
onMounted(() => {
|
||||
@ -502,5 +360,10 @@ onMounted(() => {
|
||||
switchToLightMode();
|
||||
}
|
||||
});
|
||||
|
||||
const handleLogout = async () => {
|
||||
await authStore.logout();
|
||||
router.push('/login');
|
||||
};
|
||||
</script>
|
||||
<style></style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user