Site nav

[klepas]

Implement as an include and ideally place the SASS into UI-Kit; if not sure we can keep this as application SASS inside the dto-design-guide repo and refactor it upstream into UI-Kit later once we have more assurance on the feature.

Blocks:

• [x] Design solution for global + site navigation
• [x] Design solution for global + site nav + search
• [x] How do the top level + child items work on mobile

To do:

• [ ] Re-investigate the tablet-landscape breakpoints I created
• [ ] Implement child items for mobile–tablet views
• [ ] Implement expand/contract with menu ‘button’ or menu hamguber icon via JS
• [ ] Check over markup and add a template example file.
• [ ] Check over SASS and incorporate into codebase.
• [ ] Testing.

[klepas]

We need to discuss what the deprecation process will be like for the existing global-nav feature (since we may have a namespace clash).

[klepas]

Quick reference implementation (NOT fully complete as per the mockup):

• https://github.com/AusDTO/dta-website/blob/develop/_assets/scss/partials/_header.scss
• https://github.com/AusDTO/dta-website/blob/develop/_includes/header.html

[private repo]

[klepas]

We need to have a quick chat re. the deprecation of the existing, semi-complete .global-nav, and how we’re going to pull the above noted draft implementation over into the ui-kit, and then when we’ll do the release.

[petronbot]

As per chats in Slack, we'll leave Global nav in UI Kit for now as it is, since it has a purpose that's distinct from the new styles.

The new nav style can be .site-nav, meaning we'll have 3 levels of navigation to choose from:

1. Global nav: for when you're linking to different sites or distinct sections within a site
2. Site nav: for linking to different areas of the same site
3. Local nav: for linking to related sections of content

[klepas]

Remaining tasks:

Edit from Petch: Pls see Issue description above for To do list

[klepas]

@gazhands Hey, I just realised the design guide site-nav header is missing the grey bar that our nav item :hover styling sits on — compare:

@petronbot We also have this mobile design from Gaz:

I think the idea here is that it represents the state of a user having opened on of the top-level site nav items to see its children; access to child items is only available in mobile/tablet view.

Next up I’ll show some screenshots of the current DTA website draft implementation.

[klepas]

@gazhands is there a reason why the search input design differs from the UI-Kit text input fields?

[petronbot]

@gazhands Where do 2nd level nav items go on desktop?

[petronbot]

@klepas Confirming that the 'grey bar' should be there on desktop

[hannah-ustwo]

To swarm on today with design and dev

[gazhands]

[petronbot]

@gazhands The updated mocks are looking good - they solve all the blocks we'd put down 👍

[klepas]

@gazhands @petronbot General agreement — these look really good.

Two interaction-related thoughts/concerns:

1. The proximity of the hamburger icon for the whole-of-guides slide-in nav and the on-page site-nav, for that guide — I think it might be a bit confusing. Thoughts?
2. The mobile expanded view implies that the search box is a nav item, which I don’t think it should be (or should it…)?

[klepas]

I heard via Petch that we might ignore the whole-of-guides nav (grey bar) for now — if we move the search box in mobile view to its position (above the logo, I know…) I think we could avoid the search functionality becoming a nav item. What do ya’ll reckon? (: