Skip to content

Commit e563828

Browse files
gustavosbarretogustavosbarreto
committed
feat(ui): improve AppBar user menu design
1 parent 28954d2 commit e563828

File tree

4 files changed

+144
-96
lines changed

4 files changed

+144
-96
lines changed

‎ui/src/components/AppBar/AppBar.vue‎

Lines changed: 112 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -40,78 +40,121 @@
4040

4141
<v-spacer />
4242

43-
<v-tooltip
44-
location="bottom"
45-
class="text-center"
46-
>
47-
<template #activator="{ props }">
48-
<v-btn
49-
v-bind="props"
50-
size="medium"
51-
color="primary"
52-
aria-label="community-help-icon"
53-
icon="mdi-help-circle"
54-
data-test="support-btn"
55-
@click="openShellhubHelp()"
56-
/>
57-
</template>
58-
<span>Need assistance? Click here for support.</span>
59-
</v-tooltip>
60-
61-
<DevicesDropdown />
62-
63-
<v-menu>
64-
<template #activator="{ props }">
65-
<v-btn
66-
color="primary"
67-
v-bind="props"
68-
append-icon="mdi-menu-down"
69-
class="pl-2 pr-2 mr-4"
70-
data-test="user-menu-btn"
71-
>
72-
<UserIcon
73-
size="1.5rem"
74-
:email="userEmail"
75-
data-test="user-icon"
43+
<div class="d-flex align-center ga-4 mr-4">
44+
<v-tooltip
45+
location="bottom"
46+
class="text-center"
47+
>
48+
<template #activator="{ props }">
49+
<v-btn
50+
v-bind="props"
51+
size="medium"
52+
color="primary"
53+
aria-label="community-help-icon"
54+
icon="mdi-help-circle"
55+
data-test="support-btn"
56+
@click="openShellhubHelp()"
7657
/>
77-
</v-btn>
78-
</template>
79-
<v-list class="bg-v-theme-surface">
80-
<v-list-item
81-
v-for="item in menu"
82-
:key="item.title"
83-
:value="item"
84-
:data-test="item.title"
85-
@click="triggerClick(item)"
86-
>
87-
<div class="d-flex align-center">
88-
<v-icon
89-
:icon="item.icon"
90-
class="mr-2"
91-
/>
58+
</template>
59+
<span>Need assistance? Click here for support.</span>
60+
</v-tooltip>
61+
62+
<DevicesDropdown />
9263

93-
<v-list-item-title>
94-
{{ item.title }}
95-
</v-list-item-title>
96-
</div>
97-
</v-list-item>
98-
99-
<v-divider />
100-
101-
<v-list-item density="compact">
102-
<v-switch
103-
label="Dark Mode"
104-
:model-value="isDarkMode"
105-
:onchange="toggleDarkMode"
106-
data-test="dark-mode-switch"
107-
density="comfortable"
64+
<v-menu
65+
scrim
66+
location="bottom end"
67+
:offset="4"
68+
>
69+
<template #activator="{ props }">
70+
<v-btn
71+
v-bind="props"
72+
size="medium"
10873
color="primary"
109-
inset
110-
hide-details
111-
/>
112-
</v-list-item>
113-
</v-list>
114-
</v-menu>
74+
icon
75+
data-test="user-menu-btn"
76+
>
77+
<UserIcon
78+
size="1.5rem"
79+
:email="userEmail"
80+
data-test="user-icon"
81+
/>
82+
</v-btn>
83+
</template>
84+
85+
<v-card
86+
:width="$vuetify.display.thresholds.sm / 2"
87+
border
88+
>
89+
<v-list class="bg-v-theme-surface pa-0">
90+
<!-- User Profile Header -->
91+
<div class="pa-6 text-center">
92+
<UserIcon
93+
size="4rem"
94+
:email="userEmail"
95+
class="mb-4"
96+
data-test="user-icon-large"
97+
/>
98+
<div class="text-h6 font-weight-medium mb-1">
99+
{{ currentUser || userEmail }}
100+
</div>
101+
<div
102+
v-if="currentUser"
103+
class="text-body-2 text-medium-emphasis"
104+
>
105+
{{ userEmail }}
106+
</div>
107+
</div>
108+
109+
<v-divider />
110+
111+
<!-- Menu Items -->
112+
<div>
113+
<v-list-item
114+
v-for="item in menu"
115+
:key="item.title"
116+
:value="item"
117+
:data-test="item.title"
118+
:prepend-icon="item.icon"
119+
@click="triggerClick(item)"
120+
>
121+
<v-list-item-title class="font-weight-medium">
122+
{{ item.title }}
123+
</v-list-item-title>
124+
</v-list-item>
125+
</div>
126+
127+
<v-divider />
128+
129+
<!-- Dark Mode Toggle -->
130+
<v-list-item
131+
density="compact"
132+
@click="toggleDarkMode"
133+
>
134+
<template #prepend>
135+
<v-icon
136+
:icon="isDarkMode ? 'mdi-weather-sunny' : 'mdi-weather-night'"
137+
size="small"
138+
/>
139+
</template>
140+
<v-list-item-title class="text-body-2 font-weight-medium">
141+
{{ isDarkMode ? 'Light Mode' : 'Dark Mode' }}
142+
</v-list-item-title>
143+
<template #append>
144+
<v-switch
145+
:model-value="isDarkMode"
146+
data-test="dark-mode-switch"
147+
density="compact"
148+
color="primary"
149+
hide-details
150+
readonly
151+
/>
152+
</template>
153+
</v-list-item>
154+
</v-list>
155+
</v-card>
156+
</v-menu>
157+
</div>
115158
</v-app-bar>
116159
</template>
117160

