No More Posting New Topics!

@acros

You can see what becomes of q-layout in chrome inspector.

Screen Shot 2020-11-09 at 16.19.17.png

If you use q-layout (you are using Quasar) you will have to put elements inside it which are compatible with q-layout. It only make sense that way.

As you found out a single un-styled div isn’t compatible. While it isn’t impossible to make it compatible … you will likely going to rebuild q-headerin the process. And this extra work you are doing for what ?

So the options are

a, Style your custom component so it is compatible with q-layout.
b, Create your own layout and not use q-layout. I think you will miss out on a lot. q-drawer to start with. Unless of course you make your layout compatible with q-drawer.
c, the best IMO is to use q-layout with the already provided compatible elements after all why reinvent the wheel.

@dobbel : yes, thanks. I actually restarted from the bootstrapped skeleton keeping the structure. It will help in future apps to be consistent.

@tof06 Sorry for late response, it works thanks so much

Try with this https://quasar.dev/layout/grid/flex-playground

I got it working using events and wrapping <q-side-link> to emit an event when exactActiveClass is present.

<!-- link.group is a unique string --> <q-collapsible :ref="link.group" v-if="link.isCollapsible" v-bind="link"> <sidebar-navigation-item item exact v-for="sublink in link.sublinks" v-bind="sublink" :parent-ref="link.group" @active="openActiveCollapsible" /> </q-collapsible> ... methods: { openActiveCollapsible(ref) { this.$refs[ref][0].open() } } // in <sidebar-navigation-item> mounted() { if (this.$el.classList.contains(this.exactActiveClass)) { this.$emit('active', this.parentRef); } }