Change the default navbar style for non-desktop to simple navbar (ope…

…nhab#2791)

Discussion in
https://community.openhab.org/t/permastore-ui-look-options/152052.

Signed-off-by: Florian Hotze <florianh_dev@icloud.com>

bundles/org.openhab.ui/web/src/components/app.vue

@@ -539,7 +539,7 @@ export default {
     updateThemeOptions () {
       this.themeOptions.dark = localStorage.getItem('openhab.ui:theme.dark') || ((window.OHApp && window.OHApp.preferDarkMode) ? window.OHApp.preferDarkMode().toString() : (this.$f7.darkTheme ? 'dark' : 'light'))
       this.themeOptions.bars = localStorage.getItem('openhab.ui:theme.bars') || 'light'
-      this.themeOptions.homeNavbar = localStorage.getItem('openhab.ui:theme.home.navbar') || 'default'
+      this.themeOptions.homeNavbar = localStorage.getItem('openhab.ui:theme.home.navbar') || (this.$f7.device.desktop ? 'large' : 'simple')
       this.themeOptions.homeBackground = localStorage.getItem('openhab.ui:theme.home.background') || 'default'
       this.themeOptions.expandableCardAnimation = localStorage.getItem('openhab.ui:theme.home.cardanimation') || 'default'
       if (this.themeOptions.dark === 'dark') {

bundles/org.openhab.ui/web/src/components/theme-switcher.vue

@@ -111,7 +111,7 @@ export default {
       location.reload()
     },
     setHomePageNavbarStyle (value) {
-      localStorage.setItem('openhab.ui:theme.home.navbar', (value) ? 'simple' : 'default')
+      localStorage.setItem('openhab.ui:theme.home.navbar', (value) ? 'simple' : 'large')
       location.reload()
     },
     setHomePageBackground (value) {
@@ -150,7 +150,7 @@ export default {
       return localStorage.getItem('openhab.ui:theme.bars') || 'light'
     },
     homePageNavbarStyle () {
-      return localStorage.getItem('openhab.ui:theme.home.navbar') || 'default'
+      return localStorage.getItem('openhab.ui:theme.home.navbar') || (this.$f7.device.desktop ? 'large' : 'simple')
     },
     homePageBackground () {
       return localStorage.getItem('openhab.ui:theme.home.background') || 'default'

bundles/org.openhab.ui/web/src/pages/home.vue

@@ -1,10 +1,10 @@
 <template>
   <f7-page stacked name="HomePage" class="page-home" :class="{ 'standard-background': $f7.data.themeOptions.homeBackground === 'standard' }" @page:init="onPageInit" @page:beforein="onPageBeforeIn" @page:afterin="onPageAfterIn" @page:beforeout="onPageBeforeOut">
-    <f7-navbar :large="$f7.data.themeOptions.homeNavbar !== 'simple'" :large-transparent="$f7.data.themeOptions.homeNavbar !== 'simple'" class="home-nav disable-user-select">
+    <f7-navbar :large="navbarLarge" :large-transparent="navbarLarge" class="home-nav disable-user-select">
       <f7-nav-left>
         <f7-link icon-ios="f7:menu" icon-aurora="f7:menu" icon-md="material:menu" panel-open="left" />
       </f7-nav-left>
-      <f7-nav-title-large v-if="$f7.data.themeOptions.homeNavbar !== 'simple'" class="home-title-large">
+      <f7-nav-title-large v-if="navbarLarge" class="home-title-large">
         <span class="today">{{ new Date().toLocaleString($store.getters.locale, { weekday: 'long', day: 'numeric', month: 'long' }) }}</span>
         {{ title }}
       </f7-nav-title-large>
@@ -108,6 +108,9 @@ export default {
     ready () {
       return this.$store.state.apiVersion > 0
     },
+    navbarLarge () {
+      return this.$f7.data.themeOptions.homeNavbar === 'large'
+    },
     context () {
       return {
         store: this.$store.getters.trackedItems