feat: hamburger menu und info Icons

2025-09-12 14:55:19 +02:00
parent f200d0bb20
commit cc19a0a466
5 changed files with 109 additions and 24 deletions
--- a/.env.development
+++ b/.env.development
@@ -23,4 +23,4 @@ NEXT_PUBLIC_USE_MOCKS=true
 # z.B. http://10.10.0.13/xyz/index.aspx -> basePath in config.json auf /xyz setzen
 # basePath wird jetzt in public/config.json gepflegt
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.1.358
+NEXT_PUBLIC_APP_VERSION=1.1.359
--- a/.env.production
+++ b/.env.production
@@ -24,4 +24,4 @@ NEXT_PUBLIC_USE_MOCKS=false
 # basePath wird jetzt in public/config.json gepflegt

 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.1.358
+NEXT_PUBLIC_APP_VERSION=1.1.359
--- a/components/mainComponent/MapComponent.js
+++ b/components/mainComponent/MapComponent.js
@@ -6,7 +6,7 @@ import "leaflet-contextmenu/dist/leaflet.contextmenu.css";
 import "leaflet-contextmenu";
 import "leaflet.smooth_marker_bouncing";
 import "react-toastify/dist/ReactToastify.css";
-import { InformationCircleIcon } from "@heroicons/react/20/solid";
+import { Icon } from "@iconify/react";
 import PoiUpdateModal from "@/components/pois/poiUpdateModal/PoiUpdateModal.js";
 import { ToastContainer, toast } from "react-toastify";
 import plusRoundIcon from "../icons/devices/overlapping/PlusRoundIcon.js";
@@ -151,6 +151,24 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
  const mapRef = useRef(null); // Referenz auf das DIV-Element der Karte
  const [map, setMap] = useState(null); // Zustand der Karteninstanz
  const [oms, setOms] = useState(null); // State für OMS-Instanz
+  // Sichtbarkeit der App-Info-Karte (unten links)
+  const [showAppInfoCard, setShowAppInfoCard] = useState(() => {
+    try {
+      const v = localStorage.getItem("showAppInfoCard");
+      return v === null ? true : v === "true";
+    } catch (_) {
+      return true;
+    }
+  });
+  // Sichtbarkeit des Layer-Kontrollpanels (oben rechts)
+  const [showLayersPanel, setShowLayersPanel] = useState(() => {
+    try {
+      const v = localStorage.getItem("showLayersPanel");
+      return v === null ? true : v === "true";
+    } catch (_) {
+      return true;
+    }
+  });

  // Flag, ob Nutzer die Polyline-Checkbox manuell betätigt hat
  // Nutzer-Flag global auf window, damit auch Redux darauf zugreifen kann
@@ -209,6 +227,19 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
    }
  });

+  // Persistiere Sichtbarkeit der App-Info-Karte
+  useEffect(() => {
+    try {
+      localStorage.setItem("showAppInfoCard", String(showAppInfoCard));
+    } catch (_) {}
+  }, [showAppInfoCard]);
+  // Persistiere Sichtbarkeit des Layer-Panels
+  useEffect(() => {
+    try {
+      localStorage.setItem("showLayersPanel", String(showLayersPanel));
+    } catch (_) {}
+  }, [showLayersPanel]);
+
  //--------------------------------------------

  const handleCoordinatesSubmit = coords => {
@@ -1035,7 +1066,9 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
        )}
      </div>

