style(menu): add highlight to menu button when sidebar is active

And:
- avoid unexpected behaviors of CSS pseudo class :hover in mobile device
- make initScroll() a function

src/js/initSidebar.js

@@ -1,27 +1,33 @@
 import Sidebar from './sidebar'
 import InitSidebarLink from './tag'
 
-// init sidebar
-const sidebar = new Sidebar({
-  sidebar: '.sidebar',
-  nav: '.sidebar-tabs',
-  tabs: '.sidebar-tabs li',
-  content: '.sidebar-content',
-  panels: '.sideabar-contents > div',
-  menuButton: '.header-sidebar-menu',
-})
+const initSidebar = () => {
+  // create sidebar object
+  const sidebar = new Sidebar({
+    sidebar: '.sidebar',
+    nav: '.sidebar-tabs',
+    tabs: '.sidebar-tabs li',
+    content: '.sidebar-content',
+    panels: '.sideabar-contents > div',
+    menuButton: '.header-sidebar-menu',
+  })
 
-// init sidebar link
-const metas = new InitSidebarLink(sidebar)
-metas.addTab({
-  metaName: 'tags',
-  labelsContainer: '.sidebar-tags-name',
-  postsContainer: '.sidebar-tags-list',
-})
-metas.addTab({
-  metaName: 'categories',
-  labelsContainer: '.sidebar-categories-name',
-  postsContainer: '.sidebar-categories-list',
-})
+  // create sidebar metas object
+  const metas = new InitSidebarLink(sidebar)
 
-export default { sidebar, metas }
+  // add tabs to sidebar metas
+  metas.addTab({
+    metaName: 'tags',
+    labelsContainer: '.sidebar-tags-name',
+    postsContainer: '.sidebar-tags-list',
+  })
+  metas.addTab({
+    metaName: 'categories',
+    labelsContainer: '.sidebar-categories-name',
+    postsContainer: '.sidebar-categories-list',
+  })
+
+  return { sidebar, metas }
+}
+
+export default initSidebar

src/js/main.js

@@ -1,10 +1,11 @@
 import Package from '../../package.json'
 
 import init from './init'
+import initMobile from './mobile'
 import initTheme from './theme'
-import initScroll from './scroll'
 import initImage from './image'
-import './initSidebar'
+import initScroll from './scroll'
+import initSidebar from './initSidebar'
 
 // print console info
 const logStyle =
@@ -17,6 +18,12 @@ console.info(`%c 📦 ${Package.homepage} `, logStyle)
 // site base
 init()
 
+// optimizations for mobile device
+initMobile()
+
+// sidebar
+initSidebar()
+
 // theme
 initTheme()
 

src/js/mobile.js

@@ -26,17 +26,18 @@ const initMobile = function () {
   }
 
   function mediaChangeHandler(mql) {
+    window.removeEventListener('touchstart', onTouchStart)
+
     if (mql.matches) {
-      console.log('mobile')
-      // TODO: why
-      mobilePreventScrollBreakdown()
-      // document.body.addEventListener('touchstart', function () {})
-    } else {
-      console.log('desktop')
+      console.log('Initialize optimizations for mobile device')
+      // Notes: don't remove the `touchstart` listener below
+      window.addEventListener('touchstart', onTouchStart)
     }
   }
 
-  function mobilePreventScrollBreakdown() {}
+  function onTouchStart() {
+    // Simply do nothing to avoid unexpected behaviors of css pseudo class :hover
+  }
 }
 
-export { initMobile }
+export default initMobile

src/scss/_dark/_partial/_partial/_header-dark.scss

@@ -31,14 +31,16 @@ header {
 .header-sidebar-menu {
   border-color: $body-background-color;
   color: $body-background-color;
-  &:hover {
+  &:hover,
+  &.header-sidebar-menu-active {
     background-color: $body-background-color;
     color: #000;
   }
 }
 
 .header-sidebar-menu-rounded {
-  &:hover {
+  &:hover,
+  &.header-sidebar-menu-active {
     background-color: transparent;
     color: $feature-color-dark;
   }
@@ -48,7 +50,9 @@ header {
   color: $text-color-primary-dark;
   background-color: $body-background-color-dark;
   border-color: $text-color-primary-dark;
-  &:hover {
+
+  &:hover,
+  &.header-sidebar-menu-active {
     background-color: $text-color-primary-dark;
     color: $body-background-color-dark;
   }

src/scss/_partial/_partial/_header.scss

@@ -60,13 +60,18 @@ header {
   line-height: 1.5rem;
   z-index: 21;
   cursor: pointer;
-  &:hover {
+
+  &:hover,
+  &.header-sidebar-menu-active {
     background-color: $body-background-color;
     color: $body-background-color-dark;
-    transform: translate(0, -50%);
   }
 }
 
+.header-sidebar-menu-active {
+  transform: translate(0, -50%) rotate(180deg) !important;
+}
+
 .header-sidebar-menu-rounded {
   font-family: unset;
   transform: translate(0, -50%);
@@ -75,21 +80,21 @@ header {
   line-height: 2.7rem;
   border: unset;
   border-radius: 50%;
-  &:hover {
+
+  &:hover,
+  &.header-sidebar-menu-active {
     background-color: transparent;
     color: $feature-color;
   }
 }
 
-.header-sidebar-menu-active {
-  transform: translate(0, -50%) rotate(180deg) !important;
-}
-
 .header-sidebar-menu-black {
   color: $body-background-color-dark;
   background-color: $body-background-color;
   border-color: $body-background-color-dark;
-  &:hover {
+
+  &:hover,
+  &.header-sidebar-menu-active {
     background-color: $body-background-color-dark;
     color: $body-background-color;
   }