fix(docs): Fixed the navbar.

Author: Skyost

docs/components/BonsoirHeader.vue

@@ -46,10 +46,10 @@ const theme = useTheme()
       text-align: center;
 
       .hand {
-        @include wave-animation();
+        @include wave-animation;
       }
 
-      &:before {
+      &::before {
         animation: fade-in-animation;
         animation-delay: 1s;
         animation-duration: 1s;
@@ -64,7 +64,7 @@ const theme = useTheme()
         background-repeat: no-repeat;
       }
 
-      &.theme-dark:before {
+      &.theme-dark::before {
         filter: hue-rotate(225deg);
       }
     }
@@ -75,6 +75,7 @@ const theme = useTheme()
   0% {
     opacity: 0;
   }
+
   100% {
     opacity: 1;
   }

docs/components/Page/PageNavbar.vue

@@ -9,6 +9,7 @@ const theme = useTheme()
     v-b-color-mode="theme"
     class="navbar"
     :data-bs-theme="theme"
+    toggleable="lg"
   >
     <b-navbar-brand
       class="brand"
@@ -58,14 +59,15 @@ const theme = useTheme()
 </template>
 
 <style lang="scss" scoped>
+@import 'assets/bootstrap-mixins';
 @import 'assets/colors';
 @import 'assets/wave';
 
 .navbar {
   &.navbar-dark {
     background-color: $body-dark !important;
 
-    .brand:before {
+    .brand::before {
       filter: hue-rotate(225deg);
     }
   }
@@ -81,7 +83,7 @@ const theme = useTheme()
       vertical-align: sub;
     }
 
-    &:before {
+    &::before {
       position: absolute;
       top: 0.62em;
       left: 0;
@@ -93,7 +95,11 @@ const theme = useTheme()
     }
 
     &:hover .logo {
-      @include wave-animation();
+      @include wave-animation;
+    }
+
+    @include media-breakpoint-down(lg) {
+      margin-right: 0;
     }
   }
 }