Better menu behavior when clicking on 'set small' btn.

frontend/src/components/webmail/MailboxList.vue

@@ -18,33 +18,35 @@
         @drop="onDrop(mailbox)"
       >
         <v-icon :icon="iconByMailboxType[mailbox.type]" class="mr-4" />
-        <template v-if="mailbox.name === route.query.mailbox">
-          <span v-if="currentMailboxUnseen > 0" class="font-weight-bold">
-            {{ getMailboxLabel(mailbox) }} ({{
-              getCurrentMailboxUnseen(mailbox)
-            }})
-          </span>
-          <span v-else>
-            {{ getMailboxLabel(mailbox) }}
-          </span>
+        <template v-if="!props.rail">
+          <template v-if="mailbox.name === route.query.mailbox">
+            <span v-if="currentMailboxUnseen > 0" class="font-weight-bold">
+              {{ getMailboxLabel(mailbox) }} ({{
+                getCurrentMailboxUnseen(mailbox)
+              }})
+            </span>
+            <span v-else>
+              {{ getMailboxLabel(mailbox) }}
+            </span>
+          </template>
+          <template v-else>
+            <span v-if="mailbox.unseen > 0" class="font-weight-bold">
+              {{ getMailboxLabel(mailbox) }} ({{ mailbox.unseen }})
+            </span>
+            <span v-else>
+              {{ getMailboxLabel(mailbox) }}
+            </span>
+          </template>
+          <v-spacer />
+          <v-btn
+            v-if="mailbox.sub"
+            :icon="getMailboxState(mailbox) ? 'mdi-minus' : 'mdi-plus'"
+            size="xsmall"
+            variant="flat"
+            color="transparent"
+            @click="toggleMailbox(mailbox)"
+          />
         </template>
-        <template v-else>
-          <span v-if="mailbox.unseen > 0" class="font-weight-bold">
-            {{ getMailboxLabel(mailbox) }} ({{ mailbox.unseen }})
-          </span>
-          <span v-else>
-            {{ getMailboxLabel(mailbox) }}
-          </span>
-        </template>
-        <v-spacer />
-        <v-btn
-          v-if="mailbox.sub"
-          :icon="getMailboxState(mailbox) ? 'mdi-minus' : 'mdi-plus'"
-          size="xsmall"
-          variant="flat"
-          color="transparent"
-          @click.stop="toggleMailbox(mailbox)"
-        />
       </div>
       <MailboxList
         v-if="getMailboxState(mailbox) && mailbox.sub && mailbox.sub.length"
@@ -86,6 +88,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  rail: {
+    type: Boolean,
+    default: false,
+  },
 })
 const model = defineModel()
 const emit = defineEmits(['update:modelValue'])
@@ -194,9 +200,12 @@ watch(
   &:hover {
     border-radius: 5px;
   }
-}
 
-.mailbox * {
-  pointer-events: none;
+  i {
+    pointer-events: none;
+  }
+  span {
+    pointer-events: none;
+  }
 }
 </style>

frontend/src/layouts/webmail/WebmailLayout.vue

@@ -6,7 +6,6 @@
         :rail="rail"
         permanent
         color="primary"
-        app
       >
         <template #prepend>
           <div class="d-flex align-center">
@@ -21,18 +20,28 @@
 
           <div class="d-flex justify-center mb-4">
             <v-btn
+              v-if="!rail"
               :text="$gettext('Compose')"
               color="secondary"
               variant="flat"
               prepend-icon="mdi-pencil"
               @click="openComposeForm"
             />
+            <v-btn
+              v-else
+              icon="mdi-pencil"
+              color="secondary"
+              variant="flat"
+              size="small"
+              @click="openComposeForm"
+            />
           </div>
         </template>
         <MailboxList
           v-model="selectedMailbox"
           :mailboxes="userMailboxes"
           class="mr-2"
+          :rail="rail"
           @update:model-value="openMailbox"
         />
         <template #append>