-      {GisStationsStaticDistrict && GisStationsStaticDistrict.Points?.length > 0 && (
+      {GisStationsStaticDistrict &&
+        GisStationsStaticDistrict.Points?.length > 0 &&
+        showLayersPanel && (
          <MapLayersControlPanel
            className="z-50"
            handlePolylineCheckboxChange={handlePolylineCheckboxChange}
@@ -1044,8 +1077,32 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {

      <CoordinateInput onCoordinatesSubmit={handleCoordinatesSubmit} />
      <div id="map" ref={mapRef} className="z-0" style={{ height: "100vh", width: "100vw" }}></div>
+      {/* Top-right controls: info toggle + hamburger (layers) */}
+      <div className="absolute top-3 right-3 z-50 pointer-events-auto flex items-center gap-2">
+        <button
+          onClick={() => setShowLayersPanel(v => !v)}
+          aria-label={showLayersPanel ? "Layer-Panel ausblenden" : "Layer-Panel einblenden"}
+          className="rounded-full bg-white/90 hover:bg-white shadow p-1"
+          title={showLayersPanel ? "Layer-Panel ausblenden" : "Layer-Panel einblenden"}
+        >
+          <Icon icon="material-symbols:menu-rounded" className="h-8 w-8 text-blue-900" />
+        </button>
+        <button
+          onClick={() => setShowAppInfoCard(v => !v)}
+          aria-label={showAppInfoCard ? "Info ausblenden" : "Info einblenden"}
+          className="rounded-full bg-white/90 hover:bg-white shadow p-1"
+          title={showAppInfoCard ? "Info ausblenden" : "Info einblenden"}
+        >
+          <Icon
+            icon="material-symbols:info-rounded"
+            className="text-blue-900 h-8 w-8 pr-1"
+            title={showAppInfoCard ? "Info ausblenden" : "Info einblenden"}
+          />
+        </button>
+      </div>
      <CoordinatePopup isOpen={isPopupOpen} coordinates={currentCoordinates} onClose={closePopup} />

+      {showAppInfoCard && (
        <div className="absolute bottom-3 left-3 w-72 p-4 bg-white rounded-lg shadow-md z-50">
          <div className="flex justify-between items-center">
            <div>
@@ -1055,11 +1112,16 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
            </div>
            <div>
              <button onClick={openVersionInfoModal}>
-              <InformationCircleIcon className="text-blue-900 h-8 w-8 pr-1" title="Weitere Infos" />
+                <Icon
+                  icon="material-symbols:info-rounded"
+                  className="text-blue-900 h-8 w-8 pr-1"
+                  title="Weitere Infos"
+                />
              </button>
            </div>
          </div>
        </div>
+      )}
      <VersionInfoModal
        showVersionInfoModal={showVersionInfoModal}
        closeVersionInfoModal={closeVersionInfoModal}
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,16 +1,17 @@
 {
  "name": "nodemap",
-  "version": "1.1.358",
+  "version": "1.1.359",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "nodemap",
-      "version": "1.1.358",
+      "version": "1.1.359",
      "dependencies": {
        "@emotion/react": "^11.13.3",
        "@emotion/styled": "^11.13.0",
        "@heroicons/react": "^2.1.5",
+        "@iconify/react": "^6.0.1",
        "@mui/icons-material": "^6.0.2",
        "@reduxjs/toolkit": "^2.5.1",
        "autoprefixer": "^10.4.19",
@@ -357,6 +358,27 @@
        "react": ">= 16 || ^19.0.0-rc"
      }
    },
+    "node_modules/@iconify/react": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@iconify/react/-/react-6.0.1.tgz",
+      "integrity": "sha512-fCocnAfiGXjrA0u7KkS3W/OQHNp9LRFICudvOtxmS3Mf7U92aDhP50wyzRbobZli51zYt9ksZ9g0J7H586XvOQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/cyberalien"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
+    "node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+      "license": "MIT"
+    },
    "node_modules/@isaacs/cliui": {
      "version": "8.0.2",
      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
--- a/package.json
+++ b/package.json
@@ -1,10 +1,11 @@
 {
  "name": "nodemap",
-  "version": "1.1.358",
+  "version": "1.1.359",
  "dependencies": {
    "@emotion/react": "^11.13.3",
    "@emotion/styled": "^11.13.0",
    "@heroicons/react": "^2.1.5",
+    "@iconify/react": "^6.0.1",
    "@mui/icons-material": "^6.0.2",
    "@reduxjs/toolkit": "^2.5.1",
    "autoprefixer": "^10.4.19",