@forsakringskassan/docs-generator 3.7.0 → 3.8.0

package/dist/style/site.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 :root {
   --docs-background-color: #ffffff;
   --docs-font-family: "Inter Variable", sans-serif;
@@ -46,6 +47,7 @@
   --docs-header-text-color-discrete: #5f6165;
   --docs-header-background-color: transparent;
   --docs-header-border-color: #ddddde;
+  --docs-focus-box-shadow: 0 0 0 2px #1b1e23, 0 0 0 4px #ffffff,0 0 0 6px #1b1e23;
   --docs-footer-text-color-default: #1b1e23;
   --docs-footer-text-color-discrete: #5f6165;
   --docs-footer-background-color: transparent;
@@ -384,8 +386,11 @@ kbd {
   box-shadow: none;
   cursor: text;
   min-height: 2.5rem;
-  padding: 0 0.75rem;
   width: 100%;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding-inline-end: 0;
 }
 
 #search button:hover {
@@ -402,11 +407,11 @@ kbd {
 #search .search__icon {
   display: inline-block;
   height: 1rem;
-  margin-right: 0.5rem;
   max-height: 100%;
   max-width: 100%;
   pointer-events: none;
   width: 1rem;
+  flex-shrink: 0;
 }
 
 #search-dialog {
@@ -476,6 +481,353 @@ kbd {
   outline: 3px solid transparent;
 }
 
+.loading .docs-page-header {
+  visibility: hidden;
+}
+
+header .docs-page-header {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  color: var(--docs-header-text-color-default);
+  padding: 1rem 2rem;
+  align-items: center;
+  overflow: hidden;
+  background-color: var(--docs-header-background-color);
+  border-bottom: 1px solid var(--docs-header-border-color);
+  gap: 1rem;
+  max-width: 100vw;
+  --docs-text-color-default: var(--docs-header-text-color-default);
+  --docs-text-color-discrete: var(--docs-header-text-color-discrete);
+}
+header .docs-page-header__left {
+  flex-grow: 0;
+  flex-basis: auto;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+header .docs-page-header__right {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  font-size: var(--f-font-size-standard);
+  min-width: 0;
+  gap: 2.5rem;
+  margin-left: 0;
+}
+header .docs-page-header.is-single-row .docs-page-header__right {
+  flex-basis: auto;
+  justify-content: flex-end;
+  margin-left: auto;
+}
+header .docs-page-header.is-multi-row .docs-page-header__right {
+  flex-basis: 100%;
+  justify-content: space-between;
+  margin-left: 0;
+}
+header .docs-page-header__logo {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  align-items: center;
+  box-sizing: border-box;
+}
+header .docs-page-header__logo--pipe {
+  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzEiIGhlaWdodD0iMzEiIHZpZXdCb3g9IjAgMCAzMSAzMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMC41IiB5PSIwLjU4Mzk4NCIgd2lkdGg9IjI5LjM1MzUiIGhlaWdodD0iMjkuMzUzNSIgcng9IjEuNSIgZmlsbD0iIzI5Nzk1MiIgc3Ryb2tlPSIjMjk3OTUyIi8+CjxwYXRoIGQ9Ik0yLjA1MDk2IDMuMTM0NzdDMi4wNTA5NiAyLjU4MjQ4IDIuNDk4NjggMi4xMzQ3NyAzLjA1MDk2IDIuMTM0NzdIMjguMzAyNkwyMC41OTQxIDkuNzIwOThDMjAuNDA3IDkuOTA1MDcgMjAuMTU1MSAxMC4wMDgyIDE5Ljg5MjYgMTAuMDA4MkgxMS4xMzg0QzEwLjU4NjEgMTAuMDA4MiAxMC4xMzg0IDEwLjQ1NiAxMC4xMzg0IDExLjAwODJWMTkuMjA2MkMxMC4xMzg0IDE5LjQ3NDYgMTAuMDMwNSAxOS43MzE3IDkuODM5IDE5LjkxOThMMi4wNTA5NiAyNy41NjYxVjMuMTM0NzdaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMTEuODk1NCAxMi45NzkyQzExLjg5NTQgMTIuNDI3IDEyLjM0MzEgMTEuOTc5MiAxMi44OTU0IDExLjk3OTJIMTkuNzAwNkMxOS45NTY0IDExLjk3OTIgMjAuMjAyNiAxMi4wNzczIDIwLjM4ODMgMTIuMjUzM0wyNy45OTA0IDE5LjQ1NTVDMjguMTg5OCAxOS42NDQzIDI4LjMwMjcgMTkuOTA2OCAyOC4zMDI3IDIwLjE4MTRWMjcuMzg2NUMyOC4zMDI3IDI3LjkzODggMjcuODU1IDI4LjM4NjUgMjcuMzAyNyAyOC4zODY1SDIwLjUxMzJDMjAuMjQ4IDI4LjM4NjUgMTkuOTkzNyAyOC4yODEyIDE5LjgwNjEgMjguMDkzNkwxMi4xODgzIDIwLjQ3NThDMTIuMDAwNyAyMC4yODgzIDExLjg5NTQgMjAuMDMzOSAxMS44OTU0IDE5Ljc2ODdWMTIuOTc5MloiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPg==");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  display: inline-block;
+  padding: 0.8rem;
+}
+header .docs-page-header__logo::after {
+  background-color: #116a3e;
+  content: " ";
+  height: 1.38rem;
+  padding: 0.5px;
+  margin: 0 1rem 0.155rem;
+}
+header .docs-page-header__app-name {
+  color: #116a3e;
+  width: auto;
+  margin: 0;
+  font-size: var(--f-font-size-h3);
+  font-weight: var(--f-font-weight-medium);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 9rem;
+  text-decoration: none;
+}
+header .docs-page-header__logo > a {
+  display: inline-flex;
+}
+
+@media screen and (width < 1024px) {
+  #search button kbd {
+    display: none;
+  }
+}
+@media (width < 640px) {
+  header .docs-page-header {
+    padding: 1rem;
+  }
+  header .docs-page-header__right {
+    width: 100%;
+  }
+}
+.docs-mobile-nav {
+  width: 100%;
+  display: inline;
+}
+.is-mobile .docs-mobile-nav {
+  display: inline;
+}
+.docs-mobile-nav-wrapper ul ul {
+  background-color: var(--docs-menu-background-color);
+}
+.docs-mobile-nav-label {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  gap: 8px;
+}
+.docs-mobile-nav-label .docs-icon {
+  min-width: var(--docs-icon-size);
+  min-height: var(--docs-icon-size);
+}
+.docs-mobile-nav__toggle {
+  position: sticky;
+  height: min-content;
+  width: min-content;
+  padding: 0.5rem;
+  cursor: pointer;
+  appearance: none;
+  display: none;
+  justify-content: center;
+}
+.docs-mobile-nav__close {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+  font-weight: bold;
+  color: var(--docs-text-color-default);
+}
+.docs-mobile-nav__close__text {
+  line-height: 1;
+}
+.docs-mobile-nav__close .docs-icon {
+  display: block;
+}
+.docs-mobile-nav__header {
+  display: flex;
+  justify-content: flex-end;
+  padding: 0.5rem;
+  box-sizing: border-box;
+}
+.docs-mobile-nav__list {
+  list-style: none;
+  margin: 0;
+}
+.docs-mobile-nav__list:not(details *) {
+  padding: 0;
+}
+.docs-mobile-nav__list a {
+  display: flex;
+  justify-content: space-between; /* Text till vänster, pil till höger */
+  align-items: center;
+  padding: 20px;
+  text-decoration: none;
+  color: var(--docs-header-text-color-default);
+  font-size: 16px;
+}
+.docs-mobile-nav__list ul {
+  padding-left: 1.5rem;
+}
+
+@media (width >= 640px) {
+  .docs-mobile-nav {
+    display: none;
+  }
+}
+/* navigering vänster */
+#sidenav {
+  background-color: var(--docs-menu-background-color);
+  width: auto;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row-reverse;
+  --header-footer-visible-height: 4.5rem;
+  overflow: auto;
+  max-height: calc(100vh - var(--header-footer-visible-height));
+  scrollbar-gutter: stable;
+  position: sticky;
+  top: 0;
+  grid-area: sidenav;
+}
+@media (width < 640px) {
+  #sidenav {
+    display: none;
+  }
+}
+@media (width < 1024px) {
+  .is-mobile #sidenav {
+    display: none;
+  }
+}
+
+.sidenav__toggle {
+  height: min-content;
+  width: min-content;
+  padding: 0.5rem;
+  cursor: pointer;
+  appearance: none;
+  display: flex;
+  justify-content: center;
+  opacity: 0;
+  pointer-events: none;
+}
+.sidenav__toggle-label {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 3rem;
+  height: 3rem;
+  cursor: pointer;
+}
+.sidenav__toggle-label:hover {
+  background-color: #ddddde;
+}
+
+.docs-icon.icon-back {
+  display: none;
+}
+
+.sidenav__toggle:checked + label .docs-icon.icon-menu {
+  display: none;
+}
+
+.sidenav__toggle:checked + label .docs-icon.icon-back {
+  display: block;
+}
+
+.sidenav__toggle:checked {
+  justify-content: flex-end;
+  margin-top: 0;
+  margin-right: 0;
+}
+
+#nav-toggle:focus-visible + label {
+  box-shadow: var(--docs-focus-box-shadow);
+  outline: 3px solid transparent;
+}
+
+.sidenav__toggle:checked ~ .navigation {
+  display: block;
+}
+
+@media screen and (width >= 1024px) {
+  .sidenav__toggle {
+    display: none;
+  }
+  .docs-icon.icon-menu {
+    display: none;
+  }
+  .sidenav__toggle-label {
+    display: none;
+  }
+}
+#mobile-sidenav {
+  --header-footer-visible-height: 4.5rem;
+  overflow: auto;
+  max-height: calc(100vh - var(--header-footer-visible-height));
+  scrollbar-gutter: stable;
+  position: sticky;
+  top: 0;
+}
+
+#mobile-toggle:focus-visible ~ .docs-mobile-nav-label,
+#mobile-toggle:focus-visible ~ .docs-mobile-navigation .docs-mobile-nav-close {
+  box-shadow: var(--docs-focus-box-shadow);
+  outline: 3px solid transparent;
+}
+
+#mobile-toggle:checked ~ .docs-mobile-navigation {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 100vw;
+  height: 100%;
+  position: fixed;
+  gap: 1.5rem;
+  top: 0;
+  left: 0;
+}
+
+.docs-mobile-navigation {
+  --highlight-width: 4px;
+  background-color: var(--docs-background-color);
+  display: none;
+  padding: 1.5rem;
+  height: max-content;
+  z-index: 2;
+}
+.docs-mobile-navigation ul {
+  padding: 0;
+}
+.docs-mobile-navigation li {
+  list-style: none;
+  border-left: var(--highlight-width) solid transparent;
+}
+.docs-mobile-navigation li.link.highlight {
+  font-weight: bold;
+  border-color: var(--docs-navigation-highlight-color);
+  background-color: var(--docs-topnav-border-color-highlight-background-color);
+}
+.docs-mobile-navigation li.link a {
+  display: block;
+  color: var(--docs-text-color-default);
+  padding: 0.5rem calc(0.25rem + var(--highlight-width)) 0.5rem 0.25rem;
+  line-height: 1.2;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.docs-mobile-navigation li.link a:hover {
+  background: var(--docs-navigation-hover-color);
+  border-color: var(--docs-navigation-highlight-color);
+}
+.docs-mobile-navigation summary {
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  line-height: 1.5;
+  padding: 0.5rem calc(0.25rem + var(--highlight-width)) 0.5rem 0.25rem;
+  align-items: center;
+}
+.docs-mobile-navigation summary:hover {
+  background: var(--docs-navigation-hover-color);
+  border-color: var(--docs-navigation-highlight-color);
+}
+.docs-mobile-navigation .docs-icon {
+  transition: transform 0.2s ease-in-out;
+}
+.docs-mobile-navigation details[open] > summary {
+  font-weight: 700;
+}
+.docs-mobile-navigation details[open] > summary .docs-icon {
+  transform: rotate(180deg);
+}
+.docs-mobile-navigation details > ul {
+  margin-bottom: 0;
+  margin-left: 1rem;
+}
+.docs-mobile-navigation details summary::-webkit-details-marker {
+  display: none;
+}
+
 #version button {
   padding: 0;
   background: transparent;
@@ -556,13 +908,11 @@ body {
   -webkit-font-smoothing: antialiased;
 }
 
-.page-header {
-  --docs-text-color-default: var(--docs-header-text-color-default);
-  --docs-text-color-discrete: var(--docs-header-text-color-discrete);
-}
-
-.page-header__app-name {
-  text-decoration: none;
+body:has(#mobile-toggle:checked) {
+  overflow: hidden;
+  height: 100vh;
+  height: 100dvh;
+  touch-action: none;
 }
 
 .sr-only {
@@ -583,11 +933,11 @@ body {
 }
 .docs-icon {
   display: inline-block;
+  width: var(--docs-icon-size);
   height: var(--docs-icon-size);
   max-height: 100%;
   max-width: 100%;
   pointer-events: none;
-  width: var(--docs-icon-size);
 }
 .docs-icon-stack {
   display: inline-block;

package/dist/style/theme/fkui.css

@@ -17,6 +17,9 @@
   --docs-font-line-height: var(--f-line-height-large);
   --docs-font-size: var(--f-font-size-default-rem);
   --docs-font-family: var(--f-font-family);
+  --docs-focus-box-shadow:
+      0 0 0 2px var(--fkds-focus-indicator-color-background), 0 0 0 4px var(--fkds-focus-indicator-color),
+      0 0 0 6px var(--fkds-focus-indicator-color-background);
   --docs-heading-font-family: var(--f-font-family);
   --docs-heading-font-weight-h1: var(--f-font-weight-bold);
   --docs-heading-font-weight-h2: var(--f-font-weight-medium);
@@ -38,12 +41,13 @@
   --docs-header-background-color: var(--fkds-color-background-primary);
   --docs-header-border-color: var(--fkds-color-border-weak);
   --docs-topnav-background-color: var(--fkds-color-background-primary);
-  --docs-menu-background-color: var(--fkds-color-background-secondary);
   --docs-topnav-link-color-default: var(--fkds-color-text-primary);
   --docs-topnav-link-color-hover: var(--fkds-color-text-primary);
   --docs-topnav-link-color-highlight: var(--fkds-color-text-primary);
   --docs-topnav-border-color-hover: var(--fkds-color-select-background-secondary-hover);
-  --docs-topnav-border-color-highlighr: var(--fkds-color-select-background-secondary-default);
+  --docs-topnav-border-color-highlight: var(--fkds-color-select-background-secondary-default);
+  --docs-topnav-border-color-highlight-background-color: var(--fkds-color-background-tertiary);
+  --docs-menu-background-color: var(--fkds-color-background-secondary);
   --docs-code-background-color: var(--fkds-color-background-secondary);
   --docs-code-border-color: var(--fkds-color-border-weak);
   --docs-code-optional-background-color: var(--fkds-color-background-tertiary);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forsakringskassan/docs-generator",
-  "version": "3.7.0",
+  "version": "3.8.0",
   "description": "Documentation generator",
   "keywords": [
     "documentation"

package/templates/base.template.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="{{ site.lang }}" class="{{ layoutClass }}" data-root-url="{{ rootUrl(doc) }}">
+<html lang="{{ site.lang }}" class="{{ layoutClass }} loading" data-root-url="{{ rootUrl(doc) }}">
     <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -48,6 +48,8 @@
             <header>
                 <!-- prettier-ignore -->
                 {%- include "partials/header.html" -%}
+                {%- block mobilenav %}
+                {%- endblock %}
             </header>
 
             <div id="primary">

package/templates/macro/menu.html

@@ -40,6 +40,11 @@
 {% endmacro %}
 
 {% macro sidenav(doc, node, label) %}
-<input type="checkbox" class="sidenav__toggle" aria-label="Open/close navigation" />
+
+    <input id="nav-toggle" type="checkbox" class="sidenav__toggle" aria-label="Open/close navigation" />
+    <label for="nav-toggle" class="sidenav__toggle-label">
+         <svg class="docs-icon icon-menu"><use href="#docs-icon-menu"></use></svg>
+         <svg class="docs-icon icon-back"><use href="#docs-icon-chevrons-left"></use></svg>
+    </label>
 <nav class="navigation" aria-label="{{ label }}">{{ sidenav_item(doc, node) }}</nav>
 {% endmacro %}

package/templates/macro/mobile-menu.html

@@ -0,0 +1,71 @@
+{% macro sidenav_item(doc, node) %}
+<ul class="docs-mobile-nav__list">
+    {%- for item in node.children -%}
+              {# section node #}
+{% set normalizedCurrent = doc.fileInfo.fullPath | lower %}
+{% set highLight = doc.id == item.id %}
+{%- if item.children -%}
+    {% if item.visible %}
+{% set currentRef = item.path or item.key %}
+    {% set folderPath = currentRef | replace("./", "") | replace(".html", "") | replace(".md", "") %}
+  {% set open = folderPath != "" and folderPath in normalizedCurrent %}
+
+    <li class="expandable">
+        <details {% if open %}open{% endif %}>
+            <summary>{{ item.title }} <svg focusable="false" class="docs-icon" aria-hidden="true"> <use href="#docs-icon-arrow-down"></use></svg></summary>
+            {% if item.children.length > 0 %}
+
+
+            {# Verify if parent link is already registered as a child. #}
+               {% set alreadyExists = false %}
+                {% for child in item.children %}
+                    {% if child.path == item.path %}
+                        {% set alreadyExists = true %}
+                    {% endif %}
+                {% endfor %}
+
+                {# Only create the link if it does NOT already exist among the children #}
+                {% if item.path and not alreadyExists %}
+                <ul class="docs-mobile-nav__list docs-mobile-nav__list--main-link-wrapper">
+                    <li class="link {% if highLight %}highlight{% endif %}">
+                        <a href="{{ item.path | relative(doc) }}">
+                            {{ item.title }}
+                        </a>
+                    </li>
+                </ul>
+                {% endif %}
+
+
+            {{ sidenav_item(doc, item) }}
+            {% endif %}
+        </details>
+    </li>
+    {% endif %}
+    {%- endif -%}
+     {# leaf node #}
+    {%- if not item.children -%}
+    <li class="link {% if highLight %}highlight{% endif %}">
+        <a
+            href="{{ item.path | relative(doc) }}"
+            {% if item.external %}
+            target="_blank"
+            rel="external"
+            {% endif %}
+            {% if item.path.startsWith('/') %}
+            data-path="{{ item.path.slice(1) }}"
+            {% endif %}
+            {% if item.path.startsWith('./') %}
+            data-path="{{ item.path.slice(2) }}"
+            {% endif %}
+        >
+            {{ item.title }}
+        </a>
+    </li>
+{%- endif -%}
+    {%- endfor -%}
+</ul>
+{% endmacro %}
+
+{% macro mobile_sidenav(doc, node) %}
+<div class="docs-mobile-nav-wrapper" >{{ sidenav_item(doc, node) }}</div>
+{% endmacro %}

package/templates/partials/header.html

@@ -1,12 +1,14 @@
-<div class="page-header__root">
-    <div class="page-header">
-        <a class="page-header__logo" href="{{ './index.html' | relative(doc) }}">
-            <span aria-label="{{ site.name }}" role="img" class="page-header__logo--small"> </span>
-        </a>
-        <a class="page-header__app-name" href="{{ './index.html' | relative(doc) }}"> {{ site.name }} </a>
-        <div class="page-header__right">
-            {%- include "partials/topnav.html" %}
-            <div class="page-header__right-slot">
+<div class="docs-page-header__root">
+    <div class="docs-page-header">
+        <div class="docs-page-header__left">
+            <a class="docs-page-header__logo" href="{{ './index.html' | relative(doc) }}">
+                <span aria-label="{{ site.name }}" role="img" class="docs-page-header__logo--pipe"> </span>
+            </a>
+            <a class="docs-page-header__app-name" href="{{ './index.html' | relative(doc) }}"> {{ site.name }} </a>
+        </div>
+        <div class="docs-page-header__right">
+            {%- include "partials/mobile-nav.html" %} {%- include "partials/topnav.html" %}
+            <div class="docs-page-header__right-slot">
                 <div class="toolbar">{% container "toolbar" %}</div>
             </div>
         </div>

package/templates/partials/mobile-nav.html

@@ -0,0 +1,24 @@
+<!-- prettier-ignore -->
+{% import "macro/mobile-menu.html" as menu with context %}
+
+<div class="docs-mobile-nav">
+    <input id="mobile-toggle" type="checkbox" class="sr-only" aria-label="{{$t('mobile-nav.aria-label')}}" />
+    <label for="mobile-toggle" class="docs-mobile-nav-label">
+        <svg class="docs-icon"><use href="#docs-icon-menu"></use></svg>
+        <span>{{$t("mobile-nav.menu")}}</span>
+    </label>
+    <nav id="nav-container" class="docs-mobile-navigation" aria-label="{{$t('mobile-nav.nav')}}">
+        <div class="docs-mobile-nav__header">
+            <label for="mobile-toggle" class="docs-mobile-nav__close">
+                <span class="docs-mobile-nav__close__text">{{$t("mobile-nav.close")}}</span>
+                <svg class="docs-icon" focusable="false" aria-hidden="true">
+                    <use href="#docs-icon-close"></use>
+                </svg>
+            </label>
+        </div>
+        <!-- prettier-ignore -->
+        {% block mobilenav %}
+        <div id="mobile-sidenav">{%- if topnav -%} {{ menu.mobile_sidenav(doc, topnav) }} {%- endif -%}</div>
+        {% endblock %}
+    </nav>
+</div>

package/templates/partials/spritesheet.html

@@ -19,6 +19,18 @@
                 d="M239.373 380.982 45.03 186.638c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04l154.746 154.021L411.089 129.99c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L273.315 380.982c-9.373 9.372-24.569 9.372-33.942 0"
             ></path>
         </symbol>
+        <symbol id="docs-icon-chevrons-left" viewBox="0 0 512 512">
+            <path
+                fill="currentColor"
+                d="M111.3 256L281.2 78.4c17.3-18.1 16.8-46.9-1.4-64.3-18.1-17.3-46.9-16.7-64.3 1.4l-200 209.1C7.2 233.4 3 244.7 3 256c0 11.3 4.2 22.6 12.6 31.4l200 209.1c17.4 18.1 46.1 18.8 64.3 1.4 18.1-17.3 18.7-46.1 1.4-64.3L111.3 256z M329.5 256L499.4 78.4c17.3-18.1 16.8-46.9-1.4-64.3-18.1-17.3-46.9-16.7-64.3 1.4l-200 209.1c-8.4 8.8-12.6 20.1-12.6 31.4c0 11.3 4.2 22.6 12.6 31.4l200 209.1c17.4 18.1 46.1 18.8 64.3 1.4 18.1-17.3 18.8-46.1 1.4-64.3L329.5 256z"
+            />
+        </symbol>
+        <symbol id="docs-icon-menu" viewBox="0 0 512 512">
+            <path
+                fill="currentColor"
+                d="M475.4 209.6H36.6C16.4 209.6 0 225.9 0 246.1s16.4 36.6 36.6 36.6h438.9c20.2 0 36.6-16.4 36.6-36.6s-16.4-36.5-36.6-36.5zM475.4 392.4H36.6C16.4 392.4 0 408.8 0 429s16.4 36.6 36.6 36.6h438.9c20.2 0 36.6-16.4 36.6-36.6s-16.4-36.6-36.6-36.6zM475.4 26.7H36.6C16.4 26.7 0 43.1 0 63.3s16.4 36.6 36.6 36.6h438.9c20.2 0 36.6-16.4 36.6-36.6s-16.4-36.6-36.6-36.6z"
+            ></path>
+        </symbol>
         <symbol id="docs-icon-circle" xml:space="preserve" viewBox="0 0 512 512">
             <path
                 d="M489.5 256c0 129-104.6 233.5-233.5 233.5C127 489.5 22.5 385 22.5 256S127 22.5 256 22.5 489.5 127 489.5 256"

package/templates/partials/topnav.html

@@ -10,27 +10,5 @@
             <a class="docs-topnav__anchor" href="{{ nav.path | relative(doc) }}"> {{ nav.title }} </a>
         </li>
         {% endif %} {%- endfor -%}
-        <li class="docs-topnav__item docs-topnav__item--more" style="visibility: hidden">
-            <button type="button" class="docs-topnav__anchor" aria-expanded="false">
-                <span>Mer</span>
-                <svg class="docs-icon" focusable="false" aria-hidden="true">
-                    <use xlink:href="#docs-icon-arrow-down"></use>
-                </svg>
-            </button>
-            <div class="docs-contextmenu">
-                <ul class="docs-contextmenu__list">
-                    <!-- prettier-ignore -->
-                    {%- for nav in topnav.children -%}
-                    {% set navPath = nav.path | replace("html", "") %}
-                    {% set navPath = navPath | replace(".", "") %}
-                    {% set activePage = navPath in doc.fileInfo.fullPath %}
-                    {% if nav.visible %}
-                    <li class="docs-contextmenu__item {% if activePage %}highlight{% endif %}" style="display: none">
-                        <a class="docs-contextmenu__anchor" href="{{ nav.path | relative(doc) }}"> {{ nav.title }} </a>
-                    </li>
-                    {% endif %} {%- endfor -%}
-                </ul>
-            </div>
-        </li>
     </ul>
 </nav>