From 3f8d4704997b6b778b8a57b738966ea901de6e81 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 16 Oct 2024 12:36:52 +0300
Subject: [PATCH] Menubar cosmetics

---
 apps/showcase/doc/menubar/RouterDoc.vue       |  24 ++--
 apps/showcase/doc/menubar/TemplateDoc.vue     | 118 ++++--------------
 .../src/menubar/style/MenubarStyle.js         |  17 ++-
 3 files changed, 41 insertions(+), 118 deletions(-)

diff --git a/apps/showcase/doc/menubar/RouterDoc.vue b/apps/showcase/doc/menubar/RouterDoc.vue
index 80254b621..e3eef633e 100644
--- a/apps/showcase/doc/menubar/RouterDoc.vue
+++ b/apps/showcase/doc/menubar/RouterDoc.vue
@@ -8,13 +8,13 @@
                 <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
                     <a v-ripple :href="href" v-bind="props.action" @click="navigate">
                         <span :class="item.icon" />
-                        <span class="ml-2">{{ item.label }}</span>
+                        <span>{{ item.label }}</span>
                     </a>
                 </router-link>
                 <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
                     <span :class="item.icon" />
-                    <span class="ml-2">{{ item.label }}</span>
-                    <span v-if="hasSubmenu" class="pi pi-fw pi-angle-down ml-2" />
+                    <span>{{ item.label }}</span>
+                    <span v-if="hasSubmenu" class="pi pi-fw pi-angle-down" />
                 </a>
             </template>
         </Menubar>
