Add sidebar for displaying selected cell

components/Map.tsx

@@ -1,9 +1,10 @@
-import React, { useRef, useEffect } from "react";
+import React, { useRef, useEffect, useState } from "react";
 import Gradient from "javascript-color-gradient";
 import mapboxgl from "mapbox-gl";
 
 import styles from "../styles/Map.module.css";
 import cellModEdits from "../data/cellModEditCounts.json";
+import Sidebar from "./Sidebar";
 import ToggleLayersControl from "./ToggleLayersControl";
 
 mapboxgl.accessToken = process.env.NEXT_PUBLIC_MAPBOX_TOKEN ?? "";
@@ -12,13 +13,14 @@ const colorGradient = new Gradient();
 colorGradient.setGradient("#888888", "#00FF00", "#FFFF00", "#FF0000");
 colorGradient.setMidpoint(300);
 
-const Map = () => {
+const Map: React.FC = () => {
   const mapContainer = useRef<HTMLDivElement | null>(
     null
   ) as React.MutableRefObject<HTMLDivElement>;
   const map = useRef<mapboxgl.Map | null>(
     null
   ) as React.MutableRefObject<mapboxgl.Map>;
+  const [selectedCell, setSelectedCell] = useState<[number, number] | null>(null);
 
   useEffect(() => {
     if (map.current) return; // initialize map only once
@@ -33,8 +35,6 @@ const Map = () => {
             tileSize: 256,
             attribution:
               'Map tiles by <a href="https://en.uesp.net/wiki/Skyrim:Skyrim">UESP</a>',
-            minzoom: 1,
-            maxzoom: 8,
           },
         },
         layers: [
@@ -48,9 +48,9 @@ const Map = () => {
       },
       center: [0, 0],
       zoom: 0,
-      minZoom: -2,
+      minZoom: 0,
       maxZoom: 8,
-      renderWorldCopies: false,
+      maxBounds: [[-180, -85.051129], [180, 85.051129]]
     });
   });
 
@@ -160,7 +160,6 @@ const Map = () => {
           },
           minzoom: 4,
         },
-        "graticule"
       );
 
       const grid: GeoJSON.FeatureCollection<
@@ -208,14 +207,14 @@ const Map = () => {
             properties: {
               x: x,
               y: y,
-              cell: [x - 57, 50 - y],
+              cellX: x - 57,
+              cellY: 50 - y,
               label: `${x - 57}, ${50 - y}`,
               color: editCount ? colorGradient.getColor(editCount) : "#888888",
             },
           });
         }
       }
-      console.log(grid);
 
       map.current.addSource("grid-source", {
         type: "geojson",
@@ -241,15 +240,22 @@ const Map = () => {
     });
 
     map.current.on("click", "grid-layer", (e) => {
-      console.log(e.features && e.features[0]);
-    });
+      if (e.features && e.features[0]) {
+        const cell: [number, number] = [e.features[0].properties!.cellX, e.features[0].properties!.cellY];
+        setSelectedCell(cell);
+        map.current.resize();
+      }
     });
+  }, [setSelectedCell]);
 
   return (
-    <div>
+    <>
+      <Sidebar selectedCell={selectedCell} setSelectedCell={setSelectedCell} map={map} />
+      <div className={`${styles["map-wrapper"]} ${selectedCell ? styles["map-wrapper-sidebar-open"] : ""}`}>
         <div ref={mapContainer} className={styles["map-container"]} />
         <ToggleLayersControl map={map} />
       </div>
+    </>
   );
 };
 

components/Sidebar.tsx

@@ -0,0 +1,25 @@
+import React, { useEffect, useState } from "react";
+
+import styles from "../styles/Sidebar.module.css";
+
+type Props = {
+  selectedCell: [number, number] | null;
+  setSelectedCell: (cell: [number, number] | null) => void;
+  map: React.MutableRefObject<mapboxgl.Map | null>;
+};
+
+const Sidebar: React.FC<Props> = ({ selectedCell, setSelectedCell, map }) => {
+  const onClose = () => {
+    setSelectedCell(null);
+    requestAnimationFrame(() => { if (map.current) map.current.resize() });
+  }
+
+  return selectedCell && (
+    <div className={styles.sidebar}>
+      <button className={styles.close} onClick={onClose}>✖</button>
+        <h1>Cell {selectedCell[0]}, {selectedCell[1]}</h1>
+    </div>
+  );
+};
+
+export default Sidebar;

pages/api/hello.ts

@@ -1,13 +0,0 @@
-// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from 'next'
-
-type Data = {
-  name: string
-}
-
-export default function handler(
-  req: NextApiRequest,
-  res: NextApiResponse<Data>
-) {
-  res.status(200).json({ name: 'John Doe' })
-}

styles/Map.module.css

@@ -3,4 +3,14 @@
   top: 0;
   bottom: 0;
   width: 100%;
+  z-index: 2;
+}
+
+.map-wrapper {
+  position: relative;
+  height: 100%;
+}
+
+.map-wrapper-sidebar-open {
+  margin-left: 300px;
 }

styles/Sidebar.module.css

@@ -0,0 +1,27 @@
+.sidebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  height: 100%;
+  background-color: #f5f5f5;
+  overflow-x: hidden;
+  width: 300px;
+  padding: 12px;
+  border-right: 1px solid #222222;
+}
+
+.close {
+  position: absolute;
+  top: 4px;
+  right: 8px;
+  font-size: 24px;
+  margin-left: 12px;
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+
+.close:hover {
+  color: #888888;
+}

styles/globals.css

@@ -1,9 +1,12 @@
 html,
-body {
+body,
+div#__next {
   padding: 0;
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  width: 100%;
+  height: 100%;
 }
 
 a {