FEAT: NavBar aanpassingen

[Rerbun]

Context Het gebruik van de NavBar is niet helemaal gebruiksvriendelijk voor developer. Nu dien je verplicht allerlei props in te vullen die mogelijk niet wenselijk zijn. Bijv:

• Mogelijk wil je een item toevoegen die niet klikbaar is omdat je op die pagina zit of dat het de naam van de pagina is.

Oplossingsrichting Voor het niet klikbaar maken:

• href niet forceren, maar optioneel maken. Vervolgens dan ook zorgen dat deze niet klikbaar wordt. Daarnaast kan het meegeven van een level/appearance aan de heading de styling bevorderen.

...Styling voor mobiele apparaten...

[Rerbun]

// Navbar voorbeeld met button
<NavBar
  className={clsx({ 'rhc-nav-bar--mobile-collapsed': navBarMobileCollapsed})}
  // (en item props)
>
  <IconButton 
    className="mobile-only"
    onClick={() => setNavBarMobileCollapsed((value) => !value)}
    icon="menu"
    label="Menu in- en uitklappen"
   />
</NavBar>

// Navbar styling voorbeeld
.mobile-only { 
  display: none;
}

@media (width <= 768px) {
  .mobile-only {
    display: none;
  }

  .rhc-nav-bar__container {
        justify-content: flex-start;
        position: relative;
    }

    .rhc-nav-bar {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;

        &, & > * {
            flex-direction: column;
        }

        .rhc-nav-bar__list {
            &, & .rhc-nav-bar__item, & .rhc-link {
                inline-size: 100%;
            }
        }

        .rhc-nav-bar__list--end {
            margin-inline-start: initial;
            inline-size: 100%;
        }

        &.rhc-nav-bar--mobile-collapsed {
            .rhc-nav-bar__item {
                display: none;
            }

            .rhc-nav-bar__list:first-child .rhc-nav-bar__item:first-child {
                display: inherit;
            }
        }
    }

    .rhc-button.rhc-button--icon-only {
        position: absolute;
        inset-inline-end: 0;
        inset-block-start: 0.25rem;

        &, &:hover, &:focus, &:active {
            color: var(--rhc-nav-bar-color);
        }
    }

    nav, nav > * {
        flex-direction: column;
    }
}