d1967f718e
* Added default layout for the site * App is in light mode by default. * App is in light mode by default.
56 lines
1.7 KiB
Vue
56 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
|
|
const isDarkTheme = ref(false);
|
|
|
|
const toggleDarkMode = () => {
|
|
isDarkTheme.value = !isDarkTheme.value;
|
|
document.documentElement.classList.toggle("app-dark");
|
|
};
|
|
|
|
const toggleMenu = () => {
|
|
document.getElementsByClassName("layout-wrapper")[0]?.classList.toggle("layout-static-inactive");
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<nav class="layout-topbar">
|
|
<div class="layout-topbar-logo-container">
|
|
<button class="layout-menu-button layout-topbar-action" @click="toggleMenu">
|
|
<i class="pi pi-bars"></i>
|
|
</button>
|
|
|
|
<nuxt-link to="/" class="layout-topbar-logo">
|
|
<img src="@/assets/images/logo.png" alt="Two stick silhouettes admiring fireworks in the sky" />
|
|
<span>Glowing Fiesta</span>
|
|
</nuxt-link>
|
|
</div>
|
|
|
|
<div class="layout-topbar-actions">
|
|
<div class="layout-config-menu">
|
|
<button type="button" class="layout-topbar-action layout-topbar-action-highlight" @click="toggleDarkMode">
|
|
<i :class="['pi', { 'pi-moon': isDarkTheme, 'pi-sun': !isDarkTheme }]"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<Divider layout="vertical" />
|
|
|
|
<div class="layout-topbar-menu hidden lg:block">
|
|
<div class="layout-topbar-menu-content">
|
|
<button type="button" class="layout-topbar-action">
|
|
<i class="pi pi-calendar"></i>
|
|
<span>Calendar</span>
|
|
</button>
|
|
<button type="button" class="layout-topbar-action">
|
|
<i class="pi pi-inbox"></i>
|
|
<span>Messages</span>
|
|
</button>
|
|
<button type="button" class="layout-topbar-action">
|
|
<i class="pi pi-user"></i>
|
|
<span>Profile</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</template>
|