Spectre: Responsive Navbar (burger icon)

[san-kumar]

I just discovered Spectre today and totally loving it.

Anyway, my question is the navbar component is not responsive. I searched the issues and as per the last discussion the owner @picturepan2 quoted that he is working on a css solution.

Anyway, so just how you guys are doing it? Or am I missing something?

I am coming from Bulma and that framework also has no JS but what they've done is implemented a "navbar-burger" and left the Javascript implement to the programmer (quote from the docs: "The Bulma package does not come with any JavaScript. Here is however an implementation example, which toggles the class is-active on both the navbar-burger and the targeted navbar-menu, in Vanilla Javascript." If you're using Vue then this implementation is a simple v-show="active = !active")

I'm guessing something similar can be done for Spectre too? Will make life lot easy!

[tunjioye]

That is very true.

Since I started using Spectre, I don't use the BURGER MENU for Navbar. What
I do is hide the navbar menu (LEFT & RIGHT) when the screen is small and
show another alternative menu (JUST BELOW the APP LOGO) instead.

But just like you said it is very advisable to have a BURGER MENU in
Spectre CSS itself.

I recommend @picturepan2 that we work on this (adding BURGER MENU) towards
the next version update.

On Jul 19, 2018 9:39 PM, "San Kumar" [e-mail] wrote:

I just discovered Spectre today and totally loving it.

Anyway, my question is the navbar component is not responsive. I searched
the issues and as per the last discussion the owner @picturepan2
https://github.com/picturepan2 quoted that he is working on a css
solution
https://github.com/picturepan2/spectre/issues/302#issuecomment-334498189
.

Anyway, so just how you guys are doing it? Or am I missing something?

I am coming from Bulma and that framework also has no JS but what they've
done is implemented a "navbar-burger" and left the Javascript implement to
the programmer (quote from the docs
https://bulma.io/documentation/components/navbar/#navbar-menu: "The
Bulma package does not come with any JavaScript. Here is however an
implementation example, which toggles the class is-active on both the
navbar-burger and the targeted navbar-menu, in Vanilla Javascript." If
you're using Vue then this implementation is a simple v-show="active =
!active")

I'm guessing something similar can be done for Spectre too? Will make life
lot easy!

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/picturepan2/spectre/issues/471, or mute the thread
https://github.com/notifications/unsubscribe-auth/AJhHArxiKu99_-UR0qHI4u_BK3mcyuK_ks5uIO5pgaJpZM4VXDmn
.

[vatson]

@san-kumar

Have you looked at Off-canvas already?

[san-kumar]

@vatson I did but iirc that was for sidebar not the main header nav?

[marko-stimac]

+1, I am trying out Spectre and it feels kinda weird that collapsed navbar is not supported. Generally from a framework I only need that functionality for smaller screens + some grid for fast prototyping, other things aren't really important

[Abdur-rahmaanJ]

@picturepan2 Grrr ^^ this is hugely needed. Maybe a spectre JS soon???