@@ -70,13 +70,13 @@ export default {
         <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
             <a v-ripple :href="href" v-bind="props.action" @click="navigate">
                 <span :class="item.icon" />
-                <span class="ml-2">{{ item.label }}</span>
+                <span>{{ item.label }}</span>
             </a>
         </router-link>
         <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
             <span :class="item.icon" />
-            <span class="ml-2">{{ item.label }}</span>
-            <span v-if="hasSubmenu" class="pi pi-fw pi-angle-down ml-2" />
+            <span>{{ item.label }}</span>
+            <span v-if="hasSubmenu" class="pi pi-fw pi-angle-down" />
         </a>
     </template>
 </Menubar>
@@ -89,13 +89,13 @@ export default {
                 <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
                     <a v-ripple :href="href" v-bind="props.action" @click="navigate">
                         <span :class="item.icon" />
-                        <span class="ml-2">{{ item.label }}</span>
+                        <span>{{ item.label }}</span>
                     </a>
                 </router-link>
                 <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
                     <span :class="item.icon" />
-                    <span class="ml-2">{{ item.label }}</span>
-                    <span v-if="hasSubmenu" class="pi pi-fw pi-angle-down ml-2" />
+                    <span>{{ item.label }}</span>
+                    <span v-if="hasSubmenu" class="pi pi-fw pi-angle-down" />
                 </a>
             </template>
         </Menubar>
@@ -156,13 +156,13 @@ export default {
                 <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
                     <a v-ripple :href="href" v-bind="props.action" @click="navigate">
                         <span :class="item.icon" />
-                        <span class="ml-2">{{ item.label }}</span>
+                        <span>{{ item.label }}</span>
                     </a>
                 </router-link>
                 <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
                     <span :class="item.icon" />
-                    <span class="ml-2">{{ item.label }}</span>
-                    <span v-if="hasSubmenu" class="pi pi-fw pi-angle-down ml-2" />
+                    <span>{{ item.label }}</span>
+                    <span v-if="hasSubmenu" class="pi pi-fw pi-angle-down" />
                 </a>
             </template>
         </Menubar>
diff --git a/apps/showcase/doc/menubar/TemplateDoc.vue b/apps/showcase/doc/menubar/TemplateDoc.vue
index 70c931299..a1e674401 100644
--- a/apps/showcase/doc/menubar/TemplateDoc.vue
+++ b/apps/showcase/doc/menubar/TemplateDoc.vue
@@ -20,16 +20,15 @@
             </template>
             <template #item="{ item, props, hasSubmenu, root }">
                 <a v-ripple class="flex items-center" v-bind="props.action">
-                    <span :class="item.icon" />
-                    <span class="ml-2">{{ item.label }}</span>
+                    <span>{{ item.label }}</span>
                     <Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" />
                     <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
-                    <i v-if="hasSubmenu" :class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i>
+                    <i v-if="hasSubmenu" :class="['pi pi-angle-down ml-auto', { 'pi-angle-down': root, 'pi-angle-right': !root }]"></i>
                 </a>
             </template>
             <template #end>
                 <div class="flex items-center gap-2">
-                    <InputText placeholder="Search" type="text" class="w-32 sm:w-auto" />
+                    <InputText placeholder="Search" type="text" class="w-36" />
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
                 </div>
             </template>
@@ -47,13 +46,10 @@ export default {
                     label: 'Home',
                     icon: 'pi pi-home'
                 },
-                {
-                    label: 'Features',
-                    icon: 'pi pi-star'
-                },
                 {
                     label: 'Projects',
                     icon: 'pi pi-search',
+                    badge: 3,
                     items: [
                         {
                             label: 'Core',
@@ -65,36 +61,15 @@ export default {
                             icon: 'pi pi-server',
                             shortcut: '⌘+B'
                         },
-                        {
-                            label: 'UI Kit',
-                            icon: 'pi pi-pencil',
-                            shortcut: '⌘+U'
-                        },
                         {
                             separator: true
                         },
                         {
-                            label: 'Templates',
-                            icon: 'pi pi-palette',
-                            items: [
-                                {
-                                    label: 'Apollo',
-                                    icon: 'pi pi-palette',
-                                    badge: 2
-                                },
-                                {
-                                    label: 'Ultima',
-                                    icon: 'pi pi-palette',
-                                    badge: 3
-                                }
-                            ]
+                            label: 'UI Kit',
+                            icon: 'pi pi-pencil',
+                            shortcut: '⌘+U'
                         }
                     ]
-                },
-                {
-                    label: 'Contact',
-                    icon: 'pi pi-envelope',
-                    badge: 3
                 }
             ],
             code: {
@@ -108,11 +83,10 @@ export default {
     </template>
     <template #item="{ item, props, hasSubmenu, root }">
         <a v-ripple class="flex items-center" v-bind="props.action">
-            <span :class="item.icon" />
-            <span class="ml-2">{{ item.label }}</span>
+            <span>{{ item.label }}</span>
             <Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" />
             <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
-            <i v-if="hasSubmenu" :class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i>
+            <i v-if="hasSubmenu" :class="['pi pi-angle-down ml-auto', { 'pi-angle-down': root, 'pi-angle-right': !root }]"></i>
         </a>
     </template>
     <template #end>
@@ -141,11 +115,10 @@ export default {
             </template>
             <template #item="{ item, props, hasSubmenu, root }">
                 <a v-ripple class="flex items-center" v-bind="props.action">
-                    <span :class="item.icon" />
-                    <span class="ml-2">{{ item.label }}</span>
+                    <span>{{ item.label }}</span>
                     <Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" />
                     <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
-                    <i v-if="hasSubmenu" :class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i>
+                    <i v-if="hasSubmenu" :class="['pi pi-angle-down ml-auto', { 'pi-angle-down': root, 'pi-angle-right': !root }]"></i>
                 </a>
             </template>
             <template #end>
@@ -167,13 +140,10 @@ export default {
                     label: 'Home',
                     icon: 'pi pi-home'
                 },
-                {
-                    label: 'Features',
-                    icon: 'pi pi-star'
-                },
                 {
                     label: 'Projects',
                     icon: 'pi pi-search',
+                    badge: 3,
                     items: [
                         {
                             label: 'Core',
@@ -185,36 +155,15 @@ export default {
                             icon: 'pi pi-server',
                             shortcut: '⌘+B'
                         },
-                        {
-                            label: 'UI Kit',
-                            icon: 'pi pi-pencil',
-                            shortcut: '⌘+U'
-                        },
                         {
                             separator: true
                         },
                         {
-                            label: 'Templates',
-                            icon: 'pi pi-palette',
-                            items: [
-                                {
-                                    label: 'Apollo',
-                                    icon: 'pi pi-palette',
-                                    badge: 2
-                                },
-                                {
-                                    label: 'Ultima',
-                                    icon: 'pi pi-palette',
-                                    badge: 3
-                                }
-                            ]
+                            label: 'UI Kit',
+                            icon: 'pi pi-pencil',
+                            shortcut: '⌘+U'
                         }
                     ]
-                },
-                {
-                    label: 'Contact',
-                    icon: 'pi pi-envelope',
-                    badge: 3
                 }
             ]
         };
@@ -240,11 +189,10 @@ export default {
             </template>
             <template #item="{ item, props, hasSubmenu, root }">
                 <a v-ripple class="flex items-center" v-bind="props.action">
-                    <span :class="item.icon" />
-                    <span class="ml-2">{{ item.label }}</span>
+                    <span>{{ item.label }}</span>
                     <Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" />
                     <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
-                    <i v-if="hasSubmenu" :class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i>
+                    <i v-if="hasSubmenu" :class="['pi pi-angle-down ml-auto', { 'pi-angle-down': root, 'pi-angle-right': !root }]"></i>
                 </a>
             </template>
             <template #end>
@@ -265,13 +213,10 @@ const items = ref([
         label: 'Home',
         icon: 'pi pi-home'
     },
-    {
-        label: 'Features',
-        icon: 'pi pi-star'
-    },
     {
         label: 'Projects',
         icon: 'pi pi-search',
+        badge: 3,
         items: [
             {
                 label: 'Core',
@@ -283,36 +228,15 @@ const items = ref([
                 icon: 'pi pi-server',
                 shortcut: '⌘+B'
             },
-            {
-                label: 'UI Kit',
-                icon: 'pi pi-pencil',
-                shortcut: '⌘+U'
-            },
             {
                 separator: true
             },
             {
-                label: 'Templates',
-                icon: 'pi pi-palette',
-                items: [
-                    {
-                        label: 'Apollo',
-                        icon: 'pi pi-palette',
-                        badge: 2
-                    },
-                    {
-                        label: 'Ultima',
-                        icon: 'pi pi-palette',
-                        badge: 3
-                    }
-                ]
+                label: 'UI Kit',
+                icon: 'pi pi-pencil',
+                shortcut: '⌘+U'
             }
         ]
-    },
-    {
-        label: 'Contact',
-        icon: 'pi pi-envelope',
-        badge: 3
     }
 ]);
 <\/script>
diff --git a/packages/primevue/src/menubar/style/MenubarStyle.js b/packages/primevue/src/menubar/style/MenubarStyle.js
index ac7d6dc6e..454bfd45b 100644
--- a/packages/primevue/src/menubar/style/MenubarStyle.js
+++ b/packages/primevue/src/menubar/style/MenubarStyle.js
@@ -123,7 +123,7 @@ const theme = ({ dt }) => `
     z-index: 1;
     background: ${dt('menubar.submenu.background')};
     border: 1px solid ${dt('menubar.submenu.border.color')};
-    border-radius: ${dt('menubar.border.radius')};
+    border-radius: ${dt('menubar.submenu.border.radius')};
     box-shadow: ${dt('menubar.submenu.shadow')};
     color: ${dt('menubar.submenu.color')};
     flex-direction: column;
@@ -189,14 +189,16 @@ const theme = ({ dt }) => `
     position: absolute;
     display: none;
     width: 100%;
+    flex-direction: column;
+    top: 100%;
+    left: 0;
+    z-index: 1;
     padding: ${dt('menubar.submenu.padding')};
     background: ${dt('menubar.submenu.background')};
     border: 1px solid ${dt('menubar.submenu.border.color')};
     box-shadow: ${dt('menubar.submenu.shadow')};
-}
-
-.p-menubar-mobile .p-menubar-root-list > .p-menubar-item > .p-menubar-item-content {
-    border-radius: ${dt('menubar.item.border.radius')};
+    border-radius: ${dt('menubar.submenu.border.radius')};
+    gap: ${dt('menubar.submenu.gap')};
 }
 
 .p-menubar-mobile .p-menubar-root-list > .p-menubar-item > .p-menubar-item-content > .p-menubar-item-link {
@@ -205,10 +207,6 @@ const theme = ({ dt }) => `
 
 .p-menubar-mobile-active .p-menubar-root-list {
     display: flex;
-    flex-direction: column;
-    top: 100%;
-    left: 0;
-    z-index: 1;
 }
 
 .p-menubar-mobile .p-menubar-root-list .p-menubar-item {
@@ -244,6 +242,7 @@ const theme = ({ dt }) => `
     box-shadow: none;
     border: 0 none;
     padding-left: ${dt('menubar.submenu.mobile.indent')};
+    padding-right: 0;
 }
 `;