From 91fa81a60fba96e0ab3092543ace6d0a3791ebce Mon Sep 17 00:00:00 2001
From: paidge <paidge_cs@hotmail.com>
Date: Thu, 30 Dec 2021 05:13:39 +0100
Subject: [PATCH] fix header to top
---
components/navigation/Bar.vue | 14 +++++++++++++-
layouts/default.vue | 3 +++
2 files changed, 16 insertions(+), 1 deletion(-)
diff --git a/components/navigation/Bar.vue b/components/navigation/Bar.vue
index 7016db3..eb3fe5f 100644
--- a/components/navigation/Bar.vue
+++ b/components/navigation/Bar.vue
@@ -1,5 +1,5 @@
<template>
- <header>
+ <header class="header position-fixed">
<div class="position-relative">
<button class="toggle btn border-secondary position-absolute p-1 m-1 ml-3" @click="toggleMenu"><span></span></button>
<NavigationBreadcrumb :breadcrumb="breadcrumb" class="breadcrumb p-1" />
@@ -26,6 +26,18 @@ export default {
<style lang="scss">
$btn-width: 50px;
+.header {
+ --menu-width: 0px;
+ width: calc(99vw - var(--menu-width));
+ z-index: 100;
+ background: var(--background-color-primary);
+ transition: width .5s ease-in-out;
+
+ .open & {
+ --menu-width: 320px;
+ }
+}
+
nav.breadcrumb {
margin: .5rem .5rem .5rem 5rem;
diff --git a/layouts/default.vue b/layouts/default.vue
index c8745e7..906f4fc 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -56,4 +56,7 @@ export default {
.app {
transition: margin .5s ease-in-out;
}
+main {
+ padding-top: 5rem;
+}
</style>
\ No newline at end of file
--
GitLab