fix: color style for header when switching mode and sticky issue

resolve auroral-ui#321 auroral-ui#319
Ryaang · Aug 21, 2023 · e1f9075 · e1f9075
1 parent 425ec7c
commit e1f9075
Show file tree

Hide file tree

Showing 10 changed files with 191 additions and 134 deletions.
diff --git a/src/components/Dropdown/src/DropdownItem.vue b/src/components/Dropdown/src/DropdownItem.vue
@@ -25,7 +25,7 @@ export default defineComponent({
       handleClick,
       itemClasses: computed(() => {
         return {
-          'block cursor-pointer hover:bg-ob-trans my-1 px-4 py-1 font-medium hover:text-ob-bright':
+          'text-ob-bright block cursor-pointer hover:bg-ob-trans my-1 px-4 py-1 font-medium text-invert hover:text-ob-bright':
             true,
           active: !!props.active
         }

diff --git a/src/components/Header/src/Controls.vue b/src/components/Header/src/Controls.vue
@@ -1,12 +1,12 @@
 <template>
   <div
-    class="header-controls ml-auto top-0 right-0 flex flex-row items-center text-white invert-text"
+    class="header-controls ml-auto top-0 right-0 flex flex-row items-center text-white"
     @keydown.k="handleOpenModal(true)"
     tabindex="0"
   >
     <div :class="leftControlClasses">
       <span
-        class="icon-control flex items-center"
+        class="icon-control flex items-center text-invert"
         data-dia="search"
         @click="handleOpenModal(true)"
       >
@@ -23,7 +23,10 @@
         @command="handleClick"
         :value="currentLocale"
       >
-        <span class="icon-control flex items-center" data-dia="language">
+        <span
+          class="icon-control flex items-center text-invert"
+          data-dia="language"
+        >
           <SvgIcon
             icon-class="translate"
             fill="currentColor"

diff --git a/src/components/Header/src/Header.vue b/src/components/Header/src/Header.vue
@@ -17,9 +17,17 @@
 </template>
 
 <script lang="ts">
+/**
+ * Lodash package is imported through CDN.
+ *
+ * For version 4.17.21
+ */
+declare const _: any
+
 import { computed, defineComponent, onMounted, onUnmounted, ref } from 'vue'
 import { Logo, Navigation, Controls, Notification } from '../index'
 import Sticky from '@/components/Sticky.vue'
+import { useNavigatorStore } from '@/stores/navigator'
 
 export default defineComponent({
   name: 'Header',
@@ -34,44 +42,20 @@ export default defineComponent({
     msg: String
   },
   setup() {
+    const navigatorStore = useNavigatorStore()
     const active = ref<boolean>(false)
-    const progress = ref(0)
-    let scrollingHandler = 0
 
     const handleActiveState = (value: boolean) => {
       active.value = value
     }
 
-    const scrollHandler = () => {
-      clearTimeout(scrollingHandler)
-
-      setTimeout(() => {
-        progress.value = Number(
-          (
-            (window.scrollY /
-              (document.documentElement.scrollHeight - window.innerHeight)) *
-            100
-          ).toFixed(0)
-        )
-      }, 0)
-    }
-
-    onMounted(() => {
-      document.addEventListener('scroll', scrollHandler)
-    })
-
-    onUnmounted(() => {
-      document.removeEventListener('scroll', scrollHandler)
-    })
-
     return {
       containerClasses: computed(() => ({
         'header-container': true,
         'header-active': active.value
       })),
+      progress: computed(() => navigatorStore.progress),
       handleActiveState,
-      scrollHandler,
-      progress,
       active
     }
   }
@@ -83,19 +67,16 @@ export default defineComponent({
   &.header-active {
     @apply bg-ob-deep-800 shadow-xl text-ob-bright;
   }
-  transition: 0.6s all ease;
+  transition: 0.5s all ease;
   .site-header {
     @apply relative flex z-50 py-4;
     margin: 0 auto;
   }
 }
 
 .header-active {
-  .logo-image {
-    @apply scale-125;
-  }
-  .invert-text {
-    @apply text-ob-bright;
+  .text-invert {
+    @apply text-ob-bright hover:opacity-60;
   }
 }
 </style>
diff --git a/src/components/Header/src/Logo.vue b/src/components/Header/src/Logo.vue
@@ -15,19 +15,19 @@
 
     <div class="flex flex-col justify-center">
       <span
-        class="invert-text flex text-xl leading-tight text-white font-extrabold"
+        class="text-invert flex text-xl leading-tight text-white font-extrabold"
         v-if="themeConfig.site.author"
       >
         {{ themeConfig.site.author }}
       </span>
       <span
         v-else
-        class="invert-text flex text-xl leading-tight text-white font-extrabold"
+        class="text-invert flex text-xl leading-tight text-white font-extrabold"
       >
         LOADING
       </span>
       <span
-        class="invert-text font-extrabold text-[0.45rem] leading-tight uppercase text-white"
+        class="text-invert font-extrabold text-[0.45rem] leading-tight uppercase text-white"
       >
         {{ themeConfig.site.nick || 'BLOG' }}
       </span>
@@ -58,7 +58,7 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .header-logo {
   &:hover .logo-image {
     @apply scale-125;
@@ -69,4 +69,10 @@ export default defineComponent({
   @apply w-8 h-8;
   transition: 0.3s all ease;
 }
+
+.header-active {
+  .logo-image {
+    @apply scale-125;
+  }
+}
 </style>
diff --git a/src/components/Header/src/Navigation.vue b/src/components/Header/src/Navigation.vue
@@ -1,15 +1,13 @@
 <template>
   <nav class="items-center flex-1 hidden lg:flex">
-    <ul
-      class="flex flex-row items-center list-none px-6 text-white invert-text"
-    >
+    <ul class="flex flex-row items-center list-none px-6 text-white">
       <li
         class="not-italic font-medium text-xs h-full relative flex flex-col items-center justify-center cursor-pointer text-center py-2 px-2"
         v-for="route in routes"
         :key="route.path"
       >
         <div
-          class="nav-link invert-text text-sm block px-1.5 py-0.5 rounded-md relative uppercase cursor-pointer"
+          class="nav-link text-sm block px-1.5 py-0.5 rounded-md relative uppercase cursor-pointer"
           @click="pushPage(route.path)"
           v-if="route.children && route.children.length === 0"
           :data-menu="route.name"
@@ -111,21 +109,32 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .nav-link {
-  @apply hover:text-ob-bright font-extrabold;
+  @apply hover:text-white font-extrabold;
   &:hover {
     &:before {
       @apply opacity-60 bg-gray-800;
     }
   }
   &:before {
-    @apply absolute rounded-lg opacity-0 transition bg-ob-deep-800 z-40;
+    @apply absolute rounded-lg opacity-0 bg-transparent transition z-40;
     content: '';
     top: -4px;
     left: -4px;
     width: calc(100% + 8px);
     height: calc(100% + 8px);
   }
 }
+
+.header-active {
+  .nav-link {
+    @apply text-ob-bright;
+    &:hover {
+      &:before {
+        @apply bg-ob-trans;
+      }
+    }
+  }
+}
 </style>
diff --git a/src/components/Navigator.vue b/src/components/Navigator.vue
@@ -94,6 +94,13 @@
 </template>
 
 <script lang="ts">
+/**
+ * Lodash package is imported through CDN.
+ *
+ * For version 4.17.21
+ */
+declare const _: any
+
 import { useAppStore } from '@/stores/app'
 import { computed, defineComponent, onMounted, onUnmounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -122,35 +129,37 @@ export default defineComponent({
     let menuReopenHandler = 0
     let needReopen = ref(false)
 
-    const scrollHandler = () => {
-      clearTimeout(scrollingHandler)
-      clearTimeout(menuReopenHandler)
-
-      scrolling.value = true
-      scrollingHandler = window.setTimeout(() => {
-        scrolling.value = false
-      }, 700)
+    const scrollHandler = _.throttle(
+      () => {
+        clearTimeout(scrollingHandler)
+        clearTimeout(menuReopenHandler)
 
-      if (needReopen.value || navigatorStore.openNavigator === true) {
-        if (navigatorStore.openNavigator === true)
-          navigatorStore.setOpenNavigator(false)
-        needReopen.value = true
-        menuReopenHandler = window.setTimeout(() => {
-          navigatorStore.openNavigator = true
-          needReopen.value = false
+        scrolling.value = true
+        scrollingHandler = window.setTimeout(() => {
+          scrolling.value = false
         }, 700)
-      }
 
-      setTimeout(() => {
+        if (needReopen.value || navigatorStore.openNavigator === true) {
+          if (navigatorStore.openNavigator === true)
+            navigatorStore.setOpenNavigator(false)
+          needReopen.value = true
+          menuReopenHandler = window.setTimeout(() => {
+            navigatorStore.openNavigator = true
+            needReopen.value = false
+          }, 700)
+        }
+
         progress.value = Number(
           (
             (window.scrollY /
               (document.documentElement.scrollHeight - window.innerHeight)) *
             100
           ).toFixed(0)
         )
-      }, 0)
-    }
+      },
+      100,
+      { trailing: true, leading: true }
+    )
 
     const handleNavigatorToggle = () => {
       const timeNow = new Date().getTime()
@@ -188,6 +197,7 @@ export default defineComponent({
     }
 
     onMounted(() => {
+      scrollHandler()
       document.addEventListener('scroll', scrollHandler)
     })
 

diff --git a/src/components/ProgressBar.vue b/src/components/ProgressBar.vue
@@ -7,22 +7,33 @@
 </template>
 
 <script lang="ts">
+/**
+ * Lodash package is imported through CDN.
+ *
+ * For version 4.17.21
+ */
+declare const _: any
+
 import { computed, defineComponent, onMounted, onUnmounted, ref } from 'vue'
 
 export default defineComponent({
   name: 'ObProgressBar',
   setup() {
     const progress = ref(0)
 
-    const scrollHandler = () =>
-      setTimeout(() => {
+    const scrollHandler = _.throttle(
+      () => {
         progress.value =
-          (window.pageYOffset /
+          (window.scrollY /
             (document.documentElement.scrollHeight - window.innerHeight)) *
           100
-      }, 16)
+      },
+      100,
+      { trailing: true, leading: true }
+    )
 
     onMounted(() => {
+      scrollHandler()
       document.addEventListener('scroll', scrollHandler)
     })