feat: upgrade both PC and mobile menu

src/App.vue

@@ -1,13 +1,13 @@
 <template>
   <div id="App-Wrapper" :class="[appWrapperClass, theme]" :style="wrapperStyle">
+    <HeaderMain />
     <div
       id="App-Container"
-      class="app-container max-w-10/12 lg:max-w-screen-2xl px-3 lg:px-8"
+      class="app-container lg:max-w-screen-2xl px-3 lg:px-8"
       @keydown.meta.k.stop.prevent="handleOpenModal"
       tabindex="-1"
       :style="cssVariables"
     >
-      <HeaderMain />
       <div class="app-banner app-banner-image" :style="headerImage" />
       <div class="app-banner app-banner-screen" :style="headerBaseBackground" />
       <div class="app-banner app-banner-cover" />
@@ -23,12 +23,10 @@
   </div>
   <FooterLink :links="themeConfig.footerLinks.data" />
   <Footer :style="cssVariables" />
-  <div class="App-Mobile-sidebar" v-if="isMobile">
-    <div id="App-Mobile-Profile" class="App-Mobile-wrapper">
-      <MobileMenu />
-    </div>
-  </div>
-  <Navigator />
+  <template v-if="isMobile" ref="mobileSidebar">
+    <MobileMenu />
+  </template>
+  <!-- <Navigator /> -->
   <Dia v-if="!isMobile && configReady" />
   <teleport to="head">
     <title>{{ title }}</title>
