Optimize sidebar-panel animation

layout/_macro/sidebar.njk

@@ -6,14 +6,14 @@
   </div>
 
   <aside class="sidebar">
-    <div class="sidebar-inner">
+    {%- set display_toc = page.toc.enable and display_toc %}
-      {%- set display_toc = page.toc.enable and display_toc %}
+    {%- if display_toc %}
-      {%- if display_toc %}
+      {%- set toc = toc(page.content, { class: "nav", list_number: page.toc.number, max_depth: page.toc.max_depth }) %}
-        {%- set toc = toc(page.content, { class: "nav", list_number: page.toc.number, max_depth: page.toc.max_depth }) %}
+      {%- set display_toc = toc.length > 1 and display_toc %}
-        {%- set display_toc = toc.length > 1 and display_toc %}
+    {%- endif %}
-      {%- endif %}
 
-      <ul class="sidebar-nav motion-element">
+    <div class="sidebar-inner {% if display_toc %}sidebar-nav-active sidebar-toc-active{% else %}sidebar-overview-active{% endif %}">
+      <ul class="sidebar-nav">
         <li class="sidebar-nav-toc">
           {{ __('sidebar.toc') }}
         </li>
@@ -23,18 +23,18 @@
       </ul>
 
       <!--noindex-->
-      <div class="post-toc-wrap sidebar-panel">
+      <section class="post-toc-wrap sidebar-panel">
         {%- if display_toc %}
           <div class="post-toc motion-element">{{ toc }}</div>
         {%- endif %}
-      </div>
+      </section>
       <!--/noindex-->
 
-      <div class="site-overview-wrap sidebar-panel">
+      <section class="site-overview-wrap sidebar-panel">
         {{ partial('_partials/sidebar/site-overview.njk', {}, {cache: theme.cache.enable}) }}
 
         {{- next_inject('sidebar') }}
-      </div>
+      </section>
 
       {%- if theme.back2top.enable and theme.back2top.sidebar %}
         <div class="back-to-top motion-element">

layout/_scripts/pjax.njk

@@ -8,9 +8,6 @@ var pjax = new Pjax({
     '.languages',
     '#pjax'
   ],
-  switches: {
-    '.post-toc-wrap': Pjax.switches.innerHTML
-  },
   analytics: false,
   cacheBust: false,
   scrollTo : !CONFIG.bookmark.enable
@@ -27,6 +24,13 @@ document.addEventListener('pjax:success', () => {
       .add(NexT.motion.middleWares.postList)
       .bootstrap();
   }
+  const hasTOC = document.querySelector('.post-toc');
+  document.querySelector('.sidebar-inner').classList.toggle('sidebar-nav-active', hasTOC);
+  if (hasTOC) {
+    document.querySelector('.sidebar-nav-toc').click();
+  } else {
+    document.querySelector('.sidebar-nav-overview').click();
+  }
   NexT.utils.updateSidebarPosition();
 });
 </script>

source/css/_common/outline/sidebar/sidebar-nav.styl

@@ -1,9 +1,14 @@
 // Sidebar Navigation
 .sidebar-nav {
+  display: none;
   margin: 0;
   padding-bottom: 20px;
   padding-left: 0;
 
+  .sidebar-nav-active & {
+    display: block;
+  }
+
   li {
     border-bottom: 1px solid transparent;
     color: $sidebar-nav-color;
@@ -19,14 +24,14 @@
       color: $sidebar-nav-hover-color;
     }
   }
+}
 
-  .sidebar-nav-active {
+.sidebar-toc-active .sidebar-nav-toc, .sidebar-overview-active .sidebar-nav-overview {
-    border-bottom-color: $sidebar-highlight;
+  border-bottom-color: $sidebar-highlight;
+  color: $sidebar-highlight;
+
+  &:hover {
     color: $sidebar-highlight;
-
-    &:hover {
-      color: $sidebar-highlight;
-    }
   }
 }
 
@@ -37,6 +42,6 @@
   overflow-y: auto;
 }
 
-.sidebar-panel-active {
+.sidebar-toc-active .post-toc-wrap, .sidebar-overview-active .site-overview-wrap {
   display: block;
 }

source/js/next-boot.js

@@ -30,35 +30,29 @@ NexT.boot.registerEvents = function() {
   document.querySelectorAll('.sidebar-nav li').forEach((element, index) => {
     element.addEventListener('click', event => {
       const item = event.currentTarget;
-      const activeTabClassName = 'sidebar-nav-active';
+      if (item.matches('.sidebar-toc-active .sidebar-nav-toc, .sidebar-overview-active .sidebar-nav-overview')) return;
-      const activePanelClassName = 'sidebar-panel-active';
+      const sidebar = document.querySelector('.sidebar-inner');
-      if (item.classList.contains(activeTabClassName)) return;
+      const panel = document.querySelectorAll('.sidebar-panel');
+      const activeClassName = ['sidebar-toc-active', 'sidebar-overview-active'];
 
-      const targets = document.querySelectorAll('.sidebar-panel');
-      const target = targets[index];
-      const currentTarget = targets[1 - index];
       window.anime({
-        targets : currentTarget,
+        targets : panel[1 - index],
         duration: TAB_ANIMATE_DURATION,
         easing  : 'linear',
         opacity : 0,
         complete: () => {
           // Prevent adding TOC to Overview if Overview was selected when close & open sidebar.
-          currentTarget.classList.remove(activePanelClassName);
+          sidebar.classList.remove(activeClassName[1 - index]);
-          target.style.opacity = 0;
+          panel[index].style.opacity = 0;
-          target.classList.add(activePanelClassName);
+          sidebar.classList.add(activeClassName[index]);
           window.anime({
-            targets : target,
+            targets : panel[index],
             duration: TAB_ANIMATE_DURATION,
             easing  : 'linear',
             opacity : 1
           });
         }
       });
-
-      [...item.parentNode.children].forEach(element => {
-        element.classList.toggle(activeTabClassName, element === item);
-      });
     });
   });
 

source/js/utils.js

@@ -298,20 +298,10 @@ NexT.utils = {
   },
 
   updateSidebarPosition: function() {
-    const sidebarNav = document.querySelector('.sidebar-nav');
-    const hasTOC = document.querySelector('.post-toc');
-    if (hasTOC) {
-      sidebarNav.style.display = '';
-      sidebarNav.classList.add('motion-element');
-      document.querySelector('.sidebar-nav-toc').click();
-    } else {
-      sidebarNav.style.display = 'none';
-      sidebarNav.classList.remove('motion-element');
-      document.querySelector('.sidebar-nav-overview').click();
-    }
     NexT.utils.initSidebarDimension();
     if (window.screen.width < 992 || CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') return;
     // Expand sidebar on post detail page by default, when post has a toc.
+    const hasTOC = document.querySelector('.post-toc');
     let display = CONFIG.page.sidebar;
     if (typeof display !== 'boolean') {
       // There's no definition sidebar in the page front-matter.