menu update

7 files changed, 74 insertions, 9 deletions

diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index ac815211..8f1fe947 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -17,6 +17,8 @@
 		menuButtons = [
 			{ key: 'nav.settings', icon: 'settings', href: `/${user.username}/settings` },
 			{ key: 'nav.support', icon: 'support', href: `/support` },
+			{ key: 'nav.map', icon: 'map', href: `/${user.username}/map` },
+			{ key: 'nav.merch', icon: 'shirt', href: `https://coinosmerch.com` },
 			{ key: 'nav.signOut', icon: 'logout', href: `/logout` }
 		];
 
diff --git a/src/components/LocationsMap.svelte b/src/components/LocationsMap.svelte
index 37dd60ba..b9833c6c 100644
--- a/src/components/LocationsMap.svelte
+++ b/src/components/LocationsMap.svelte
@@ -34,16 +34,32 @@
 	let mapElement;
 	let map;
 
+	function updateLabelVisibility() {
+		const zoom = map.getZoom();
+		map.eachLayer((layer) => {
+			if (layer.getTooltip) {
+				const tooltip = layer.getTooltip();
+				if (tooltip) {
+					if (zoom > 14) {
+						// Show labels at zoom levels greater than 14
+						tooltip.setOpacity(1.0);
+					} else {
+						tooltip.setOpacity(0.0);
+					}
+				}
+			}
+		});
+	}
+
 	onMount(async () => {
 		if (browser) {
 			const L = await import('leaflet');
 
 			map = L.map(mapElement, {
-        zoomSnap: 0,
-				attributionControl: false,
+				zoomSnap: 0,
+				attributionControl: false
 			}).setView([49.26, -123.05], 12);
 
-
 			const myCustomColour = '#F7931A';
 
 			const markerHtmlStyles = `
@@ -178,17 +194,22 @@
 				marker.addTo(map);
 			});
 
+			updateLabelVisibility();
+			map.on('zoomend', updateLabelVisibility);
 			// map.fitBounds(locations.map(({ osm_json: { lat, lon } }) => [lat, lon]));
 		}
 	});
 
-	onDestroy(async () => map && map.remove());
+	onDestroy(async () => {
+		map.off('zoomend', updateLabelVisibility);
+		map && map.remove();
+	});
 </script>
 
 <div class="container mx-auto max-w-4xl">
-    <div class="flex w-full">
-        <div class="mx-auto h-[550px] w-full z-0" bind:this={mapElement} />
-    </div>
+	<div class="flex w-full">
+		<div class="mx-auto h-[550px] w-full z-0" bind:this={mapElement} />
+	</div>
 </div>
 
 <style>
@@ -197,9 +218,11 @@
 	:global(.leaflet-tooltip) {
 		border: none;
 		border-radius: 4px;
-    font-size: 12px;
+		font-size: 12px;
 		font-weight: bolder;
 		color: black;
-		background-color: rgba(255, 255, 255, 0.5);
+		background-color: rgba(255, 255, 255, 0.9);
+    left: 1.3rem;
+    top: -1rem;
 	}
 </style>
diff --git a/src/locales/en.json b/src/locales/en.json
index dbc8bf3d..7dd7c258 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -145,6 +145,8 @@
 		"failed": "Login failed"
 	},
 	"nav": {
+    "map": "Map",
+    "merch": "Merch",
 		"profile": "Profile",
 		"startInSeconds": "Start in Seconds",
 		"account": "Account",
diff --git a/src/routes/(app)/[username]/map/+page.server.js b/src/routes/(app)/[username]/map/+page.server.js
new file mode 100644
index 00000000..7936e88b
--- /dev/null
+++ b/src/routes/(app)/[username]/map/+page.server.js
@@ -0,0 +1,12 @@
+import { get } from '$lib/utils';
+
+// export const prerender = true;
+export let load = async () => {
+	let data = { locations: [] };
+
+	try {
+		data = await get('/locations');
+	} catch (e) {}
+
+	return data;
+};
diff --git a/src/routes/(app)/[username]/map/+page.svelte b/src/routes/(app)/[username]/map/+page.svelte
new file mode 100644
index 00000000..b5e4dfad
--- /dev/null
+++ b/src/routes/(app)/[username]/map/+page.svelte
@@ -0,0 +1,8 @@
+<script>
+  import { LocationsMap } from "$comp";
+  export let data;
+
+	let { locations } = data;
+</script>
+
+<LocationsMap {locations} />
diff --git a/static/icons/map.svg b/static/icons/map.svg
new file mode 100644
index 00000000..8f34ff60
--- /dev/null
+++ b/static/icons/map.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 6H12.01M9 20L3 17V4L5 5M9 20L15 17M9 20V14M15 17L21 20V7L19 6M15 17V14M15 6.2C15 7.96731 13.5 9.4 12 11C10.5 9.4 9 7.96731 9 6.2C9 4.43269 10.3431 3 12 3C13.6569 3 15 4.43269 15 6.2Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/shirt.svg b/static/icons/shirt.svg
new file mode 100644
index 00000000..9bfd4db1
--- /dev/null
+++ b/static/icons/shirt.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg 
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="#000000"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M20.38 3.46L16 2a4 4 0 01-8 0L3.62 3.46a2 2 0 00-1.34 2.23l.58 3.47a1 1 0 00.99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 002-2V10h2.15a1 1 0 00.99-.84l.58-3.47a2 2 0 00-1.34-2.23z" />
+</svg>
\ No newline at end of file