Merge pull request #20 from BohdanOne/19-fixmobile-peak-list-under-th…

…e-main-page-map

fix: increase z-index over the leaflet map

package.json

@@ -43,6 +43,7 @@
 	"dependencies": {
 		"@mapbox/togeojson": "^0.16.2",
 		"@tailwindcss/vite": "^4.0.0-alpha.11",
+		"clsx": "^2.1.0",
 		"husky": "^9.0.11",
 		"tailwindcss": "^4.0.0-alpha.11",
 		"xmldom": "^0.6.0"

src/lib/components/MainNavigation.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { clsx } from 'clsx';
 	import { page } from '$app/stores';
 	import type { Peak } from '$lib/types';
 
@@ -38,12 +39,12 @@
 				Szczyty
 			</button>
 			<ul
-				class={`${
+				class={clsx(
 					peaksListOpen
-						? 'absolute px-4 pt-2 pb-4 right-0 ring-1 max-h-[80svh] overflow-scroll bg-white'
-						: 'hidden'
-				} 
-					md:relative md:flex md:flex-wrap md:gap-2 md:px-0 md:ring-0`}
+						? 'absolute px-4 pt-2 pb-4 right-4 ring-1 max-h-[80svh] overflow-scroll z-[401] bg-white'
+						: 'hidden',
+					'md:relative md:flex md:flex-wrap md:gap-2 md:px-0 md:ring-0'
+				)}
 				id="peaksList"
 				aria-label="Lista Szczytów"
 			>
@@ -52,7 +53,10 @@
 					{@const isCurrentPage = $page.url.pathname === peakSlug}
 					<li class="text-right md:text-left" aria-current={isCurrentPage}>
 						<a
-							class={`border-b-2 ${isCurrentPage ? 'border-red-600 text-red-600' : 'border-transparent'}`}
+							class={clsx(
+								'border-b-2',
+								isCurrentPage ? 'border-red-600 text-red-600' : 'border-transparent'
+							)}
 							href={peakSlug}>{peak.name}</a
 						>
 					</li>