responsiv Kabelüberwachung und dashboard

components/Navigation.jsx

@@ -13,12 +13,10 @@ function Navigation() {
     }
   }, [pathname]);
 
-  // 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 = [
     { name: "Übersicht", path: "/dashboard" },
     { name: "Kabelüberwachung", path: "/kabelueberwachung" },
@@ -27,13 +25,13 @@ function Navigation() {
 
   return (
     <aside>
-      <nav className="w-64 flex-shrink-0 mt-32 overflow-hidden">
+      <nav className="w-48 sm:w-12 md:w-28 lg:w-32 xl:w-40 2xl:w-64 flex-shrink-0 mt-32 overflow-hidden">
         {menuItems.map((item) => (
           <Link href={formatPath(item.path)} key={item.name}>
             <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 text-[1rem] sm:text-[1rem] md:text-[1rem] lg:text-[1rem] xl:text-sm 2xl:text-lg ${
                 activeLink.startsWith(item.path)
-                  ? "bg-sky-500 text-white rounded-r-full"
+                  ? "bg-sky-500 text-white rounded-r-full xl:mr-4 xl:w-full  "
                   : "text-black hover:bg-gray-200 rounded-r-full"
               }`}
             >