Update - Menu

- active menu highlighted

app/[locale]/(routes)/admin/_components/GptCard.tsx

@@ -20,15 +20,13 @@ const GptCard = async () => {
       <CardHeader className="text-lg">
         <CardTitle>AI assistant GPT model</CardTitle>
         <CardDescription>
-          <div>
-            actual model:{" "}
-            {
-              //filter in gptModels where status = ACTIVE
-              gptModels
-                .filter((model) => model.status === "ACTIVE")
-                .map((model) => model.model)
-            }
-          </div>
+          actual model:{" "}
+          {
+            //filter in gptModels where status = ACTIVE
+            gptModels
+              .filter((model) => model.status === "ACTIVE")
+              .map((model) => model.model)
+          }
         </CardDescription>
       </CardHeader>
       <CardContent className="space-y-2">

app/[locale]/(routes)/components/ModuleMenu.tsx

@@ -1,7 +1,6 @@
 "use client";
 
-import React, { useState } from "react";
-import MenuItem from "./ui/MenuItem";
+import React, { useEffect, useState } from "react";
 
 import ProjectModuleMenu from "./menu-items/Projects";
 import SecondBrainModuleMenu from "./menu-items/SecondBrain";
@@ -13,12 +12,24 @@ import EmployeesModuleMenu from "./menu-items/Employees";
 import DataboxModuleMenu from "./menu-items/Databoxes";
 import CrmModuleMenu from "./menu-items/Crm";
 
+import AdministrationMenu from "./menu-items/Administration";
+import DashboardMenu from "./menu-items/Dashboard";
+
 type Props = {
   modules: any;
 };
 
 const ModuleMenu = ({ modules }: Props) => {
   const [open, setOpen] = useState(true);
+  const [isMounted, setIsMounted] = useState(false);
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  if (!isMounted) {
+    return null;
+  }
 
   //Console logs
   //console.log(modules, "modules");
@@ -28,7 +39,7 @@ const ModuleMenu = ({ modules }: Props) => {
       <div
         className={` ${
           open ? "w-72" : "w-20 "
-        } bg-dark-purple h-screen p-5  pt-8 relative duration-300`}
+        }  h-screen p-5  pt-8 relative duration-300`}
       >
         <div className="flex gap-x-4 items-center">
           <div
@@ -48,13 +59,8 @@ const ModuleMenu = ({ modules }: Props) => {
             {process.env.NEXT_PUBLIC_APP_NAME}
           </h1>
         </div>
-        <ul className="pt-6">
-          <MenuItem
-            icon="home"
-            open={open}
-            route={"/"}
-            menuItem={"Dashboard"}
-          />
+        <div className="pt-6">
+          <DashboardMenu open={open} />
           {modules.find(
             (menuItem: any) => menuItem.name === "crm" && menuItem.enabled
           ) ? (
@@ -101,32 +107,8 @@ const ModuleMenu = ({ modules }: Props) => {
           ) ? (
             <ChatGPTModuleMenu open={open} />
           ) : null}
-
-          {/*  {modules.map((menuItem: any) => {
-            if (menuItem.enabled === true) {
-              return (
-                <MenuItem
-                  key={menuItem.id}
-                  icon={menuItem.icon}
-                  open={open}
-                  route={menuItem.route}
-                  menuItem={menuItem.menuItem}
-                />
-              );
-            } else {
-              return null;
-            }
-          })} */}
-          <li>
-            {/* Admin menu item is allways enabled */}
-            <MenuItem
-              icon="wrenchScrewdriver"
-              open={open}
-              route={"/admin"}
-              menuItem={"Administrace"}
-            />
-          </li>
-        </ul>
+          <AdministrationMenu open={open} />
+        </div>
       </div>
     </div>
   );

app/[locale]/(routes)/components/menu-items/Administration.tsx

@@ -0,0 +1,25 @@
+import { Wrench } from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+type Props = {
+  open: boolean;
+};
+
+const AdministrationMenu = ({ open }: Props) => {
+  const pathname = usePathname();
+  const isPath = pathname.includes("admin");
+  return (
+    <div className="flex flex-row items-center mx-auto p-2">
+      <Link
+        href={"/admin"}
+        className={`flex gap-2 p-2 ${isPath ? "text-muted-foreground" : null}`}
+      >
+        <Wrench className="w-6" />
+        <span className={open ? "" : "hidden"}>Administration</span>
+      </Link>
+    </div>
+  );
+};
+
+export default AdministrationMenu;

app/[locale]/(routes)/components/menu-items/ChatGPT.tsx

@@ -1,33 +1,24 @@
 "use client";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import {
-  Bot,
-  FileBarChart,
-  FileCheck,
-  FileText,
-  Lightbulb,
-  ServerIcon,
-  UserIcon,
-} from "lucide-react";
+
+import { Bot } from "lucide-react";
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 
-import { useRouter } from "next/navigation";
 import React from "react";
 
 type Props = {
   open: boolean;
 };
 
 const ChatGPTModuleMenu = ({ open }: Props) => {
+  const pathname = usePathname();
+  const isPath = pathname.includes("openAi");
   return (
     <div className="flex flex-row items-center mx-auto p-2">
-      <Link href={"/openAi"} className="flex gap-2 p-2">
+      <Link
+        href={"/openAi"}
+        className={`flex gap-2 p-2 ${isPath ? "text-muted-foreground" : null}`}
+      >
         <Bot className="w-6" />
         <span className={open ? "" : "hidden"}>ChatGPT</span>
       </Link>

app/[locale]/(routes)/components/menu-items/Crm.tsx

@@ -6,7 +6,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Coins, UserIcon } from "lucide-react";
+import { Coins } from "lucide-react";
 
 import { useRouter } from "next/navigation";
 import React, { startTransition } from "react";
@@ -33,8 +33,14 @@ const CrmModuleMenu = ({ open }: Props) => {
     });
   }
 
+  const isPath = pathname.includes("crm");
+
   return (
-    <div className="flex flex-row items-center mx-auto p-2">
+    <div
+      className={`flex flex-row items-center mx-auto p-2 ${
+        isPath ? "text-muted-foreground" : null
+      }`}
+    >
       <DropdownMenu>
         <DropdownMenuTrigger
           className={

app/[locale]/(routes)/components/menu-items/Dashboard.tsx

@@ -0,0 +1,27 @@
+import { Home } from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+import React from "react";
+
+type Props = {
+  open: boolean;
+};
+
+const DashboardMenu = ({ open }: Props) => {
+  const pathname = usePathname();
+  const isPath = pathname.includes("nevermind");
+  return (
+    <div className="flex flex-row items-center mx-auto p-2">
+      <Link
+        href={"/"}
+        className={`flex gap-2 p-2 ${isPath ? "text-muted-foreground" : null}`}
+      >
+        <Home className="w-6" />
+        <span className={open ? "" : "hidden"}>Dashboard</span>
+      </Link>
+    </div>
+  );
+};
+
+export default DashboardMenu;

app/[locale]/(routes)/components/menu-items/Databoxes.tsx

@@ -1,34 +1,23 @@
 "use client";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import {
-  Bot,
-  FileBarChart,
-  FileCheck,
-  FileEdit,
-  FileText,
-  Lightbulb,
-  ServerIcon,
-  UserIcon,
-} from "lucide-react";
+import { FileEdit } from "lucide-react";
 import Link from "next/link";
 
-import { useRouter } from "next/navigation";
+import { usePathname } from "next/navigation";
 import React from "react";
 
 type Props = {
   open: boolean;
 };
 
 const DataboxModuleMenu = ({ open }: Props) => {
+  const pathname = usePathname();
+  const isPath = pathname.includes("databox");
   return (
     <div className="flex flex-row items-center mx-auto p-2">
-      <Link href={"/databox"} className="flex gap-2 p-2">
+      <Link
+        href={"/databox"}
+        className={`flex gap-2 p-2 ${isPath ? "text-muted-foreground" : null}`}
+      >
         <FileEdit className="w-6" />
         <span className={open ? "" : "hidden"}>Databox</span>
       </Link>

app/[locale]/(routes)/components/menu-items/Documents.tsx

@@ -1,32 +1,22 @@
-"use client";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import {
-  FileBarChart,
-  FileCheck,
-  FileText,
-  Lightbulb,
-  ServerIcon,
-  UserIcon,
-} from "lucide-react";
+import { FileText } from "lucide-react";
 import Link from "next/link";
 
-import { useRouter } from "next/navigation";
+import { usePathname } from "next/navigation";
 import React from "react";
 
 type Props = {
   open: boolean;
 };
 
 const DocumentsModuleMenu = ({ open }: Props) => {
+  const pathname = usePathname();
+  const isPath = pathname.includes("documents");
   return (
     <div className="flex flex-row items-center mx-auto p-2">
-      <Link href={"/documents"} className="flex gap-2 p-2">
+      <Link
+        href={"/documents"}
+        className={`flex gap-2 p-2 ${isPath ? "text-muted-foreground" : null}`}
+      >
         <FileText className="w-6" />
         <span className={open ? "" : "hidden"}>Documents</span>
       </Link>

app/[locale]/(routes)/components/menu-items/Employees.tsx

@@ -1,5 +1,6 @@
 import { Users } from "lucide-react";
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 
 import React from "react";
 
@@ -8,9 +9,14 @@ type Props = {
 };
 
 const EmployeesModuleMenu = ({ open }: Props) => {
+  const pathname = usePathname();
+  const isPath = pathname.includes("employees");
   return (
     <div className="flex flex-row items-center mx-auto p-2">
-      <Link href={"/employees"} className="flex gap-2 p-2">
+      <Link
+        href={"/employees"}
+        className={`flex gap-2 p-2 ${isPath ? "text-muted-foreground" : null}`}
+      >
         <Users className="w-6" />
         <span className={open ? "" : "hidden"}>Employees</span>
       </Link>

app/[locale]/(routes)/components/menu-items/Invoices.tsx

@@ -1,25 +1,22 @@
-"use client";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { FileCheck, Lightbulb, ServerIcon, UserIcon } from "lucide-react";
+import { FileCheck } from "lucide-react";
 import Link from "next/link";
 
-import { useRouter } from "next/navigation";
+import { usePathname } from "next/navigation";
 import React from "react";
 
 type Props = {
   open: boolean;
 };
 
 const InvoicesModuleMenu = ({ open }: Props) => {
+  const pathname = usePathname();
+  const isPath = pathname.includes("invoice");
   return (
     <div className="flex flex-row items-center mx-auto p-2">
-      <Link href={"/invoice"} className="flex gap-2 p-2">
+      <Link
+        href={"/invoice"}
+        className={`flex gap-2 p-2 ${isPath ? "text-muted-foreground" : null}`}
+      >
         <FileCheck className="w-6" />
         <span className={open ? "" : "hidden"}>Invoices</span>
       </Link>