feat: hide burger bg toggle (#3969)

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

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;
+  }
+}