refactor: refactor TogglePanels

src/components/header.vue

@@ -30,7 +30,7 @@
 
           <q-space />
 
-          <ToggleIndex
+          <TogglePanels
             v-if="config.headers.toggle"
             :panels="panels"
           />
@@ -46,7 +46,7 @@ import Infobar from '@/components/infobar.vue';
 import Language from '@/components/language.vue';
 import Navbar from '@/components/navbar.vue';
 import Softwareinfo from '@/components/softwareinfo.vue';
-import ToggleIndex from '@/components/togglebar/toggleIndex.vue';
+import TogglePanels from '@/components/togglebar/togglePanels.vue';
 
 export default {
   name: 'Header',
@@ -56,7 +56,7 @@ export default {
     Language,
     Navbar,
     Softwareinfo,
-    ToggleIndex,
+    TogglePanels,
   },
   props: {
     collectiontitle: {

src/components/togglebar/toggleFilter.vue

-<template>
-  <div>
-    <q-btn-dropdown
-      v-if="$q.screen.width < 1200"
-      :dropdown-icon="fasCaretDown"
-      outline
-      flat
-      size="12px"
-      padding="xs"
-      class="button__dropdown q-px-sm"
-      :class="$q.dark.isActive ? 'bg-black' : 'bg-secondary text-black'"
-      :label="$t('showHidePanels')"
-    >
-      <slot />
-    </q-btn-dropdown>
-
-    <div
-      v-else
-      class="row"
-    >
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script>
-import { fasCaretDown } from '@quasar/extras/fontawesome-v5';
-
-export default {
-  // keep icon from reactivity
-  created() {
-    this.fasCaretDown = fasCaretDown;
-  },
-};
-</script>

src/components/togglebar/toggleIndex.vue → src/components/togglebar/togglePanels.vue

 <template>
-  <ToggleFilter>
+  <div>
+    <q-btn-dropdown
+      v-if="$q.screen.width < 1200"
+      :dropdown-icon="fasCaretDown"
+      outline
+      flat
+      size="12px"
+      padding="xs"
+      class="button__dropdown q-px-sm"
+      :class="$q.dark.isActive ? 'bg-black' : 'bg-secondary text-black'"
+      :label="$t('showHidePanels')"
+    >
+      <q-list
+        v-for="(p, i) in panels"
+        :key="`toggle${i}`"
+      >
+        <q-item
+          v-if="p.toggle"
+          clickable
+          padding="xs"
+          :title="handleToggleTitle(i)"
+          @click="() => handleStatusPanel(i)"
+        >
+          <q-item-section>
+            <q-item-label>
+              <q-icon
+                class="q-pr-xs"
+                size="xs"
+                :color="$q.dark.isActive ? 'bg-black' : 'accent'"
+                :name="renderCheckIcon(i)"
+              />
+              {{ $t(p.panel_label).toUpperCase() }}
+            </q-item-label>
+          </q-item-section>
+        </q-item>
+      </q-list>
+      <q-list>
+        <q-item
+          v-if="toggleCounter"
+          v-close-popup
+          clickable
+          padding="xs"
+          :title="$t('defaultView')"
+          @click="()=> handleStatusPanel(-1, true)"
+        >
+          <q-item-section>
+            <q-item-label>
+              <q-icon
+                class="q-pr-xs"
+                size="xs"
+                :color="$q.dark.isActive ? 'white' : 'accent'"
+                :name="fasUndo"
+              />
+              {{ $t('Reset').toUpperCase() }}
+            </q-item-label>
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </q-btn-dropdown>
+
     <div
-      v-for="(p, i) in panels"
-      :key="`toggle${i}`"
+      v-if="$q.screen.width > 1199"
+      class="row"
     >
+      <div
+        v-for="(p, i) in panels"
+        :key="`toggle${i}`"
+      >
+        <q-btn
+          v-if="p.toggle"
+          v-close-popup
+          clickable
+          flat
+          size="12px"
+          padding="xs"
+          class="q-px-sm"
+          :title="handleToggleTitle(i)"
+          @click="() => handleStatusPanel(i)"
+        >
+          <q-icon
+            class="q-pr-xs"
+            size="16px"
+            :color="$q.dark.isActive ? 'bg-black' : 'accent'"
+            :name="renderCheckIcon(i)"
+          />
+          {{ $t(p.panel_label).toUpperCase() }}
+        </q-btn>
+      </div>
+
       <q-btn
-        v-if="p.toggle"
+        v-if="toggleCounter"
         v-close-popup
         clickable
         flat
         size="12px"
         padding="xs"
         class="q-px-sm"
-        :title="handleToggleTitle(i)"
-        @click="() => handleStatusPanel(i)"
+        :title="$t('defaultView')"
+        @click="()=> handleStatusPanel(-1, true)"
       >
         <q-icon
           class="q-pr-xs"
           size="16px"
-          :color="$q.dark.isActive ? 'bg-black' : 'accent'"
-          :name="renderCheckIcon(i)"
+          :color="$q.dark.isActive ? 'white' : 'accent'"
+          :name="fasUndo"
         />
-        {{ $t(p.panel_label).toUpperCase() }}
+        {{ $t('Reset').toUpperCase() }}
       </q-btn>
     </div>
-
-    <q-btn
-      v-if="toggleCounter"
-      v-close-popup
-      clickable
-      flat
-      size="12px"
-      padding="xs"
-      class="q-px-sm"
-      :title="$t('defaultView')"
-      @click="()=> handleStatusPanel(-1, true)"
-    >
-      <q-icon
-        class="q-pr-xs"
-        size="16px"
-        :color="$q.dark.isActive ? 'white' : 'accent'"
-        :name="fasUndo"
-      />
-      {{ $t('Reset').toUpperCase() }}
-    </q-btn>
-  </ToggleFilter>
+  </div>
 </template>
 
 <script>
@@ -52,15 +116,11 @@ import {
   fasUndo,
   fasCircle,
   fasCheckCircle,
+  fasCaretDown,
 } from '@quasar/extras/fontawesome-v5';
 
-import ToggleFilter from '@/components/togglebar/toggleFilter.vue';
-
 export default {
-  name: 'ToggleIndex',
-  components: {
-    ToggleFilter,
-  },
+  name: 'TogglePanels',
   props: {
     panels: {
       type: Array,
@@ -77,6 +137,7 @@ export default {
     this.fasCheckCircle = fasCheckCircle;
     this.fasCircle = fasCircle;
     this.fasUndo = fasUndo;
+    this.fasCaretDown = fasCaretDown;
   },
   methods: {
     // show checkbox icon depending on the current status