TWE-21 - BE - Secondary Navigation

[SharmaineLim]

Link to Ticket

Description of Changes Made

It might be easier to review this on a per-commit view.

This PR does 2 things:

1. Create a BasePage that other pages can inherit from, instead of having to add the same 5 mixins to each page type.
2. Add a secondary navigation (which is different from the primary navigation at the top of each page).

Design screenshots of the secondary nav

Potentially outdated design:

Alternative nav menu content:

BasePage

Main commit: 88d3089

• Create BasePage that is a subclass all the usual mixins all page types share.
• Update all the page types to be a subclass of BasePage.
• Move ContactMixin to prevent circular dependencies.

Secondary nav

• Create the Navigation Set snippet (c5aba2c). This is where admins can configure the navigation menus available. (e.g. one navigation set for Charity, one navigation set for Public Sector, etc.)
• Create the NavigationSetMixin (49cbc88). Similar to ThemeColourMixin and DivisionMixin, this:
  1. creates a new field "override navigation set" on each page so you can choose which navigation set to show on the page
  2. adds a new property navigation_set to determine which navigation set to show: this will use the override if it's set, but otherwise will use the inherited navigation set
• Add NavigationSetMixin to the BasePage (9a08aa6), and add DivisionMixin to the BasePage while we're at it– except for the homepage (TWE-20).
• Temporarily display the nav on the division page so the FE devs can see it. (ccae3b9)
  • I'm inclined to put it in the header.html & <header> tags, but it would need tweaks on the FE side because it's currently styled to be used only by the primary navigation.

How to Test

1. Create a navigation set.
2. Add a navigation set to a division page. (Promote tab > Override navigation set)
3. Check the preview.

Screenshots

Snippet editor

Page editor

MR Checklist

• Add a description of your pull request and instructions for the reviewer to verify your work.
• If your pull request is for a specific ticket, link to it in the description.
• Stay on point and keep it small so the merge request can be easily reviewed. (ahem)
• Tests and linting passes.

Unit tests

• Added
• Not required

Documentation

• Updated build docs
• Updated editor guidelines (See https://intranet.torchbox.com/torchbox-com-project-docs for the private link, for Torchbox employees only)
• Updated field spec (See https://intranet.torchbox.com/torchbox-com-project-docs for the private link, for Torchbox employees only)
• Not required

Browser testing

• I have tested in the following browsers and environments (edit the list as required)
  • Latest version of Chrome on mac
  • Latest version of Firefox on mac
  • Latest version of Safari on mac
  • Safari on last two versions of iOS
  • Chrome on last two versions of Android
• Not required

Data protection

• Not relevant
• This adds new sources of PII and documents it and modifies Birdbath processors accordingly

Light and dark mode

• I have tested the changes in both light and dark mode
• The change is not relevant to dark and light mode

Accessibility

• Automated WCAG 2.1 tests pass
• HTML validation passes
• Manual WCAG 2.1 tests completed
• I have tested in a screen reader
• I have tested in high-contrast mode
• Any animations removed for prefers-reduced-motion
• Not required

Sustainability

• Images are optimised and lazy-loading used where appropriate
• SVGs have been optimised
• Perfomance and transfer of data considered
• If JavaScript is needed alternatives have been considered
• Not required

Pattern library

• The pattern library component for this template displays correctly, and does not break parent templates
• The styleguide is updated if relevant
• Changes are not relevant the pattern library

[engineervix]

Thanks @SharmaineLim this is looking great 👍

Left a few suggestions

[engineervix]

Thanks @SharmaineLim
Happy for this to move forward once the RevisionMixin recommendation is addressed.