feat: add navbar-content class to separate styles

WRXinYue · Jan 24, 2025 · a508603 · a508603
1 parent 11d8e18
commit a508603
Showing 1 changed file with 42 additions and 51 deletions.
diff --git a/theme/components/SakuraNavbar.vue b/theme/components/SakuraNavbar.vue
@@ -41,63 +41,54 @@ const isHeaderHighlighted = computed(() => {
 
 <template>
   <!-- NOTE: Dynamic :class switching affects triggering the component loader for some reason, not sure why. -->
-  <header
-    class="sakura-navbar" :class="{ 'active-header': isHeaderHighlighted, 'has-scrolled': isScrolled, 'no-animation': noAnimation }"
-    @mouseover="hoverNavbar = true" @mouseleave="hoverNavbar = false"
-  >
-    <slot name="brand">
-      <div class="flex items-center">
-        <template v-if="themeConfig.sidebarOptions?.position === 'left'">
-          <div class="flex-center" :class="!themeConfig.sidebarOptions.enableOnDesktop && 'md:hidden'">
-            <template v-if="themeConfig.navbarOptions.hamburgerStyle === 'old'">
-              <SakuraHamburgerOld class="mr-4" :active="sakuraAppStore.sidebar.isOpen" @click="sakuraAppStore.sidebar.toggle" />
-            </template>
-            <template v-if="themeConfig.navbarOptions.hamburgerStyle === 'uneven'">
-              <SakuraHamburgerUneven class="mr-4" :active="sakuraAppStore.sidebar.isOpen" @click="sakuraAppStore.sidebar.toggle" />
-            </template>
-          </div>
-        </template>
-
-        <SakuraNavbarBrand :favicon :title :sub-title />
-      </div>
-    </slot>
-
-    <slot name="link">
-      <SakuraNavbarLink :class="autoHide && (isHeaderHighlighted ? animIn : animOut)" :navbar :show-marker />
-    </slot>
-
-    <slot name="tool">
-      <div h-full print:op0 flex="~ center" class="sakura-navbar-tools">
-        <SakuraToggleDark v-if="navbarOptions.tools.includes('toggleDark')" />
-        <SakuraToggleLocale v-if="navbarOptions.tools.includes('toggleLocale')" />
-        <SakuraSearchTrigger v-if="navbarOptions.tools.includes('search')" />
-        <div v-if="themeConfig.sidebarOptions?.position === 'right'" i-ri-menu-4-fill @click="sakuraAppStore.sidebar.toggle" />
-        <slot name="tool-ext" />
-      </div>
-    </slot>
+  <header flex="~" w="full" fixed top-0 z-100 class="sakura-navbar" @mouseover="hoverNavbar = true" @mouseleave="hoverNavbar = false">
+    <div class="navbar-content sakura-safe-padding" flex="~ items-center justify-between" w="full" :class="{ 'active-header': isHeaderHighlighted, 'has-scrolled': isScrolled, 'no-animation': noAnimation }">
+      <slot name="brand">
+        <div flex="~ items-center">
+          <template v-if="themeConfig.sidebarOptions?.position === 'left'">
+            <div class="flex-center" :class="!themeConfig.sidebarOptions.enableOnDesktop && 'md:hidden'">
+              <template v-if="themeConfig.navbarOptions.hamburgerStyle === 'old'">
+                <SakuraHamburgerOld class="mr-4" :active="sakuraAppStore.sidebar.isOpen" @click="sakuraAppStore.sidebar.toggle" />
+              </template>
+              <template v-if="themeConfig.navbarOptions.hamburgerStyle === 'uneven'">
+                <SakuraHamburgerUneven class="mr-4" :active="sakuraAppStore.sidebar.isOpen" @click="sakuraAppStore.sidebar.toggle" />
+              </template>
+            </div>
+          </template>
+
+          <SakuraNavbarBrand :favicon :title :sub-title />
+        </div>
+      </slot>
+
+      <slot name="link">
+        <SakuraNavbarLink :class="autoHide && (isHeaderHighlighted ? animIn : animOut)" :navbar :show-marker />
+      </slot>
+
+      <slot name="tool">
+        <div h-full print:op0 flex="~ center" class="sakura-navbar-tools">
+          <SakuraToggleDark v-if="navbarOptions.tools.includes('toggleDark')" />
+          <SakuraToggleLocale v-if="navbarOptions.tools.includes('toggleLocale')" />
+          <SakuraSearchTrigger v-if="navbarOptions.tools.includes('search')" />
+          <div v-if="themeConfig.sidebarOptions?.position === 'right'" i-ri-menu-4-fill @click="sakuraAppStore.sidebar.toggle" />
+          <slot name="tool-ext" />
+        </div>
+      </slot>
+    </div>
   </header>
 </template>
 
 <style lang="scss">
 .sakura-navbar {
-  position: fixed;
-  z-index: 100;
-  height: var(--sakura-navbar-height);
-  color: var(--sakura-color-navigation);
-  width: 100%;
-  top: 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  transition: all 0.4s ease !important;
-  padding-left: max(40px, env(safe-area-inset-left));
-  padding-right: max(40px, env(safe-area-inset-right));
+  .navbar-content {
+    height: var(--sakura-navbar-height);
+    transition: all var(--va-transition-duration) ease;
 
-  &.active-header {
-    background: var(--sakura-navbar-bg);
+    &.active-header {
+      background: var(--sakura-navbar-bg);
 
-    &.has-scrolled {
-      box-shadow: 0 1px 40px -8px oklch(0% 0 0 / 50%);
+      &.has-scrolled {
+        box-shadow: 0 1px 40px -8px oklch(0% 0 0 / 50%);
+      }
     }
   }
 
@@ -128,7 +119,7 @@ const isHeaderHighlighted = computed(() => {
   }
 }
 
-// TODO:
+// TODO: optimize
 .has-home-layout .sakura-navbar {
   &.active-header {
     box-shadow: 0 1px 40px -8px oklch(0% 0 0 / 50%);