Navigasjonsmeny
===============



Generering av meny
------------------

Venstremenyen skrives ut av :ref:`base_with_nav_html` og bruker
:ref:`wagtailmenus <djangotilleggspakker>` for å generere menyen.

Menyen viser to nivåer med lenker: Alle toppnivå-artikler (alle
artikler som ligger på nivået rett under startsiden), og alle
artikler på nivået under som hører til den delen av artikkeltreet
man har navigert seg inn i.

Startsiden selv inngår ikke i menyen.

Wagtailmenus har flere ulike template tags for å generere menyer,
men vi har endt opp med å bruke kun ``children_menu``:

main_menu
   Denne genererer menyer ut fra hvilke sider man eksplisitt velger
   skal være med i menyen (via Wagtail admin > Settings > Main menu).
   Vi ønsker ikke å måtte legge til hver ny toppnivå-artikkel i
   navigasjonsmenyen, så denne er ikke så hensiktsmessig.
   Vi kan heller ikke legge til selve startsiden som menyside, for
   vi ønsker ikke at denne skal vises i menyen.

flat_menu
   Denne brukes til statiske menyer (header, footer, etc.) og kan
   heller ikke brukes til dette formålet.

section_menu
   Denne ser ut til å være tiltenkt brukt for å lage undermenyer for
   nettstedets hovedseksjoner (dvs. undermenyer for alle toppnivå-
   artikler). Ikke relevant for oss.

children_menu
   Denne kan vise undersider av aktiv side eller en annen valgt side.
   Brukes foreløpig til å generere venstremenyen (ved å be om meny
   for nettstedets startside (site.root_page) i stedet for aktiv side).
   Kan også være aktuell for å lage en StreamBlock som setter inn
   lenker til undersider automatisk.

Wagtailmenus legger på noen CSS-klasser på enkelte av menyinnslagene:

* ``active``: Siden som vises nå.
  Hvis siden ligger så dypt (på nivå 3 eller lenger nede) at den ikke
  vises i venstremenyen (fordi vi har begrenset denne til kun 2 nivåer),
  vil ingen av listeelementene i venstremenyen ha denne klassen.
* ``ancestor``: Alle sider lenger oppe i hierariket.

Disse brukes for å fargelegge venstremenyen og for å ekspandere/skjule
deler av menyen.



Visningslogikk
--------------

CSS-reglene er skrevet slik at menyen automatisk (dvs. uten bruk av javascript) lastes
lukket på xs/sm/md, og åpen på lg/xl. Åpning/lukking av menyen skjer ved at en javascript
onClick-event hektes på hamburgerikonet, og denne funksjonen toggler en ekstra CSS-klasse
(klassen "active", se nederst i ``src/website/templates/base_with_nav.html``).

At menynen har ``active``-klassen satt betyr da at den har blitt klikket på, og klassen må
derfor gjøre to ulike ting:

* På små skjermer betyr dette at navigasjonsmenyen er åpen.
* På store skjermer betyr det at navigasjonsmenyen er kollapset.

For å oppnå denne effekten brukes media-queries av denne typen når det er snakk om å vise
eller skjule elementer (vise/skjule selve hamburgerikonet):
::

    @include media-breakpoint-down(md) {
        display: block;
        &.active {
            display: none;
        }
    }
    @include media-breakpoint-up(lg) {
        display: none;
        &.active {
            display: block;
        }
    }

og media-queries av denne typen når det er snakk om å vise eller skjule selve navigasjonsmenyen
(som aldri har ``display: none;``, men skjules ved å posisjonere den til venstre for skjermen):
::

    nav.sidemeny {
        left: -$sidebar-width;
        &.active {
            left: 0;
        }
        @include media-breakpoint-up(lg) {
            // Fra breakpoint lg og opp bytter vi om logikken for skjult/vist meny.
            left: 0;
            &.active {
                left: -$sidebar-width;
            }
        }
    }



CSS
---

Navigasjonsmenyen er en nøstet ``<ul>``-liste av lenker.

Når man holder muspekeren over et menyvalg ønsker vi at bakgrunnsfargen skal endre seg i hele
navigasjonsmenyens bredde. For å få til dette oppfører listene seg slik:

* Listen selv har ingen innrykk (left margin/padding),
  alle elementene vises rett under hverandre uavhengig av nøsting.
* ``<a>``-elementene vises som block (mot normalt inline).
* For å vise de nøstede listene med riktig innrykk spesifiseres ``padding-left`` i CSS slik:

     * En lav defaultverdi for alle lenker i lista (``ul a``).
     * En høyere verdi for nøstede lenker (``ul > li > ul a``).

Vi ønsker også at menyen ikke skal vise alle undersider, kun undersidene i den delen av sidetreet
man er inne på (dvs. ekspanderende meny). Wagtailmenus genererer hele menystrukturen med både
toppnivåsider og alle toppnivåsidenes undersider, og vi skjuler de uønskede undersidene med:

* Vis alle lister (defaultverdi):
  ``ul  { display: block; }``
* Skjul alle lister på nivå 2:
  ``ul > li > ul  { display: none; }``
* Vis lister på nivå 2 som har klassene ``ancestor`` eller ``active`` satt:
  ``ul > li.ancestor > ul,  ul > li.active > ul  { display: block; }``