@@ -89,6 +87,7 @@ export default defineComponent({
     const searchStore = useSearchStore()
     const MOBILE_WITH = 996 // Using the mobile width by Bootstrap design.
     const { t } = useI18n()
+    const mobileSidebar = ref()
 
     const appWrapperClass = 'app-wrapper'
     const loadingBarClass = ref({
@@ -242,6 +241,7 @@ export default defineComponent({
       lightBoxVisible: computed(() => lightBoxStore.visible),
       lightBoxIndex: computed(() => lightBoxStore.index),
       lightBoxImages: computed(() => lightBoxStore.images),
+      mobileSidebar,
       appWrapperClass,
       loadingBarClass,
       handleOpenModal,
@@ -281,16 +281,6 @@ body {
     left: 0;
     z-index: 1;
   }
-
-  .App-Mobile-sidebar {
-    @apply fixed top-0 bottom-0 left-0;
-  }
-  .App-Mobile-wrapper {
-    @apply relative overflow-y-auto h-full -mr-4 pr-6 pl-4 pt-8 opacity-0;
-    transition: all 0.85s cubic-bezier(0, 1.8, 1, 1.2);
-    transform: translateY(-20%);
-    width: 280px;
-  }
 }
 
 .app-banner {

src/components/Comment.vue

@@ -4,6 +4,7 @@
   >
     <Title
       :title="'titles.comment'"
+      icon="quote"
       paddings="pb-2 pt-0"
       text-size="text-2xl md:text-3xl"
     />

src/components/Header/src/Controls.vue

@@ -1,62 +1,100 @@
 <template>
   <div
-    class="header-controls absolute top-10 right-0 flex flex-row"
+    class="header-controls ml-auto top-0 right-0 flex flex-row items-center text-white invert-text"
     @keydown.k="handleOpenModal(true)"
     tabindex="0"
   >
-    <span
-      class="ob-drop-shadow"
-      data-dia="search"
-      @click="handleOpenModal(true)"
-    >
-      <SvgIcon
-        icon-class="search"
-        stroke="var(--text-white)"
-        width="2rem"
-        height="2rem"
-      />
-    </span>
-    <Dropdown
-      v-if="enableMultiLanguage"
-      @command="handleClick"
-      :value="currentLocale"
-    >
-      <span class="ob-drop-shadow" data-dia="language">
+    <div :class="leftControlClasses">
+      <span
+        class="icon-control flex items-center"
+        data-dia="search"
+        @click="handleOpenModal(true)"
+      >
         <SvgIcon
-          icon-class="globe"
-          stroke="var(--text-white)"
-          width="2rem"
-          height="2rem"
+          icon-class="search"
+          fill="currentColor"
+          stroke="none"
+          width="1.2rem"
+          height="1.2rem"
         />
-        <span v-if="$i18n.locale == 'cn'">中文</span>
-        <span v-if="$i18n.locale == 'en'">EN</span>
       </span>
-      <DropdownMenu>
-        <DropdownItem name="en" :active="currentLocale === 'en'">
-          English
-        </DropdownItem>
-        <DropdownItem name="cn" :active="currentLocale === 'cn'">
-          中文
-        </DropdownItem>
-      </DropdownMenu>
-    </Dropdown>
-    <span no-hover-effect class="ob-drop-shadow" data-dia="light-switch">
-      <ThemeToggle />
-    </span>
+      <Dropdown
+        v-if="enableMultiLanguage"
+        @command="handleClick"
+        :value="currentLocale"
+      >
+        <span class="icon-control flex items-center" data-dia="language">
+          <SvgIcon
+            icon-class="translate"
+            fill="currentColor"
+            stroke="none"
+            width="1.2rem"
+            height="1.2rem"
+          />
+          <span v-if="$i18n.locale == 'cn'">中文</span>
+          <span v-if="$i18n.locale == 'en'">EN</span>
+        </span>
+        <DropdownMenu>
+          <DropdownItem name="en" :active="currentLocale === 'en'">
+            English
+          </DropdownItem>
+          <DropdownItem name="cn" :active="currentLocale === 'cn'">
+            中文
+          </DropdownItem>
+        </DropdownMenu>
+      </Dropdown>
+    </div>
+
+    <div class="right-control">
+      <div :class="progressBallClasses" @click="handleBackToTop">
+        <span>
+          <SvgIcon
+            icon-class="back-to-top"
+            stroke="var(--text-invert)"
+            width="1.1rem"
+            height="1.1rem"
+          />
+        </span>
+        {{ scrollProgress }}
+      </div>
+
+      <span
+        no-hover-effect
+        class="ob-drop-shadow hidden lg:flex"
+        data-dia="light-switch"
+      >
+        <ThemeToggle />
+      </span>
+
+      <span
+        class="icon-control flex md:hidden items-center"
+        data-dia="menu"
+        @click="handleOpenMenu()"
+      >
+        <SvgIcon
+          icon-class="hamburger"
+          fill="currentColor"
+          stroke="none"
+          width="1.2rem"
+          height="1.2rem"
+        />
+      </span>
+    </div>
   </div>
   <teleport to="body">
     <SearchModal />
   </teleport>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from 'vue'
+import { computed, defineComponent, toRefs } from 'vue'
 import { Dropdown, DropdownMenu, DropdownItem } from '@/components/Dropdown'
 import { useAppStore } from '@/stores/app'
 import ThemeToggle from '@/components/ToggleSwitch/ThemeToggle.vue'
 import SearchModal from '@/components/SearchModal.vue'
 import { useSearchStore } from '@/stores/search'
 import SvgIcon from '@/components/SvgIcon/index.vue'
+import { useNavigatorStore } from '@/stores/navigator'
 
 export default defineComponent({
   name: 'Controls',
@@ -68,9 +106,17 @@ export default defineComponent({
     SearchModal,
     SvgIcon
   },
-  setup() {
+  props: {
+    scrollProgress: {
+      type: Number,
+      default: 0
+    }
+  },
+  setup(props) {
     const appStore = useAppStore()
     const searchStore = useSearchStore()
+    const navigatorStore = useNavigatorStore()
+    const ballProgress = toRefs(props).scrollProgress
 
     const handleClick = (name: string): void => {
       appStore.changeLocale(name)
@@ -80,9 +126,31 @@ export default defineComponent({
       searchStore.setOpenModal(status)
     }
 
+    const handleOpenMenu = () => {
+      navigatorStore.toggleMobileMenu()
+    }
+
+    const handleBackToTop = () => {
+      window.scrollTo({
+        top: 0,
+        behavior: 'smooth'
+      })
+    }
+
     return {
+      handleBackToTop,
       handleOpenModal,
+      handleOpenMenu,
       handleClick,
+      progressBallClasses: computed(() => ({
+        'progress-ball': true,
+        'activated-ball': ballProgress.value > 0,
+        'reset-ball': ballProgress.value === 0
+      })),
+      leftControlClasses: computed(() => ({
+        'left-control': true,
+        'moved-right': ballProgress.value > 0
+      })),
       currentLocale: computed(() => appStore.locale),
       enableMultiLanguage: computed(
         () => appStore.themeConfig.site.multi_language
@@ -94,11 +162,56 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .header-controls {
+  .progress-ball {
+    @apply flex flex-col justify-center items-center bg-ob-bright text-ob-invert h-6 w-6 rounded-full mr-4 scale-0 transform-cpu text-xs cursor-pointer overflow-hidden;
+    transition: 0.3s transform ease;
+    &:hover span {
+      @apply mt-6 opacity-100;
+    }
+    span,
+    &.reset-ball span {
+      @apply pr-0 mb-2 -mt-7 opacity-0;
+      transition: 0.3s all ease;
+      .svg-icon {
+        @apply text-ob-invert mr-0;
+      }
+    }
+    &.activated-ball {
+      @apply scale-100;
+    }
+    &:hover {
+      @apply scale-150;
+    }
+    &.reset-ball {
+      @apply scale-0;
+    }
+  }
+
+  .left-control,
+  .right-control {
+    @apply flex justify-center items-center font-extrabold;
+  }
+  .left-control {
+    @apply -mr-10;
+    transition: 0.2s margin ease-out;
+    &.moved-right {
+      @apply -mr-0;
+    }
+  }
+  .icon-control {
+    span {
+      @apply -mr-10 opacity-0 w-10 pointer-events-none;
+      transition: 0.3s all ease;
+    }
+
+    &:hover span,
+    &:active span {
+      @apply mr-0 opacity-100 pointer-events-auto;
+    }
+  }
   span {
-    display: flex;
     justify-content: center;
     align-items: center;
-    color: #fff;
     cursor: pointer;
     transition: opacity 250ms ease;
     padding-right: 0.5rem;
@@ -107,11 +220,7 @@ export default defineComponent({
         opacity: 1;
       }
     }
-    &:hover {
-      opacity: 0.5;
-    }
     .svg-icon {
-      stroke: #fff;
       margin-right: 0.5rem;
       pointer-events: none;
     }