Adjustments for navbar + theme toggler icon

src/App.vue

@@ -457,7 +457,7 @@ export default {
     return {
       showHeaderText: false,
       showNav: true,
-      showGoToTop: true,
+      showGoToTop: false,
       revealFaq: false,
       theme: localStorage.getItem('theme') || 'dark',
       faqItems: [
@@ -562,13 +562,11 @@ export default {
         this.$refs.header.$el.style.position = 'sticky'
         this.$refs.header.$el.style.position = '-webkit-sticky'
         document.querySelector('body').style.paddingTop = 0
-        this.showGoToTop = true
       } else {
         document.querySelector('body').style.paddingTop = headerHeight + 'px'
         this.$refs.header.$el.style.webkitPosition = 'absolute'
         this.$refs.header.$el.style.position = 'absolute'
         this.$refs.header.$el.style.top = 0
-        this.showGoToTop = false
       }
     },
     calculateHeaderText () {
@@ -580,8 +578,10 @@ export default {
       const triggerHeight = headerHeight - navBarHeight
       if (top > triggerHeight) {
         this.showHeaderText = false
+        this.showGoToTop = true
       } else {
         this.showHeaderText = true
+        this.showGoToTop = false
       }
 
       const hideStart = mainTitle.getBoundingClientRect().top + margin

src/components/NavBar.vue

@@ -5,8 +5,8 @@
       class="navbar"
     >
       <a
-        v-show="showGoToTop"
         v-scroll-to="'#app'"
+        :class="{ 'collapsed': !showGoToTop }"
         href="#"
       >
         <i class="el-icon-arrow-up" /></a>
@@ -188,17 +188,24 @@ export default {
     text-align: center;
     a {
       flex: 1;
+      min-width: 100px;
       padding: calc(12px + 0.7vw) 0;
       color: var(--color-text-primary);
       text-decoration: none;
+      transition: all 1s;
       &:hover {
         font-style: italic;
       }
+      &.collapsed {
+        flex: 0;
+        min-width: 0;
+        opacity: 0;
+      }
     }
     .themeIcon {
       display: flex;
       justify-content: center;
-      padding: 0.7vw 0;
+      padding: calc(0.9% - 2px) 0;
       transform: scale(0.5);
       .theme {
         text-align: center;