Merge pull request #117 from helium/mbthiery/add-nav-control

Add navigation control to map
helium · Jan 3, 2024 · c79685b · c79685b
2 parents 467b217 + 517912a
commit c79685b
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 2 deletions.
diff --git a/src/components/Header/MobileNavigation.tsx b/src/components/Header/MobileNavigation.tsx
@@ -37,7 +37,7 @@ export function MobileNavigation(props: { className?: string }) {
         >
           <Popover.Panel
             focus
-            className="fixed inset-x-4 bottom-8 origin-top rounded-3xl bg-white p-8 ring-1 ring-zinc-900/5 dark:bg-zinc-900 dark:ring-zinc-800 sm:bottom-auto sm:top-8 "
+            className="fixed inset-x-4 bottom-auto top-8 origin-top rounded-3xl bg-white p-8 ring-1 ring-zinc-900/5 dark:bg-zinc-900 dark:ring-zinc-800 "
           >
             <div className="flex flex-row-reverse items-center justify-between">
               <Popover.Button aria-label="Close menu" className="-m-1 p-1">

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -28,7 +28,7 @@ function Logo({ className, ...props }: { className?: string }) {
 
 export function Header() {
   return (
-    <header className="fixed bottom-1 z-50 h-24 sm:bottom-auto sm:pt-6">
+    <header className="fixed bottom-auto z-50 h-24 pt-6">
       <Container className="fixed w-full">
         <div className="relative flex gap-4 rounded-xl bg-white/30 px-4 py-2 text-sm font-medium text-zinc-800 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur-sm dark:bg-zinc-800/30 dark:text-zinc-200 dark:ring-white/10">
           <div className="flex flex-1 items-center">

diff --git a/src/components/HotspotsMap/index.tsx b/src/components/HotspotsMap/index.tsx
@@ -18,6 +18,7 @@ import Map, {
   MapLayerMouseEvent,
   MapRef,
   MapStyle,
+  NavigationControl,
   Source,
 } from "react-map-gl"
 import { gaEvent } from "../GATracker"
@@ -155,6 +156,7 @@ export function HotspotsMap({ children }: { children: React.ReactNode }) {
       ref={mapRef}
       attributionControl={false}
     >
+      <NavigationControl position="bottom-left" showCompass={false} />
       {children}
 
       {segment !== "stats" && <Attribution />}