refactor into '<lnbits-drawer />' component (#3499)

lnbits/static/js/components/lnbits-drawer.js

@@ -0,0 +1,4 @@
+window.app.component('lnbits-drawer', {
+  template: '#lnbits-drawer',
+  mixins: [window.windowMixin]
+})

lnbits/static/vendor.json

@@ -73,6 +73,7 @@
     "js/components/lnbits-qrcode-lnurl.js",
     "js/components/lnbits-footer.js",
     "js/components/lnbits-header.js",
+    "js/components/lnbits-drawer.js",
     "js/components/extension-settings.js",
     "js/components/data-fields.js",
     "js/components/payment-list.js",

lnbits/templates/base.html

@@ -34,51 +34,8 @@
     <div id="vue">
       <q-layout view="hHh lpR lfr" v-cloak>
         <lnbits-header></lnbits-header>
-
         {% block drawer %}
-        <q-drawer
+        <lnbits-drawer></lnbits-drawer>
-          v-model="g.visibleDrawer"
-          side="left"
-          :width="($q.screen.lt.md) ? 260 : 230"
-          show-if-above
-          :elevated="$q.screen.lt.md"
-        >
-          <q-scroll-area style="height: 100%">
-            <q-item>
-              <q-item-section class="cursor-pointer" @click="goToWallets()">
-                <q-item-label
-                  :style="$q.dark.isActive ? 'color:rgba(255, 255, 255, 0.64)' : ''"
-                  class="q-item__label q-item__label--header q-pa-none"
-                  header
-                  v-text="$t('wallets') + ' (' + g.user.wallets.length + ')'"
-                ></q-item-label>
-              </q-item-section>
-              <q-item-section side>
-                <q-btn
-                  flat
-                  :icon=" walletFlip ? 'view_list' : 'view_column'"
-                  color="grey"
-                  class=""
-                  @click="flipWallets($q.screen.lt.md)"
-                >
-                  <q-tooltip
-                    ><span
-                      v-text="walletFlip ? $t('view_list') : $t('view_column')"
-                    ></span
-                  ></q-tooltip>
-                </q-btn>
-              </q-item-section>
-            </q-item>
-
-            <lnbits-wallet-list
-              v-if="!walletFlip"
-              :balance="balance"
-              @wallet-action="handleWalletAction"
-            ></lnbits-wallet-list>
-            <lnbits-manage />
-            <lnbits-extension-list class="q-pb-xl"></lnbits-extension-list>
-          </q-scroll-area>
-        </q-drawer>
         {% endblock %} {% block page_container %}
         <q-page-container>
           <q-page class="q-px-md q-py-lg" :class="{'q-px-lg': $q.screen.gt.xs}">

lnbits/templates/components.vue

@@ -13,6 +13,7 @@ include('components/admin/server.vue') %} {%
 include('components/new_user_wallet.vue') %} {%
 include('components/lnbits-footer.vue') %} {%
 include('components/lnbits-header.vue') %} {%
+include('components/lnbits-drawer.vue') %} {%
 include('components/lnbits-home-logos.vue') %}
 
 <template id="lnbits-wallet-list">

lnbits/templates/components/lnbits-drawer.vue

@@ -0,0 +1,44 @@
+<template id="lnbits-drawer">
+  <q-drawer
+    v-model="g.visibleDrawer"
+    side="left"
+    :width="$q.screen.lt.md ? 260 : 230"
+    show-if-above
+    :elevated="$q.screen.lt.md"
+  >
+    <q-scroll-area style="height: 100%">
+      <q-item>
+        <q-item-section class="cursor-pointer" @click="goToWallets()">
+          <q-item-label
+            :style="$q.dark.isActive ? 'color:rgba(255, 255, 255, 0.64)' : ''"
+            class="q-item__label q-item__label--header q-pa-none"
+            header
+            v-text="$t('wallets') + ' (' + g.user.wallets.length + ')'"
+          ></q-item-label>
+        </q-item-section>
+        <q-item-section side>
+          <q-btn
+            flat
+            :icon="walletFlip ? 'view_list' : 'view_column'"
+            color="grey"
+            class=""
+            @click="flipWallets($q.screen.lt.md)"
+          >
+            <q-tooltip
+              ><span
+                v-text="walletFlip ? $t('view_list') : $t('view_column')"
+              ></span
+            ></q-tooltip>
+          </q-btn>
+        </q-item-section>
+      </q-item>
+      <lnbits-wallet-list
+        v-if="!walletFlip"
+        :balance="balance"
+        @wallet-action="handleWalletAction"
+      ></lnbits-wallet-list>
+      <lnbits-manage></lnbits-manage>
+      <lnbits-extension-list class="q-pb-xl"></lnbits-extension-list>
+    </q-scroll-area>
+  </q-drawer>
+</template>

package.json

@@ -125,6 +125,7 @@
       "js/components/lnbits-qrcode-lnurl.js",
       "js/components/lnbits-footer.js",
       "js/components/lnbits-header.js",
+      "js/components/lnbits-drawer.js",
       "js/components/extension-settings.js",
       "js/components/data-fields.js",
       "js/components/payment-list.js",