feat: hide burger bg toggle (#3969)

Co-authored-by: Vlad Stan <stan.v.vlad@gmail.com>

lnbits/settings.py

@@ -300,6 +300,7 @@ class ThemesSettings(LNbitsSettings):
     lnbits_default_card_rounded: bool = Field(default=True)
     lnbits_default_card_gradient: bool = Field(default=True)
     lnbits_default_card_shadow: bool = Field(default=False)
+    lnbits_default_burger_menu_background: bool = Field(default=True)
 
 
 class OpsSettings(LNbitsSettings):
@@ -1281,6 +1282,7 @@ class PublicSettings(BaseModel):
     default_card_rounded: bool = Field(alias="defaultCardRounded")
     default_card_gradient: bool = Field(alias="defaultCardGradient")
     default_card_shadow: bool = Field(alias="defaultCardShadow")
+    default_burger_menu_background: bool = Field(alias="defaultBurgerMenuBackground")
     denomination: str | None = Field()
     extensions: list[str] = Field()
     allowed_currencies: list[str] = Field(alias="allowedCurrencies")
@@ -1344,6 +1346,7 @@ class PublicSettings(BaseModel):
             defaultCardRounded=settings.lnbits_default_card_rounded,
             defaultCardGradient=settings.lnbits_default_card_gradient,
             defaultCardShadow=settings.lnbits_default_card_shadow,
+            defaultBurgerMenuBackground=settings.lnbits_default_burger_menu_background,
             denomination=settings.lnbits_denomination,
             extensions=list(settings.lnbits_installed_extensions_ids),
             allowedCurrencies=settings.lnbits_allowed_currencies,

lnbits/static/css/base.css

@@ -395,6 +395,13 @@ body.card-shadow.body--dark .q-card:not(.q-dialog .q-card, .lnbits__dialog-card,
   filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.45));
 }
 
+body.no-burger-background .q-drawer {
+  background-color: transparent !important;
+  background-image: none !important;
+  backdrop-filter: none !important;
+  box-shadow: none !important;
+}
+
 :root {
   --size: 100px;
   --gap: 25px;

lnbits/static/i18n/en.js

@@ -490,6 +490,8 @@ window.localisation.en = {
   toggle_card_gradient: 'Toggle gradient on cards',
   card_shadow: 'Card Shadow',
   toggle_card_shadow: 'Toggle shadow on cards',
+  burger_menu_background: 'Burger Menu Background',
+  toggle_burger_menu_background: 'Toggle burger menu background',
   language: 'Language',
   assets: 'Assets',
   max_asset_size_mb: 'Max Asset Size (MB)',

lnbits/static/js/components/lnbits-theme.js

@@ -69,6 +69,14 @@ window.app.component('lnbits-theme', {
         document.body.classList.remove('card-shadow')
       }
     },
+    'g.burgerMenuChoice'(val) {
+      this.$q.localStorage.set('lnbits.burgerMenu', val)
+      if (val === true) {
+        document.body.classList.remove('no-burger-background')
+      } else {
+        document.body.classList.add('no-burger-background')
+      }
+    },
     'g.mobileSimple'(val) {
       this.$q.localStorage.set('lnbits.mobileSimple', val)
       if (val === true) {
@@ -150,6 +158,9 @@ window.app.component('lnbits-theme', {
     if (this.g.cardShadowChoice === true) {
       document.body.classList.add('card-shadow')
     }
+    if (this.g.burgerMenuChoice !== true) {
+      document.body.classList.add('no-burger-background')
+    }
     if (this.g.bgimageChoice !== '') {
       document.body.classList.add('bg-image')
       document.body.style.setProperty(

lnbits/static/js/globals.js

@@ -29,6 +29,10 @@ window.g = Vue.reactive({
     SETTINGS.defaultCardGradient
   ),
   cardShadowChoice: localStore('lnbits.cardShadow', SETTINGS.defaultCardShadow),
+  burgerMenuChoice: localStore(
+    'lnbits.burgerMenu',
+    SETTINGS.defaultBurgerMenuBackground
+  ),
   reactionChoice: localStore('lnbits.reactions', SETTINGS.defaultReaction),
   bgimageChoice: localStore(
     'lnbits.backgroundImage',

lnbits/static/js/pages/account.js

@@ -732,7 +732,8 @@ window.PageAccount = {
         darkChoice: this.g.settings.defaultDark,
         cardRoundedChoice: this.g.settings.defaultCardRounded,
         cardGradientChoice: this.g.settings.defaultCardGradient,
-        cardShadowChoice: this.g.settings.defaultCardShadow
+        cardShadowChoice: this.g.settings.defaultCardShadow,
+        burgerMenuChoice: this.g.settings.defaultBurgerMenuBackground
       }
       this.siteCustomisationChanged(defaults)
     }

lnbits/static/scss/cards.scss

@@ -70,3 +70,12 @@ body.card-shadow.body--dark {
     filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.45));
   }
 }
+
+body.no-burger-background {
+  .q-drawer {
+    background-color: transparent !important;
+    background-image: none !important;
+    backdrop-filter: none !important;
+    box-shadow: none !important;
+  }
+}

lnbits/templates/components/admin/site_customisation.vue

@@ -320,6 +320,15 @@
           >
           </q-toggle>
         </div>
+        <div class="col-12 col-sm-6 col-lg-2">
+          <q-toggle
+            type="bool"
+            v-model="formData.lnbits_default_burger_menu_background"
+            color="primary"
+            :label="$t('burger_menu_background')"
+          >
+          </q-toggle>
+        </div>
       </div>
     </div>
   </q-card-section>

lnbits/templates/pages/account.vue

@@ -601,6 +601,30 @@
                     </div>
                   </div>
 
+                  <div class="row q-mb-md">
+                    <div class="col-4">
+                      <span v-text="$t('burger_menu_background')"></span>
+                    </div>
+                    <div class="col-8">
+                      <q-toggle
+                        dense
+                        flat
+                        round
+                        icon="menu_open"
+                        v-model="g.burgerMenuChoice"
+                        @update:model-value="
+                          siteCustomisationChanged({burgerMenuChoice: $event})
+                        "
+                      >
+                        <q-tooltip
+                          ><span
+                            v-text="$t('toggle_burger_menu_background')"
+                          ></span
+                        ></q-tooltip>
+                      </q-toggle>
+                    </div>
+                  </div>
+
                   <div class="row q-mb-md">
                     <div class="col-4">
                       <span v-text="$t('toggle_darkmode')"></span>