SebinNyshkim/viktor-reference
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: remove HeaderBar component

Browse source
This commit is contained in:
Sebin Nyshkim 2022-09-29 02:18:19 +02:00
parent 9fe918136c
commit c68c432c8f
2 changed files with 1 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/App.vue
View file

@ -1,32 +1,10 @@
<script setup lang="ts">
import { reactive } from "vue";
import { RouterView } from "vue-router";
import SiteNavigation from "@/components/SiteNavigation.vue";
import NavToggle from "@/components/NavToggle.vue";
import HeaderBar from "@/components/HeaderBar.vue";
interface State {
navActive: boolean;
}
const state: State = reactive({
navActive: false,
});
const toggleNav = (): void => {
state.navActive = !state.navActive;
document.body.classList.toggle("scroll-lock");
};
</script>
<template>
<SiteNavigation :isActive="state.navActive" @selected="toggleNav" />
<HeaderBar>
<NavToggle @click.prevent="toggleNav" />
<template #heading>{{ $route.meta.title }}</template>
</HeaderBar>
<SiteNavigation />
<main>
<RouterView />

30
src/components/HeaderBar.vue
View file

@ -1,30 +0,0 @@
<template>
<header class="header-bar">
<slot></slot>
<h1 class="header-bar__title">
<slot name="heading"></slot>
</h1>
</header>
</template>
<style lang="scss">
.header-bar {
display: flex;
flex-flow: row nowrap;
justify-content: stretch;
align-items: center;
position: sticky;
top: 0;
z-index: 1;
background-color: var(--color-header-bar);
backdrop-filter: blur(0.5rem);
&__title {
color: var(--color-header-bar-title);
margin: 0;
}
}
</style>