feat: Dynamische Anpassung der Menüpfade für Produktionsumgebung

- `.html`-Endungen werden nun automatisch für Menüeinträge hinzugefügt, wenn die App in der Produktionsumgebung läuft.
- Verwendung von `process.env.NODE_ENV`, um die Umgebung zu prüfen und die Pfade entsprechend anzupassen.
- Verbesserung der Kompatibilität mit statischen Dateien nach dem Build.
This commit is contained in:
ISA
2024-11-07 09:56:43 +01:00
parent e638382380
commit 6890e35f53
2 changed files with 9 additions and 4 deletions

View File

@@ -1,4 +1,4 @@
"use client"; "use client"; // components/Navigation.jsx
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import Link from "next/link"; import Link from "next/link";
import { usePathname } from "next/navigation"; import { usePathname } from "next/navigation";
@@ -13,7 +13,12 @@ function Navigation() {
} }
}, [pathname]); }, [pathname]);
// Menüeinträge ohne .html-Endungen für SPA-Navigation // Funktion, die das ".html" basierend auf der Umgebung hinzufügt
const formatPath = (path) => {
return process.env.NODE_ENV === "production" ? `${path}.html` : path;
};
// Menüeinträge ohne .html-Endungen für die Entwicklungsumgebung
const menuItems = [ const menuItems = [
{ name: "Übersicht", path: "/dashboard" }, { name: "Übersicht", path: "/dashboard" },
{ name: "Kabelüberwachung", path: "/kabelueberwachung" }, { name: "Kabelüberwachung", path: "/kabelueberwachung" },
@@ -24,7 +29,7 @@ function Navigation() {
<aside> <aside>
<nav className="w-64 flex-shrink-0 mt-32 overflow-hidden"> <nav className="w-64 flex-shrink-0 mt-32 overflow-hidden">
{menuItems.map((item) => ( {menuItems.map((item) => (
<Link href={item.path} key={item.name}> <Link href={formatPath(item.path)} key={item.name}>
<div <div
className={`block px-4 py-2 mb-4 font-bold whitespace-nowrap transition duration-300 ${ className={`block px-4 py-2 mb-4 font-bold whitespace-nowrap transition duration-300 ${
activeLink.startsWith(item.path) activeLink.startsWith(item.path)

View File

@@ -266,7 +266,7 @@ function SettingModal({ showModal, onClose }) {
</button> </button>
{/* Weitere Inhalte wie Formular */} {/* Weitere Inhalte wie Formular */}
<div> <div className="text-black">
<h2 className="text-lg font-bold mb-4">System:</h2> <h2 className="text-lg font-bold mb-4">System:</h2>
<form> <form>
<div className="mb-4"> <div className="mb-4">