106 lines
3.5 KiB
Plaintext
106 lines
3.5 KiB
Plaintext
---
|
|
import type { BreadcrumbItem } from "@/types/Map";
|
|
|
|
interface Props {
|
|
breadcrumbs?: BreadcrumbItem[];
|
|
}
|
|
|
|
const { breadcrumbs = [] } = Astro.props
|
|
---
|
|
|
|
{breadcrumbs.length > 0 &&
|
|
<nav>
|
|
<menu>
|
|
{breadcrumbs.map((breadcrumb, index) => (
|
|
<li>
|
|
{index === breadcrumbs.length - 1 &&
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#0f172a" viewBox="0 0 256 256" class="folder"><path d="M245,110.64A16,16,0,0,0,232,104H216V88a16,16,0,0,0-16-16H130.67L102.94,51.2a16.14,16.14,0,0,0-9.6-3.2H40A16,16,0,0,0,24,64V208h0a8,8,0,0,0,8,8H211.1a8,8,0,0,0,7.59-5.47l28.49-85.47A16.05,16.05,0,0,0,245,110.64ZM93.34,64,123.2,86.4A8,8,0,0,0,128,88h72v16H69.77a16,16,0,0,0-15.18,10.94L40,158.7V64Z"></path></svg>
|
|
|
|
<span class="breadcrumb" aria-current="page">
|
|
<span class="label">
|
|
{breadcrumb.name}
|
|
</span>
|
|
</span>
|
|
}
|
|
{!(index === breadcrumbs.length - 1) &&
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#0f172a" viewBox="0 0 256 256" class="folder"><path d="M216,72H131.31L104,44.69A15.86,15.86,0,0,0,92.69,40H40A16,16,0,0,0,24,56V200.62A15.4,15.4,0,0,0,39.38,216H216.89A15.13,15.13,0,0,0,232,200.89V88A16,16,0,0,0,216,72ZM40,56H92.69l16,16H40ZM216,200H40V88H216Z"></path></svg>
|
|
|
|
<a href={breadcrumb.url} class="breadcrumb" class:list={{ active: index === breadcrumbs.length - 1 }}>
|
|
<span class="label">
|
|
{breadcrumb.name}
|
|
</span>
|
|
</a>
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="#0f172a" viewBox="0 0 256 256"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path></svg>
|
|
}
|
|
</li>
|
|
))}
|
|
</menu>
|
|
</nav>
|
|
}
|
|
|
|
<style lang="scss">
|
|
menu {
|
|
width: fit-content;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: .25rem;
|
|
margin-top: .5rem;
|
|
padding-block: .25rem;
|
|
padding-inline: .8rem;
|
|
border: 1px solid var(--slate-400);
|
|
background: var(--white);
|
|
border-radius: 100vmax;
|
|
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
|
|
pointer-events: all;
|
|
|
|
li {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: .25ch;
|
|
|
|
&:has(a:hover, a:focus-visible) {
|
|
svg.folder {
|
|
fill: var(--blue-500);
|
|
}
|
|
}
|
|
}
|
|
|
|
.breadcrumb {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: .5ch;
|
|
font-weight: 600;
|
|
font-size: .85em;
|
|
white-space: nowrap;
|
|
outline: .2rem solid transparent;
|
|
transition-property: color, background-color, border-color, outline-color;
|
|
transition-duration: .15s;
|
|
transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
|
|
|
|
@media screen and (width < 900px) {
|
|
font-size: .76em;
|
|
}
|
|
|
|
.icon {
|
|
width: 1.1em;
|
|
}
|
|
|
|
.label {
|
|
text-underline-offset: .15rem;
|
|
}
|
|
|
|
&:is(a) {
|
|
cursor: pointer;
|
|
|
|
&:hover,
|
|
&:focus-visible {
|
|
.label {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|