# Dashboard dropdown menu

**URL:** <https://community.gladysassistant.com/t/menu-deroulant-dashboard/7835>\
**Category:** Demandes livrées\
**Tags:** dashboard, feature-core, feature-request-ux\
**Created:** [January 15, 2023, 12:05pm UTC](https://community.gladysassistant.com/t/menu-deroulant-dashboard/7835 "2023-01-15T12:05:56Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tlse-vins](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/tlse-vins/32/6054_2.png) [@Tlse-vins](https://community.gladysassistant.com/u/Tlse-vins)\
**Post date:** [January 15, 2023, 12:05pm UTC](https://community.gladysassistant.com/t/menu-deroulant-dashboard/7835/1 "2023-01-15T12:05:56Z")

</div>

I’m following up on @pierre-gilles’s message to improve the UX.

Ensure the dashboards dropdown menu closes when clicking outside of it.

Edit: it’s the same when you click your name to go to settings — the menu doesn’t close if you click outside of it.

---

<div class="post-metadata">

**Author:** ![guim31](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/guim31/32/4840_2.png) [@guim31](https://community.gladysassistant.com/u/guim31)\
**Post date:** [January 15, 2023, 12:26pm UTC](https://community.gladysassistant.com/t/menu-deroulant-dashboard/7835/2 "2023-01-15T12:26:56Z")

</div>

I vote for it, because it’s a very small piece of code we’re talking about… But I wonder (and I think I mentioned it here) whether we could perhaps consider a different layout for the dashboards list.

Because, for example, for me it forces me to do a lot of clicks:

 ![Screenshot_2023-01-15-13-26-27-234_com.android.chrome](https://gladys-assistant-community.b-cdn.net/uploads/default/original/2X/a/aa312a08eef2e4e707febb0ebf015a03e4fe93a1.jpeg)

---

<div class="post-metadata">

**Author:** ![Tlse-vins](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/tlse-vins/32/6054_2.png) [@Tlse-vins](https://community.gladysassistant.com/u/Tlse-vins)\
**Post date:** [January 15, 2023, 1:18pm UTC](https://community.gladysassistant.com/t/menu-deroulant-dashboard/7835/3 "2023-01-15T13:18:13Z")

</div>

I have as many dashboards as you.  
I remember you had already mentioned it.

From what I recall, Pierre-Gilles isn’t keen on tabbed displays like in Chrome, for example.

I think that on a PC view, a side panel can offer a more significant advantage, and on a smartphone, a dropdown menu.

---

<div class="post-metadata">

**Author:** ![guim31](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/guim31/32/4840_2.png) [@guim31](https://community.gladysassistant.com/u/guim31)\
**Post date:** [January 15, 2023, 1:21pm UTC](https://community.gladysassistant.com/t/menu-deroulant-dashboard/7835/4 "2023-01-15T13:21:16Z")

</div>

I second the sidebar on PC / tablet 👌 I think it would be a great

---

<div class="post-metadata">

**Author:** ![b3n.0](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/b3n.0/32/3458_2.png) [@b3n.0](https://community.gladysassistant.com/u/b3n.0)\
**Post date:** [January 15, 2023, 8:02pm UTC](https://community.gladysassistant.com/t/menu-deroulant-dashboard/7835/5 "2023-01-15T20:02:57Z")

</div>

The sidebar seems fine to me too…  
For smartphone navigation I recently suggested a swipe:

> [@Navigation horizontale dashboard sur mobile](https://community.gladysassistant.com/t/navigation-horizontale-dashboard/7824?u=b3n.0):
>
> Il s’agirait de pouvoir naviguer entre les différents dashboard via un scroll latéral lors de l’utilisation de Gladys sur mobile

---

<div class="post-metadata">

**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\
**Post date:** [January 16, 2023, 4:26am UTC](https://community.gladysassistant.com/t/menu-deroulant-dashboard/7835/6 "2023-01-16T04:26:01Z")

</div>

Good idea for the side panel on wide screens

On smartphones, a horizontal swipe is a good idea too, but it’s a more complex project than it appears, because currently when you click a button to switch dashboards, we literally do a full load of the selected dashboard

Having a smooth horizontal swipe completely changes the paradigm; you have to either:

- Show a «&nbsp;skeleton&nbsp;» when swiping and load the dashboard on demand (so with a not-super-smooth effect because the dashboard won’t be available immediately)
- Load all dashboards as soon as the first dashboard is initially displayed (but maybe too heavy in terms of performance)
- Anticipate the swipe and load the dashboards «&nbsp;around&nbsp;» the current dashboard (a kind of middle ground)

In short, it’s a bit of research for whoever will develop this; in my opinion it’s far from being a quick win 🙂

---

<div class="post-metadata">

**Author:** ![lmilcent](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/lmilcent/32/7023_2.png) [@lmilcent](https://community.gladysassistant.com/u/lmilcent)\
**Post date:** [January 16, 2023, 8:48am UTC](https://community.gladysassistant.com/t/menu-deroulant-dashboard/7835/7 "2023-01-16T08:48:52Z")

</div>

And development in two phases: simple on PC then more advanced on small screens, is that doable?  
We keep the quick win without forgetting the next development.

---

<div class="post-metadata">

**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\
**Post date:** [January 16, 2023, 8:59am UTC](https://community.gladysassistant.com/t/menu-deroulant-dashboard/7835/8 "2023-01-16T08:59:10Z")

</div>

Everything is playable! I’m also open to PRs on the topic — it saves me time 😉

---

<div class="post-metadata">

**Author:** ![MathieuA](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/mathieua/32/22211_2.png) [@MathieuA](https://community.gladysassistant.com/u/MathieuA)\
**Post date:** [January 16, 2023, 2:42pm UTC](https://community.gladysassistant.com/t/menu-deroulant-dashboard/7835/9 "2023-01-16T14:42:39Z")

</div>

Hello !

If I may, we should rather consider a hybrid solution between the first and the third solution →

> [@pierre-gilles](#):
>
> Display a «&nbsp;skeleton&nbsp;» when swiping and lazy-load the dashboard on demand (so with a not very smooth effect because the dashboard won’t be available immediately)

[quote=«&nbsp;pierre-gilles, post:6, topic:7835&nbsp;»]  
Anticipate the swipe and load the dashboards «&nbsp;around&nbsp;»

---

<div class="post-metadata">

**Author:** ![guim31](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/guim31/32/4840_2.png) [@guim31](https://community.gladysassistant.com/u/guim31)\
**Post date:** [January 16, 2023, 4:26pm UTC](https://community.gladysassistant.com/t/menu-deroulant-dashboard/7835/10 "2023-01-16T16:26:33Z")

</div>

My small contribution — would this: [https://codepen.io/jmyrland/pen/VwYdjX](https://codepen.io/jmyrland/pen/VwYdjX)

be viable?

Basically:

- PC / tablet usage: the side menu is displayed
- smartphone usage: you swipe to make the menu appear

The advantage is that it lets you use the same system regardless of platform, right? No need to develop two separate things.

If I’m way off, tell me ^^

---

<div class="post-metadata">

**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\
**Post date:** [January 17, 2023, 2:15am UTC](https://community.gladysassistant.com/t/menu-deroulant-dashboard/7835/11 "2023-01-17T02:15:30Z")

</div>

It’s doable, but I don’t necessarily see the point compared to the current solution — we end up with the same number of clicks!

---

<div class="post-metadata">

**Author:** ![guim31](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/guim31/32/4840_2.png) [@guim31](https://community.gladysassistant.com/u/guim31)\
**Post date:** [January 17, 2023, 10:56am UTC](https://community.gladysassistant.com/t/menu-deroulant-dashboard/7835/12 "2023-01-17T10:56:34Z")

</div>

The difference is more that on mobile, if I’m at the bottom of a dashboard, I have to:

- scroll back to the top of the page
- stretch my fingers wide to reach and click the select (or use my other hand)

With a sidebar menu you can access it without changing your position on the page, no scrolling or big finger stretches ^^ (I’m for injury prevention haha

---

<div class="post-metadata">

**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\
**Post date:** [January 18, 2023, 2:59am UTC](https://community.gladysassistant.com/t/menu-deroulant-dashboard/7835/13 "2023-01-18T02:59:01Z")

</div>

Looking at what Tabler (our theme) offers, there are some interesting layouts in their latest version:

 ![Screenshot 2023-01-18 at 09.57.38](https://gladys-assistant-community.b-cdn.net/uploads/default/original/2X/9/96d9af7fb175d043b9f48f01b3ece95de3506b44.jpeg)

---

<div class="post-metadata">

**Author:** ![Tlse-vins](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/tlse-vins/32/6054_2.png) [@Tlse-vins](https://community.gladysassistant.com/u/Tlse-vins)\
**Post date:** [January 18, 2023, 2:48pm UTC](https://community.gladysassistant.com/t/menu-deroulant-dashboard/7835/14 "2023-01-18T14:48:32Z")

</div>

It’s the same when you click on your name to go to settings; the menu doesn’t close if you click outside of it.

---

<div class="post-metadata">

**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\
**Post date:** [February 6, 2023, 6:55am UTC](https://community.gladysassistant.com/t/menu-deroulant-dashboard/7835/15 "2023-02-06T06:55:42Z")

</div>

> [@Tlse-vins](#):
>
> Ensure the dashboards dropdown menu closes if you click outside of it.

It’s fixed in my UX pass :

> [@Pouvoir déplacer un bloc d'une colonne à l'autre](https://community.gladysassistant.com/t/pouvoir-deplacer-un-bloc-dune-colonne-a-lautre/6068/9?u=pierre-gilles):
>
> Comme prévu, j’ai travaillé sur ce sujet slight_smile Quelques rendus : Nouveau tableau de bord : Et une démo en vidéo :

Merged into master, it will be included in the next Gladys release.

I’m closing this topic to free up the votes.

---

<div class="post-metadata">

**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\
**Post date:** [February 6, 2023, 6:55am UTC](https://community.gladysassistant.com/t/menu-deroulant-dashboard/7835/16 "2023-02-06T06:55:49Z")

</div>


