@schalkneethling/miyagi-core 4.0.2

package/frontend/views/menu/menu.twig.miyagi

@@ -0,0 +1,21 @@
+<header class="Menu">
+	{% include "@miyagi/menu/title.twig.miyagi" %}
+	<button class="Menu-toggleMobileMenu" aria-label="Show menu" aria-expanded="false"></button>
+	<div class="Menu-content">
+		{% if folders %}
+			<div class="Menu-nav">
+				{% include "@miyagi/menu/search.twig.miyagi" %}
+				{% include "@miyagi/menu/nav.twig.miyagi" with {
+					folders: folders,
+					requestedComponent: requestedComponent,
+					requestedVariation: requestedVariation,
+					isBuild: isBuild
+				} only %}
+			</div>
+		{% endif %}
+
+		{% include "@miyagi/menu/config-switchers.twig.miyagi" %}
+	</div>
+
+	{% include "@miyagi/menu/goto.twig.miyagi" %}
+</header>

package/frontend/views/menu/nav.twig.miyagi

@@ -0,0 +1,95 @@
+<nav class="Nav">
+	{% macro list(items, index, requestedComponent, requestedVariation, type) %}
+		{% set level = index + 1 %}
+
+		<ul class="Nav-list" style="--level: {{ level }}">
+
+			{% for item in items %}
+				{% set has_children = (item.variations and item.variations|length > 0) or (item.children and item.children|length > 0) %}
+				<li class="Nav-entry Nav-entry--{{ item.type }} Nav-entry--lvl{{ level }}">
+					<div class="Nav-wrapper">
+						{% if has_children %}
+							<button
+								class="Nav-toggle"
+								aria-controls="{{ item.id }}"
+								aria-expanded="{{ is_expanded(item, requestedComponent) ? "true" : "false" }}"
+								aria-label="Toggle submenu"
+							></button>
+						{% endif %}
+
+						{% if item.section == "design-tokens" and item.url %}
+							<a
+								class="Nav-item Nav-item--link"
+								href="{{ item.url }}"
+								{% if is_active_component(item, requestedComponent, requestedVariation) %}
+									aria-current="page"
+								{% endif %}
+							>
+								{{ item.name }}
+							</a>
+						{% elseif item.section == "docs" %}
+							{% if item.isLink %}
+								<a
+									class="{% if item.type == "file" %}Nav-variant{% else %}Nav-item Nav-item--link{% endif %}"
+									href="{{ item.route.default }}"
+									{% if is_active_component(item, requestedComponent, requestedVariation) %}
+										aria-current="page"
+									{% endif %}
+								>
+									{{ item.name }}
+								</a>
+							{% else %}
+								<span class="Nav-item Nav-item--directory">
+									{{ item.name }}
+								</span>
+							{% endif %}
+						{% elseif item.url and item.shortPath and not item.topLevel %}
+							<a
+								class="Nav-item Nav-item--link"
+								href="{{ item.url }}"
+								{% if is_active_component(item, requestedComponent, requestedVariation) %}
+									aria-current="page"
+								{% endif %}
+							>
+								{{ item.name }}
+							</a>
+						{% elseif item.url and not item.type %}
+							<a
+								class="Nav-variant"
+								href="{{ item.url }}"
+								{% if is_active_variant(item, requestedComponent, requestedVariation) %}
+									aria-current="page"
+								{% endif %}
+							>
+								{{ item.name }}
+							</a>
+						{% else %}
+							<span class="Nav-item Nav-item--directory">
+								{{ item.name }}
+							</span>
+						{% endif %}
+					</div>
+
+					{% if has_children %}
+						<div
+							class="Nav-children"
+							id="{{ item.id }}"
+							{% if not is_expanded(item, requestedComponent) %}hidden{% endif %}
+						>
+							{% if item.variations and item.variations|length > 0 %}
+								{{ _self.list(item.variations, level, requestedComponent, requestedVariation, "variations") }}
+							{% endif %}
+							{% if item.children and item.children|length > 0 %}
+								{{ _self.list(item.children, level, requestedComponent, requestedVariation, "components") }}
+							{% endif %}
+						</div>
+					{% endif %}
+
+				</li>
+			{% endfor %}
+
+		</ul>
+	{% endmacro %}
+
+	{{ _self.list(folders, -1, requestedComponent, requestedVariation, "components") }}
+</nav>

