nhsuk / nhsapp-frontend

NHS App specific styles on top of nhsuk-frontend
MIT License
4 stars 0 forks source link

Add side navigation #56

Closed davidhunter08 closed 2 months ago

davidhunter08 commented 2 months ago

https://github.com/nhsuk/nhsapp-frontend/issues/5

davidhunter08 commented 2 months ago

@mikemonteith

Not rendering CSS as mixin's are undefined (eg: @include nhsuk-font($size: 16);)

Screenshot 2024-04-24 at 10 33 30

Same problem for @include mq($until: tablet).

mikemonteith commented 2 months ago

@import "node_modules/nhsuk-frontend/packages/core/all.scss"; is in app.scss, does that not include mixins etc?

davidhunter08 commented 2 months ago

@mikemonteith

Not rendering CSS as mixin's are undefined (eg: @include nhsuk-font($size: 16);)

Screenshot 2024-04-24 at 10 33 30

Same problem for @include mq($until: tablet).

Fixed with https://github.com/nhsuk/nhsapp-frontend/pull/57

davidhunter08 commented 2 months ago

@mikemonteith

Could you look into how to add an active class to nav items?

On the component page layout, we call in the side navigation macro from the partials folder and add this code below...

{% macro sideNavigation(config) %}
  {% set config = config|addActiveAttribute(page.filePathStem | url) %}

  {{ appSideNavigation(config) }}
{% endmacro %}

When the side nav item is active it should have the class app-side-navigation__item--active and look like this...

Screenshot 2024-04-24 at 13 19 32