Added DarkMode/Language labels on mobile view

Author: Paulchen-Panther

docs/.vuepress/components/HyperionLogoDynamic.vue

@@ -27,7 +27,7 @@
       window.addEventListener('resize', this.onResize, { passive: true });
       this.lightMode.init();
 
-      // This check can be removed if multiple webkit masks are supported under  CSS in Safari
+      // This check can be removed if multiple webkit masks are supported under CSS in Safari
       const browser = Bowser.getParser(window.navigator.userAgent);
       this.isSafari = browser.satisfies({
         macos: {

docs/.vuepress/config.js

@@ -40,6 +40,7 @@ module.exports = {
     ['meta', { name: 'msapplication-TileImage', content: '/icons/ms-icon-144x144.png' }], // probably invert
     ['meta', { name: 'msapplication-TileColor', content: '#2b81a0' }] // might not match with icon
   ],
+  serviceWorker: true,
   dest: "./dist",
   title: "Hyperion",
   // removing this sections disables lang selector. But everything else works. Featue Request to merge with themeConfig.locales?
@@ -55,12 +56,6 @@ module.exports = {
     }
   },
   themeConfig: {
-    /*  algolia: {
-          apiKey: '<API_KEY>',
-          indexName: '<INDEX_NAME>'
-        },
-
-    */
     sidebarDepth: 3,
     smoothScroll: true,
     logoLightStatic: '/hyperion_logo_light_static.png',
@@ -119,7 +114,7 @@ module.exports = {
         nav: [
           // { text: 'Startseite', link: '/de/' },
           { text: 'Benutzer', link: '/de/user/' },
-          { text: 'Effects', link: '/de/effects/' },
+          { text: 'Effekte', link: '/de/effects/' },
           { text: 'Json API', link: '/de/json/' }
           // { text: 'Addons API', link: '/de/addons/' }
         ],

docs/.vuepress/theme/components/DropdownLink.vue

@@ -1,10 +1,11 @@
 <template>
   <div class="dropdown-wrapper" :class="{ open }">
-    <button class="dropdown-title" type="button" :aria-label="dropdownAriaLabel" @click="handleDropdown">
+    <button class="dropdown-title" type="button" @click="handleDropdown">
       <web-icon />
     </button>
-    <button class="mobile-dropdown-title" type="button" :aria-label="dropdownAriaLabel" @click="setOpen(!open)">
-      <web-icon />
+    <button class="mobile-dropdown-title" type="button" @click="setOpen(!open)">
+      {{languageText}}&nbsp;
+	  <web-icon />
     </button>
 
     <DropdownTransition>
@@ -59,5 +60,18 @@
   export default {
     extends: DefaultDropdownLink,
     components: { WebIcon },
+	computed: {
+      languageText() {
+        return (this.$themeLocaleConfig.selectText);
+      }
+	}
   }
 </script>
+
+<style lang="stylus" scoped>
+@media (max-width: $MQMobile)
+  .dropdown-wrapper .mobile-dropdown-title
+    display flex
+    font-size 1.0em
+    line-height 1.25rem
+</style>

docs/.vuepress/theme/components/NavLinks.vue

@@ -13,19 +13,18 @@
     </a>
 
     <!-- Dark Mode only on mobile device -->
-    <a v-if="isMobile" @click="lightMode.toggle()" class="repo-link" :title="repoLabel" :aria-label="repoLabel">
+    <a v-if="isMobile" @click="lightMode.toggle()" class="repo-link">
+	  {{themeText}}&nbsp;
       <weather-night-icon v-if="lightMode._light" />
       <white-balance-sunny-icon v-else />
     </a>
 
     <!-- Language Icon only on mobile device -->
-    <div v-if="isMobile" class="nav-links">
-      <div v-for="item in languages" :key="item.link" class="nav-item">
-        <DropdownLink :item="item" />
-      </div>
-    </div>
-
-
+	  <a v-if="isMobile" class="repo-link">
+		<div v-for="item in languages" :key="item.link" class="nav-item" style="padding:0">
+		  <DropdownLink :item="item" />
+		</div>
+	  </a>
   </nav>
 </template>
 
@@ -68,6 +67,10 @@
     },
   
     computed: {
+      themeText() {
+        return this.lightMode._light ? 'Dark Mode' : 'Light Mode';
+      },
+
       nav () {
         return this.$themeLocaleConfig.nav || this.$site.themeConfig.nav || []
       },
@@ -110,4 +113,12 @@
       }
     }
   }
-</script>
+</script>
+
+<style lang="stylus" scoped>
+
+  .sidebar .nav-links .nav-item, .sidebar .nav-links .repo-link
+    display flex
+    align-items center
+
+</style>