package/frontend/views/menu/search.twig.miyagi

@@ -0,0 +1,13 @@
+<form class="Search">
+	<label class="Search-label" for="search">
+		<span class="u-hiddenVisually">Search</span>
+		<svg class="Search-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+			<path d="M13.3 0h1.4c1.2.1 2.4.5 3.5 1a9.6 9.6 0 0 1 5.4 9.6 9.5 9.5 0 0 1-10.4 8.7 9.5 9.5 0 0 1-4.7-1.5l-.2-.2-.1.2-5.3 5.5c-.3.3-.6.6-1 .7h-.4l-.7-.4c-.5-.5-.5-1.2 0-1.8l5.4-5.5.3-.3-1-1.5c-1.6-3-1.8-6-.3-9A9.4 9.4 0 0 1 11.8.3l1.5-.3zm.6 2.5a7.2 7.2 0 0 0 0 14.4 7.2 7.2 0 0 0 0-14.4z" />
+		</svg>
+	</label>
+	<input id="search" class="Search-input" type="search" name="search" autocomplete="off" placeholder="Search …">
+	<button class="Search-clear" type="button" hidden>
+		<svg class="Search-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m13.6 12 2.2 2.3c.4.3.5.7.3 1.1-.2.8-1.2 1-1.8.4l-2-2-.3-.3-1 1L9.7 16c-.5.4-1.2.4-1.6 0a1 1 0 0 1-.2-1.4l.2-.2 2-2 .4-.3-1.1-1-1.2-1.3c-.5-.4-.5-1.1 0-1.6.4-.4 1-.4 1.5 0l2 2.1.3.3 1-1 1-1.3c.6-.7 1.4-.5 1.7-.2.4.4.6 1.1-.1 1.7l-2 2-.1.2h.1z"/><circle cx="11.9" cy="12.1" r="11" stroke-width="2" stroke-miterlimit="10"></svg>
+		<span class="u-hiddenVisually">Clear search query</span>
+	</button>
+</form>

package/frontend/views/menu/title.twig.miyagi

@@ -0,0 +1,24 @@
+<h1 class="Title">
+	<a class="Title-link {% if theme.logo.light %} has-logo{% endif %}" href="{{ indexPath }}"
+		target="iframe" {% if showAll %} aria-current="page" {% endif %}>
+		{% if theme.logo.light %}
+			<picture class="Title-logo">
+				{% if userUiConfig.theme == "auto" %}
+					<source srcset="{{ theme.logo.dark }}" media="(prefers-color-scheme: dark)">
+					<source srcset="{{ theme.logo.light }}" media="(prefers-color-scheme: light)">
+				{% endif %}
+				<img
+					src="
+						{% if userUiConfig.theme == "dark" %}{{ theme.logo.dark }}{% endif %}
+						{% if userUiConfig.theme == "light" %}{{ theme.logo.light }}{% endif %}
+						{% if userUiConfig.theme == "auto" %}{{ theme.logo.light }}{% endif %}
+					"
+					data-light="{{ theme.logo.light }}"
+					data-dark="{{ theme.logo.dark }}"
+					alt="{{ userProjectName }}"
+				>
+			</picture>
+		{% endif %}
+		<span class="Title-name">Overview</span>
+	</a>
+</h1>

package/index.js

@@ -0,0 +1,3 @@
+import Miyagi from "./lib/index.js";
+
+export default await Miyagi();