mirror of
https://github.com/KevinMidboe/seasoned.git
synced 2026-03-10 11:29:07 +00:00
Kevin
c8262a3bda
* Expand SCSS variables for improved theming * Redesign 404 page with dynamic movie quotes * Add password generator page * Add missing Plex authentication page * Improve torrent table and torrents page * Enhance toast notification component * Enhance popup components * Refine UI components and remove DarkmodeToggle * Add user profile component for settings * Update autocomplete dropdown component * Update register page * Redesign signin and register pages with improved UX * Improve torrent table with sort toggle and highlight colors * eslint & prettier fixes
74 lines
1.7 KiB
Vue
74 lines
1.7 KiB
Vue
<template>
|
|
<div id="content">
|
|
<!-- Header and hamburger navigation -->
|
|
<NavigationHeader class="header" />
|
|
|
|
<div class="navigation-icons-gutter desktop-only">
|
|
<NavigationIcons />
|
|
</div>
|
|
|
|
<!-- Display the component assigned to the given route (default: home) -->
|
|
<router-view :key="router.currentRoute.value.path" class="content" />
|
|
|
|
<!-- Popup that will show above existing rendered content -->
|
|
<popup />
|
|
|
|
<!-- Command Palette for quick navigation -->
|
|
<command-palette />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useRouter } from "vue-router";
|
|
import NavigationHeader from "@/components/header/NavigationHeader.vue";
|
|
import NavigationIcons from "@/components/header/NavigationIcons.vue";
|
|
import Popup from "@/components/Popup.vue";
|
|
import CommandPalette from "@/components/ui/CommandPalette.vue";
|
|
|
|
const router = useRouter();
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import "scss/main";
|
|
@import "scss/media-queries";
|
|
|
|
#content {
|
|
display: grid;
|
|
grid-template-rows: var(--header-size);
|
|
grid-template-columns: var(--header-size) 100%;
|
|
|
|
@include mobile {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.header {
|
|
position: fixed;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 15;
|
|
}
|
|
|
|
.navigation-icons-gutter {
|
|
position: fixed;
|
|
height: 100vh;
|
|
margin: 0;
|
|
top: var(--header-size);
|
|
width: var(--header-size);
|
|
background-color: var(--background-color-secondary);
|
|
}
|
|
|
|
.content {
|
|
display: grid;
|
|
grid-column: 2 / 3;
|
|
width: calc(100% - var(--header-size));
|
|
grid-row: 2;
|
|
z-index: 5;
|
|
|
|
@include mobile {
|
|
grid-column: 1 / 3;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|