95 lines
5.4 KiB
Plaintext
95 lines
5.4 KiB
Plaintext
---
|
||
interface Props { section?: string; sectionHref?: string }
|
||
import { readOnlyMode } from "../lib/runtime";
|
||
const { section, sectionHref } = Astro.props;
|
||
const pathname = Astro.url.pathname.replace(/\/+$/, "") + "/";
|
||
|
||
let inferredLabel: string | undefined;
|
||
let inferredHref = "/app/";
|
||
|
||
if (pathname.startsWith("/app/inventory/")) {
|
||
if (pathname === "/app/inventory/") {
|
||
inferredLabel = "Inventory";
|
||
inferredHref = "/app/";
|
||
} else {
|
||
inferredLabel = "Inventory";
|
||
inferredHref = "/app/inventory/";
|
||
}
|
||
} else if (pathname.startsWith("/app/ingredients/")) {
|
||
inferredLabel = "Ingredients";
|
||
inferredHref = "/app/?type=ingredient";
|
||
} else if (pathname.startsWith("/app/recipe-books/")) {
|
||
inferredLabel = "Recipe Books";
|
||
inferredHref = "/app/?type=book";
|
||
} else if (pathname.startsWith("/app/recipes/")) {
|
||
inferredLabel = "Recipes";
|
||
inferredHref = "/app/?type=recipe";
|
||
} else if (pathname.startsWith("/app/archive")) {
|
||
inferredLabel = "Archive";
|
||
inferredHref = "/app/";
|
||
} else if (pathname.startsWith("/tools/purchasing-review")) {
|
||
inferredLabel = "Purchasing Review";
|
||
inferredHref = "/app/";
|
||
}
|
||
|
||
const resolvedSection = section ?? inferredLabel;
|
||
const resolvedHref = sectionHref ?? inferredHref;
|
||
---
|
||
<nav class="detail-utility" aria-label="Entity navigation">
|
||
<div class="detail-context">
|
||
<a class="detail-back" href={resolvedHref} aria-label={`Back to ${resolvedSection??"home"}`} data-back-link>‹</a>
|
||
<a class="detail-avatar" href="/app/" aria-label="Recipe Book home">RB</a>
|
||
<ol class="detail-breadcrumbs">
|
||
<li><a href="/app/">Home</a></li>
|
||
{resolvedSection&&<li aria-current="page"><a href={resolvedHref}>{resolvedSection}</a></li>}
|
||
</ol>
|
||
<slot />
|
||
</div>
|
||
<div class="detail-tools">
|
||
<form action="/app/" role="search" class="detail-search-form">
|
||
<span class="search-input-icon" aria-hidden="true">
|
||
<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
|
||
</span>
|
||
<input name="q" type="text" placeholder="Search" aria-label="Search all items" class="search-field" autocomplete="off"/>
|
||
<button type="button" class="search-clear-btn" aria-label="Clear search" title="Clear search">
|
||
<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
|
||
</button>
|
||
</form>
|
||
{!readOnlyMode&&<details class="detail-new-menu">
|
||
<summary><span class="new-trigger-plus" aria-hidden="true"><svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg></span><span>New</span></summary>
|
||
<div>
|
||
<a href="/app/recipes/new/"><span class="new-menu-icon" aria-hidden="true"><svg viewBox="0 0 24 24" width="24" height="24"><path fill="currentColor" d="M13.125 0C13.6428 0 14.0625 0.419733 14.0625 0.9375V14.0625C14.0625 14.5803 13.6428 15 13.125 15H0.9375C0.419733 15 0 14.5803 0 14.0625V0.9375C0 0.419733 0.419733 0 0.9375 0H13.125ZM12.1875 1.875H1.875V13.125H12.1875V1.875ZM11.25 9.375V11.25H5.625V9.375H11.25ZM4.6875 9.375V11.25H2.8125V9.375H4.6875ZM11.25 6.5625V8.4375H5.625V6.5625H11.25ZM4.6875 6.5625V8.4375H2.8125V6.5625H4.6875ZM11.25 3.75V5.625H5.625V3.75H11.25ZM4.6875 3.75V5.625H2.8125V3.75H4.6875Z" style="transform: scale(1.1, 1.1) translate(4px, 3.5px);"/></svg></span><strong>Recipe</strong></a>
|
||
<a href="/app/recipe-books/new/"><span class="new-menu-icon" aria-hidden="true"><svg viewBox="0 0 24 24" width="24" height="24"><path fill="currentColor" d="M14.0347 0V16H3.12658C1.50098 16 0.527344 15.0264 0.527344 13.4008V2.59923C0.527344 0.97364 1.50098 0 3.12658 0H14.0347ZM12.1594 12.6763L3.95747 12.6765C2.75227 12.6765C2.40226 12.9098 2.40226 13.4008C2.40226 13.9909 2.53647 14.1251 3.12658 14.1251H12.1598L12.1594 12.6763ZM12.1598 1.87492H3.12658C2.53647 1.87492 2.40226 2.00913 2.40226 2.59923L2.40185 10.9999C2.85223 10.8678 3.37428 10.8015 3.95747 10.8015L12.1594 10.8014L12.1598 1.87492ZM10.0768 3.80157V5.67649H4.45204V3.80157H10.0768Z" style="transform: scale(1.1, 1.1) translate(3.5px, 2.5px);"/></svg></span><strong>Recipe book</strong></a>
|
||
</div>
|
||
</details>}
|
||
</div>
|
||
</nav>
|
||
<script>
|
||
document.querySelectorAll('.detail-search-form').forEach((formEl) => {
|
||
const form = formEl as HTMLFormElement;
|
||
const input = form.querySelector('.search-field') as HTMLInputElement | null;
|
||
const clearBtn = form.querySelector('.search-clear-btn') as HTMLButtonElement | null;
|
||
if (!input || !clearBtn) return;
|
||
const sync = () => {
|
||
if (input.value.trim().length > 0) form.classList.add('has-value');
|
||
else form.classList.remove('has-value');
|
||
};
|
||
input.addEventListener('input', sync);
|
||
clearBtn.addEventListener('click', () => {
|
||
input.value = '';
|
||
sync();
|
||
input.focus();
|
||
});
|
||
sync();
|
||
});
|
||
|
||
document.querySelectorAll('.detail-back[data-back-link]').forEach((link) => {
|
||
link.addEventListener('click', (e) => {
|
||
if (window.history.length > 1 && document.referrer && new URL(document.referrer, window.location.origin).origin === window.location.origin) {
|
||
e.preventDefault();
|
||
window.history.back();
|
||
}
|
||
});
|
||
});
|
||
</script>
|