Added breadcrumbs

src/components/maps/MapOverlay.astro

@@ -1,8 +1,9 @@
 ---
 import type { MapMarker, PlayerMarker } from "@/types/Leaflet";
+import type { MapOverlayProps } from "@/types/Map";
 
 import SearchMarkers from "./overlay/SearchMarkers.vue";
-import type { MapOverlayProps } from "@/types/Map";
+import MapOverlayBreadcrumbs from "./MapOverlayBreadcrumbs.astro";
 
 interface Props extends MapOverlayProps {}
 
@@ -14,12 +15,15 @@ const {
         disableCapitals: false,
         disableLandmarks: false,
         disableQuests: false,
-    }
+    },
+    breadcrumbs = [],
 } = Astro.props
 ---
 
 <div class="world-overlay">
     <SearchMarkers client:load mapKey={mapKey} markers={markers} players={players} searchConfig={searchConfig} />
+
+    <MapOverlayBreadcrumbs breadcrumbs={breadcrumbs} />
 </div>
 
 <style lang="scss">
@@ -32,5 +36,7 @@ const {
     z-index: 10;
     padding: 10px;
     pointer-events: none;
+    display: grid;
+    row-gap: .25rem;
 }
 </style>

src/components/maps/MapOverlayBreadcrumbs.astro

@@ -0,0 +1,105 @@
+---
+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>

src/components/maps/overlay/SearchMarkers.vue

@@ -271,16 +271,14 @@ function resetAllFields(actionAfter?: "focusAfter") {
 
 <style lang="scss" scoped>
 .toolbar {
-    margin-left: calc(45px + .5rem);
-
     @media screen and (width >= 900px) {
         display: flex;
         gap: .75rem;
         align-items: start;
-        margin-left: 0;
     }
 
     .search-w {
+        margin-left: calc(45px + .5rem);
         padding: .5rem 1.2rem;
         width: calc(100% - 3rem);
         background: var(--white);
@@ -293,6 +291,7 @@ function resetAllFields(actionAfter?: "focusAfter") {
             width: clamp(25rem, 35dvw, 30rem);
             width: clamp(25rem, 35vw, 30rem);
             margin-right: .75rem;
+            margin-left: 0;
         }
 
         .input-w {

src/pages/aldys/borelis/index.astro

@@ -11,6 +11,10 @@ import MapOverlay from '@/components/maps/MapOverlay.astro'
             disableCapitals: true,
             disableQuests: true,
         }}
+        breadcrumbs={[
+            { name: 'Aldys', url: '/' },
+            { name: 'Borélis', url: '/aldys/borelis' },
+        ]}
     />
     <Map
         mapKey='aldys-borelis'

src/pages/aldys/cantane/index.astro

@@ -18,6 +18,10 @@ const markers = markersData.data as MapMarker[]
             disableCapitals: true,
             disableQuests: true,
         }}
+        breadcrumbs={[
+            { name: 'Aldys', url: '/' },
+            { name: 'Cantane', url: '/aldys/cantane' },
+        ]}
     />
     <Map
         mapKey='aldys-cantane'

src/pages/aldys/cantane/mines-blanches.astro

@@ -18,6 +18,11 @@ const markers = markersData.data as MapMarker[]
             disableCapitals: true,
             disableQuests: true,
         }}
+        breadcrumbs={[
+            { name: 'Aldys', url: '/' },
+            { name: 'Cantane', url: '/aldys/cantane' },
+            { name: 'Mines Blanches', url: '/aldys/cantane/mines-blanches' },
+        ]}
     />
     <Map
         mapKey='aldys-cantane-mines'

src/pages/bamast/index.astro

@@ -17,6 +17,9 @@ const players = playersData as PlayerMarker
         mapKey='bamast'
         markers={markers}
         players={players}
+        breadcrumbs={[
+            { name: 'Bamast', url: '/bamast' },
+        ]}
     />
     <Map
         mapKey='bamast'

src/pages/index.astro

@@ -25,6 +25,9 @@ const players = playersData as PlayerMarker
         mapKey='aldys'
         markers={markers}
         players={players}
+        breadcrumbs={[
+            { name: 'Aldys', url: '/' },
+        ]}
     />
     <Map
         mapKey='aldys'

src/types/Map.ts

@@ -1,5 +1,10 @@
 import type { MapMarker, PlayerMarker } from "./Leaflet"
 
+export interface BreadcrumbItem {
+    name: string;
+    url: string;
+}
+
 export interface SearchConfig {
     disableQuests?: boolean
     disableCapitals?: boolean
@@ -24,4 +29,5 @@ export interface MapOverlayProps {
     markers?: MapMarker[]
     players?: PlayerMarker
     searchConfig?: SearchConfig
+    breadcrumbs?: BreadcrumbItem[]
 }