New sidebar menu - Githubissues

ttbarnes commented 9 years ago

Acceptance criteria (TBC):

Allows second level nesting
Styling/branding/theme (TBC - we shouldn't really use the default)

ttbarnes commented 9 years ago

Thinking of extending this: http://multi-level-push-menu.make.rs/demo/basichtml/basichtml.html https://github.com/adgsm/multi-level-push-menu

ljwagerfield commented 9 years ago

What about a simpler menu? It satisfies the criteria of supporting secondary nav, but it does it in a very unfamiliar way.

ljwagerfield commented 9 years ago

Acceptance criteria:

SM-LG devices: primary navigation links appear in header.
MD-LG devices: secondary navigation sidebar appears in visible sidebar.
XS-SM devices: flyout sidebar revealing access to primary and secondary navigation (only for current branch, or entire site?)

ljwagerfield commented 9 years ago

Just had another look at this: http://getbootstrap.com/examples/offcanvas/

I provides similar functionality, so my feeling would be to try and make this work.

What I don't like is that a secondary pill is introduced. If we can get the existing pill in the header to pop-out this menu instead, then we're away :D

ljwagerfield commented 9 years ago

Tried Bootstrap: no good. Does not work well for SM devices: we get issues with there being an arbitrary side padding on SM devices, which the 'offcanvas' sidebar was not designed for (it's only intended for XS devices).

This is the exact functionality we're looking for: https://hi.co/

Except for:

Use the existing pill in the header bar to active it (we feel this is more familiar).
Slide from right.
Only visible on XS and SM devices.

jamesthurley commented 9 years ago

Feedly.com also have a pretty good side menu, but the hi.co one is probably the benchmark.

On that hi.co page you click on the "hi" logo to bring out the menu.. it really isn't obvious.

ttbarnes commented 9 years ago

@ljwagerfield @jamesthurley I've pushed a new branch called 'sidebar' - let me know what you think :)

It's not finished yet - want to see what you think. Need to test the dashboard links, browser test, and cleanup.

I'm not sure about the sliding from the right, maybe from the left instead, feels more nature imo.

This branch also includes separating some HTML into partials: #59

jamesthurley commented 9 years ago

@ttbarnes Looks really slick! The feel of it is great. At the moment it re-lightens the main content area at the end of the hide transition... would it be easy to lighten it at the start of the transition instead?

Like you I'd also prefer it coming in from the left, just to conform to other sites and apps... but we'd have to move the Fifthweek logo at small sizes... maybe centre it. @ljwagerfield what do you think?

ljwagerfield commented 9 years ago

First thoughts are consistency with the secondary nab currently being right-aligned on MD and LG devices when the sidebar won't be visible. Not sure if that's enough reason to comprising being consistent with other products, as I agree with what you say there. Will sleep on it!

On Sun, Dec 14, 2014 at 6:35 PM, James Thurley notifications@github.com wrote:

@ttbarnes Looks really slick! The feel of it is great. At the moment it re-lightens the main content area at the end of the hide transition... would it be easy to lighten it at the start of the transition instead?

Like you I'd also prefer it coming in from the left, just to conform to other sites and apps... but we'd have to move the Fifthweek logo at small sizes... maybe centre it. @ljwagerfield what do you think?

Reply to this email directly or view it on GitHub: https://github.com/fifthweek/fifthweek-web/issues/54#issuecomment-66923558

ttbarnes commented 9 years ago

Thanks guys,

(for mobile), we could have the nav toggle aligned to the left, like this:

sshot

Like James mentioned we could also center the logo.

I don't think the navs on mobile/desktop need to have the same alignment because they're two different experiences.

ljwagerfield commented 9 years ago

I'm happy with that. Also need to consider primary navigation links on SM devices - I anticipated these would stay visible in the header. Not sure how centering the logo would affect this.

To clarify:

We don't want to introduce additional clicks where unnecessary.
XS devices have no room for primary or secondary navigation.
SM devices have no room for secondary navigation, but do support primary.
MD and LG devices have room for both, so don't require a collapsing sidebar.

On Mon, Dec 15, 2014 at 9:23 AM, Tony Barnes notifications@github.com wrote:

Thanks guys, (for mobile), we could have the nav toggle aligned to the left, like this: Like James mentioned we could also center the logo.

I don't think the navs on mobile/desktop need to have the same alignment because they're two different experiences.

Reply to this email directly or view it on GitHub: https://github.com/fifthweek/fifthweek-web/issues/54#issuecomment-66967583

ttbarnes commented 9 years ago

Updated.

Primary links appear in the header from 500px +. Sidebar toggle disappears at 500px.
I looked into altering the fade in/out animation @jamesthurley - we should look at this in the future because it will require some bigger modifications of snapjs.
Also tried centring the logo, It looks a bit odd with the primary nav items aligned to the left. I think the logo looks great aligned to the left.

I'm a bit blocked until I can login with localhost, so I can properly test the navigation.

For now, if you navigate to #/account, you'll see that the sidebar toggle is visible up to 992px. So moving forwards, if we want a view to display secondary links in the sidebar, we just have to declare it in the controller, using $rootScope:

$rootScope.secondaryNav = true;

ljwagerfield commented 9 years ago

Can't wait to take a sneaky peek!

@jamesthurley and I are figuring out a way to get you access to the API...

ljwagerfield commented 9 years ago

Looking at this now for the Creator MVP wireframes. I'm thinking about the button alignment again, and whether the menu should slide from left or right.

I'm still leaning towards right, only because the secondary nav on MD+ devices is on the right too. I appreciate the comment about mobile and desktop being different experiences, however, SM is still a desktop experience.

I often find myself switching between SM, MD and LG quite naturally when organising my desktop, so when secondary navigation disappears on SM, it needs to be in an obvious place. I'm already looking down the right hand-side, since that's where the navigation used to be, and its also where the primary navigation links are aligned to.

What are everyone's thoughts on this?

(Regarding consistency with other apps: Facebook have their's on the right)

ttbarnes commented 9 years ago

Sounds good @ljwagerfield , looking forward to seeing the wireframes.

I can polish up the sidebar and secondary nav items appearing inside when we have login access :)

I think a left or right sidebar will work either way. It seems that the majority of apps use the left hand side. We don't have to follow trend.

About displaying the nav on SM. We could display the nav at the top (covering an entire row), and then slot into the right hand side from MD+, or maybe just before this.

ljwagerfield commented 9 years ago

Yes, this could work for displaying secondary nav on SM, although we'd have to arrange the links horizontally to prevent consuming excessive vertical space.

This would work for pages that have only a secondary navigation and no other components. However, our intention is to have other components appear in the 'fixed' sidebar. For that reason, we need a scalable space to work with on SM devices - the collapsable sidebar would solve that problem.

jamesthurley commented 9 years ago

@ttbarnes You now have login access :+1: See my comments in Slack or the readme for this project.

fifthweek / fifthweek-web

New sidebar menu #54

Like you I'd also prefer it coming in from the left, just to conform to other sites and apps... but we'd have to move the Fifthweek logo at small sizes... maybe centre it. @ljwagerfield what do you think?

I don't think the navs on mobile/desktop need to have the same alignment because they're two different experiences.