fix header to top

components/navigation/Bar.vue

 <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;
 

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