‎ui/src/components/AppBar/DevicesDropdown.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
aria-label="Open devices menu"
55
icon="mdi-developer-board"
66
data-test="devices-icon"
7-
class="ml-3 mr-2"
87
@click="toggleDrawer"
98
/>
109

‎ui/tests/components/AppBar/__snapshots__/AppBar.spec.ts.snap‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -33,19 +33,22 @@ exports[`AppBar Component > Renders the component 1`] = `
3333
<!---->
3434
</ul>
3535
</div>
36-
<div class="v-spacer"></div><button type="button" class="v-btn v-btn--icon v-theme--light text-primary v-btn--density-default v-btn--variant-text" aria-describedby="v-tooltip-v-6" aria-label="community-help-icon" data-test="support-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
37-
<!----><span class="v-btn__content" data-no-activator=""><i class="mdi-help-circle mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
38-
<!---->
39-
<!---->
40-
</button>
41-
<!--teleport start-->
42-
<!--teleport end--><i class="mdi-developer-board mdi v-icon notranslate v-theme--light v-icon--size-default text-primary v-icon--clickable ml-3 mr-2" role="button" aria-hidden="false" tabindex="0" aria-label="Open devices menu" data-test="devices-icon"></i>
43-
<!--teleport start-->
44-
<!--teleport end--><button type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-default v-btn--variant-text pl-2 pr-2 mr-4" aria-haspopup="menu" aria-expanded="false" aria-controls="v-menu-v-14" aria-owns="v-menu-v-14" data-test="user-menu-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
45-
<!----><span class="v-btn__content" data-no-activator=""><div data-v-09753bb1="" class="v-avatar v-theme--light bg-primary v-avatar--density-default v-avatar--variant-flat border" style="width: 1.5rem; height: 1.5rem;" email="[email protected]" data-test="user-icon"><div data-v-09753bb1="" class="v-responsive v-img v-img--booting" data-test="gravatar-image"><div class="v-responsive__sizer"></div><!----><transition-stub name="fade-transition" appear="false" persisted="false" css="true"><!----></transition-stub><!----><!----><!----><!----></div><!----><span class="v-avatar__underlay"></span>
46-
</div></span><span class="v-btn__append"><i class="mdi-menu-down mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
47-
<!----></button>
48-
<!---->
36+
<div class="v-spacer"></div>
37+
<div class="d-flex align-center ga-4 mr-4"><button type="button" class="v-btn v-btn--icon v-theme--light text-primary v-btn--density-default v-btn--variant-text" aria-describedby="v-tooltip-v-6" aria-label="community-help-icon" data-test="support-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
38+
<!----><span class="v-btn__content" data-no-activator=""><i class="mdi-help-circle mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
39+
<!---->
40+
<!---->
41+
</button>
42+
<!--teleport start-->
43+
<!--teleport end--><i class="mdi-developer-board mdi v-icon notranslate v-theme--light v-icon--size-default text-primary v-icon--clickable" role="button" aria-hidden="false" tabindex="0" aria-label="Open devices menu" data-test="devices-icon"></i>
44+
<!--teleport start-->
45+
<!--teleport end--><button type="button" class="v-btn v-btn--icon v-theme--light text-primary v-btn--density-default v-btn--variant-text" aria-haspopup="menu" aria-expanded="false" aria-controls="v-menu-v-14" aria-owns="v-menu-v-14" data-test="user-menu-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
46+
<!----><span class="v-btn__content" data-no-activator=""><div data-v-09753bb1="" class="v-avatar v-theme--light bg-primary v-avatar--density-default v-avatar--variant-flat border" style="width: 1.5rem; height: 1.5rem;" email="[email protected]" data-test="user-icon"><div data-v-09753bb1="" class="v-responsive v-img v-img--booting" data-test="gravatar-image"><div class="v-responsive__sizer"></div><!----><transition-stub name="fade-transition" appear="false" persisted="false" css="true"><!----></transition-stub><!----><!----><!----><!----></div><!----><span class="v-avatar__underlay"></span>
47+
</div></span>
48+
<!---->
49+
<!----></button>
50+
<!---->
51+
</div>
4952
<!---->
5053
</div>
5154
<transition-stub name="expand-transition" appear="false" persisted="false" css="true">

‎ui/tests/layouts/__snapshots__/AppLayout.spec.ts.snap‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -305,19 +305,22 @@ exports[`App Layout Component > Renders the component 1`] = `
305305
<!---->
306306
</ul>
307307
</div>
308-
<div class="v-spacer"></div><button type="button" class="v-btn v-btn--icon v-theme--light text-primary v-btn--density-default v-btn--variant-text" aria-describedby="v-tooltip-v-13" aria-label="community-help-icon" data-test="support-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
309-
<!----><span class="v-btn__content" data-no-activator=""><i class="mdi-help-circle mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
310-
<!---->
311-
<!---->
312-
</button>
313-
<!--teleport start-->
314-
<!--teleport end--><i class="mdi-developer-board mdi v-icon notranslate v-theme--light v-icon--size-default text-primary v-icon--clickable ml-3 mr-2" role="button" aria-hidden="false" tabindex="0" aria-label="Open devices menu" data-test="devices-icon"></i>
315-
<!--teleport start-->
316-
<!--teleport end--><button type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-default v-btn--variant-text pl-2 pr-2 mr-4" aria-haspopup="menu" aria-expanded="false" aria-controls="v-menu-v-21" aria-owns="v-menu-v-21" data-test="user-menu-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
317-
<!----><span class="v-btn__content" data-no-activator=""><div data-v-09753bb1="" class="v-avatar v-theme--light bg-primary v-avatar--density-default v-avatar--variant-flat border" style="width: 1.5rem; height: 1.5rem;" email="" data-test="user-icon"><i data-v-09753bb1="" class="mdi-account mdi v-icon notranslate v-theme--light v-icon--size-default text-surface" aria-hidden="true" data-test="gravatar-placeholder"></i><!----><span class="v-avatar__underlay"></span>
318-
</div></span><span class="v-btn__append"><i class="mdi-menu-down mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
319-
<!----></button>
320-
<!---->
308+
<div class="v-spacer"></div>
309+
<div class="d-flex align-center ga-4 mr-4"><button type="button" class="v-btn v-btn--icon v-theme--light text-primary v-btn--density-default v-btn--variant-text" aria-describedby="v-tooltip-v-13" aria-label="community-help-icon" data-test="support-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
310+
<!----><span class="v-btn__content" data-no-activator=""><i class="mdi-help-circle mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
311+
<!---->
312+
<!---->
313+
</button>
314+
<!--teleport start-->
315+
<!--teleport end--><i class="mdi-developer-board mdi v-icon notranslate v-theme--light v-icon--size-default text-primary v-icon--clickable" role="button" aria-hidden="false" tabindex="0" aria-label="Open devices menu" data-test="devices-icon"></i>
316+
<!--teleport start-->
317+
<!--teleport end--><button type="button" class="v-btn v-btn--icon v-theme--light text-primary v-btn--density-default v-btn--variant-text" aria-haspopup="menu" aria-expanded="false" aria-controls="v-menu-v-21" aria-owns="v-menu-v-21" data-test="user-menu-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
318+
<!----><span class="v-btn__content" data-no-activator=""><div data-v-09753bb1="" class="v-avatar v-theme--light bg-primary v-avatar--density-default v-avatar--variant-flat border" style="width: 1.5rem; height: 1.5rem;" email="" data-test="user-icon"><i data-v-09753bb1="" class="mdi-account mdi v-icon notranslate v-theme--light v-icon--size-default text-surface" aria-hidden="true" data-test="gravatar-placeholder"></i><!----><span class="v-avatar__underlay"></span>
319+
</div></span>
320+
<!---->
321+
<!----></button>
322+
<!---->
323+
</div>
321324
<!---->
322325
</div>
323326
<transition-stub name="expand-transition" appear="false" persisted="false" css="true">

0 commit comments

Comments
 (0)