Horizontal menu, not drawer menu, what options do I have?

[wolfiton]

Hi everyone,

I want a horizontal menu that starts opened like this one

https://youtu.be/aOI0fpahGr8?t=108

Do I need to define my own component like in Vue or there is a better way to do this?

New to Quasar but have some Vue experience.

Thanks in advance

[s.molinari]

Yeah. There is nothing like that in the Quasar repertoire. That would need to be something custom for sure. Would be a cool App Extension, if you do put it together as a component.

Scott

[wolfiton]

Thanks for the quick response @s-molinari

[wolfiton]

I will have to build this component for myself, so what would be the preferred way in a Vue component or directly in quasar as a component?(with slots)

I am asking because I wanted to make it flexible and also share it with you(quasar comunity and team).

[wolfiton]

My component for the h menu, work in progress https://github.com/wolfiton/horizontal-menu

Also please see this thread with the current problem for this custom component

https://forum.quasar-framework.org/topic/5502/problem-understanding-why-the-transition-doesn-t-transfer-to-the-sloted-content

[wolfiton]

To see it in action comment this code in MainLayout.vue

<q-list
            v-if="show"
            dense
            bordered
            padding
            class="rounded-borders h-nav"
          >
            <q-item clickable v-ripple>
              <q-item-section>
                Slotted
              </q-item-section>
            </q-item>
          </q-list>

[wolfiton]

Can I get some feedback on this menu animation?(opinions comments)

Thanks

[s.molinari]

Probably be better, if you put together a codepen or a sandbox. Then we can play with it.

Scott

[wolfiton]

@s-molinari

Thanks, I created a codesanbox here menu-animation

[s.molinari]

Actually, I saw someone use a Floating Action Button for the same sort of thing. They just had the menu buttons going out of the hamburger (and it was a different icon).

In general though, not bad.

Scott

[wolfiton]

Really interesting because this animation was created by me from scratch. So apparently others used the same technique.

Thanks for the feedback.

[s.molinari]

Actually, it was a hamburger icon. https://simple-ledger-app.netlify.com/#/

https://github.com/nkb-bd/quasar-ledger-app

Scott

[wolfiton]

Thanks @s-molinari, for sharing the transition of the menu looks interesting.