Side Menu layer 2 updated

src/components/defaultLayout/MainBodyWithHeader.tsx

@@ -21,14 +21,18 @@ const MainBodyWithHeader: React.FC<MainBodyWithHeaderProps> = async ({
   const user = await checkServerPageAvaliable();
   const restrictions = await retrieveavailablePages();
   return (
-    <div className="flex w-full h-full">
+    <div className="flex w-full h-full ">
       <Suspense fallback={<div>Loading Profile...</div>}>
         <div className="flex flex-col  min-h-screen bg-slate-200">
           <div className="basis-1/4 p-4 border-2 border-black">
             <SideMenuProfile profileInfo={user} />
           </div>
-          <div className="basis-3/4 p-4 border-2 border-black">
+          <div className="basis-3/4 p-4 border-2 border-black text-sm">
-            <SideMenu section={section} lang={user?.lang ?? "tr"} restrictions={restrictions} />
+            <SideMenu
+              section={section}
+              lang={user?.lang ?? "tr"}
+              restrictions={restrictions}
+            />
           </div>
         </div>
       </Suspense>

src/components/defaultLayout/SideMenu.tsx

@@ -35,13 +35,13 @@ const SideMenu: React.FC<SideMenuProps> = async ({
 
   if (layer === 1) {
     return (
-      <nav className="flex flex-col text-sm">
+      <nav className="flex flex-col">
         {PagesInfosAndEndpoints.map((page) => {
           return (
             <FirstLayerMenu
+              section={section}
               key={page.name}
               page={page}
-              currentPage={currentPage}
               mappedLayers={pages}
               restrictionsList={restrictions}
               lang={lang as LanguagesSelectable}
@@ -52,13 +52,13 @@ const SideMenu: React.FC<SideMenuProps> = async ({
     );
   } else if (layer === 2) {
     return (
-      <nav className="flex flex-col text-sm">
+      <nav className="flex flex-col">
         {PagesInfosAndEndpoints.map((page) => {
           return (
             <SecondLayerMenu
+              section={section}
               key={page.name}
               page={page}
-              currentPage={currentPage}
               mappedLayers={pages}
               restrictionsList={restrictions}
               lang={lang as LanguagesSelectable}
@@ -69,7 +69,7 @@ const SideMenu: React.FC<SideMenuProps> = async ({
     );
   } else if (layer === 3) {
     return (
-      <nav className="flex flex-col text-sm">
+      <nav className="flex flex-col">
         {PagesInfosAndEndpoints.map((page) => {
           const Icon = getIconByName(page.icon);
           if (firstLayerPage.name === page.name) {

src/components/defaultLayout/SideMenuButtons.tsx

@@ -24,9 +24,9 @@ interface ActiveButtonInterface {
 }
 
 interface RenderMenuInterface {
+  section: any;
   key: string;
   page: any;
-  currentPage: string;
   mappedLayers: any | MappedLayersInterface;
   lang: string;
   restrictionsList?: any;
@@ -99,15 +99,15 @@ const LayerButton: React.FC<ActiveButtonInterface> = ({
 };
 
 const FirstLayerMenu: React.FC<RenderMenuInterface> = ({
+  section,
   key,
   page,
-  currentPage,
   mappedLayers,
   restrictionsList,
   lang,
 }) => {
   if (restrictionsList.includes(String(page.name))) {
-    if (page.name === currentPage) {
+    if (page.name === section.currentPage) {
       return (
         <div key={key}>
           <DisableButton
@@ -134,29 +134,29 @@ const FirstLayerMenu: React.FC<RenderMenuInterface> = ({
     }
     if (restrictionsList.includes(String(page.name))) {
       return (
-        <>
+        <div key={key}>
           <ActiveButton
             key={page.name}
             url={page.url}
             title={page.title?.[lang]}
             Icon={getIconByName(page.icon)}
           />
-        </>
+        </div>
       );
     }
   }
 };
 
 const SecondLayerMenu: React.FC<RenderMenuInterface> = ({
+  section,
   key,
   page,
-  currentPage,
   mappedLayers,
   restrictionsList,
   lang,
 }) => {
   if (restrictionsList.includes(String(mappedLayers.firstLayer.name))) {
-    if (mappedLayers.firstLayer.name === page.name) {
+    if (section.firstLayer === page.name) {
       return (
         <div key={key}>
           <ActiveButton
@@ -167,9 +167,8 @@ const SecondLayerMenu: React.FC<RenderMenuInterface> = ({
           />
           <div className="mb-6 mt-3 px-4">
             {mappedLayers.secondLayer.map((subPage: any) => {
-              console.log("subPage", subPage);
               if (restrictionsList.includes(String(subPage.name))) {
-                if (subPage.name === currentPage) {
+                if (subPage.name === section.currentPage) {
                   return (
                     <LayerButton
                       key={subPage.name}
@@ -196,7 +195,7 @@ const SecondLayerMenu: React.FC<RenderMenuInterface> = ({
     }
     if (restrictionsList.includes(String(page.name))) {
       return (
-        <div>
+        <div key={key}>
           <ActiveButton
             key={page.name}
             url={page.url}
@@ -209,4 +208,81 @@ const SecondLayerMenu: React.FC<RenderMenuInterface> = ({
   }
 };
 
-export { FirstLayerMenu, SecondLayerMenu };
+const ThirdLayerMenu: React.FC<RenderMenuInterface> = ({
+  section,
+  key,
+  page,
+  mappedLayers,
+  restrictionsList,
+  lang,
+}) => {
+  if (restrictionsList.includes(String(mappedLayers.firstLayer.name))) {
+    if (mappedLayers.firstLayer.name === page.name) {
+      return (
+        <div key={key}>
+          <ActiveButton
+            key={page.name}
+            url={page.url}
+            title={page.title?.[lang]}
+            Icon={getIconByName(page.icon)}
+          />
+          <div className="mb-6 mt-3 px-4">
+            {mappedLayers.secondLayer.map((subPage: any) => {
+              if (restrictionsList.includes(String(subPage.name))) {
+                return (
+                  <div>
+                    <ActiveButton
+                      key={subPage.name}
+                      url={subPage.url}
+                      title={subPage.title?.[lang]}
+                      Icon={getIconByName(subPage.icon)}
+                    />
+                    <div className="mb-6 mt-3 px-4">
+                      {mappedLayers.thirdLayer.map((thirdPage: any) => {
+                        if (restrictionsList.includes(String(thirdPage.name))) {
+                          if (thirdPage.name === section.currentPage) {
+                            return (
+                              <LayerButton
+                                key={thirdPage.name}
+                                url={thirdPage.url}
+                                title={thirdPage.title?.[lang]}
+                                Icon={getIconByName(thirdPage.icon)}
+                              />
+                            );
+                          } else {
+                            return (
+                              <ActiveButton
+                                key={thirdPage.name}
+                                url={thirdPage.url}
+                                title={thirdPage.title?.[lang]}
+                                Icon={getIconByName(thirdPage.icon)}
+                              />
+                            );
+                          }
+                        }
+                      })}
+                    </div>
+                  </div>
+                );
+              }
+            })}
+          </div>
+        </div>
+      );
+    }
+    if (restrictionsList.includes(String(page.name))) {
+      return (
+        <div key={key}>
+          <ActiveButton
+            key={page.name}
+            url={page.url}
+            title={page.title?.[lang]}
+            Icon={getIconByName(page.icon)}
+          />
+        </div>
+      );
+    }
+  }
+};
+
+export { FirstLayerMenu, SecondLayerMenu, ThirdLayerMenu };

src/lib/getPageFromMappings.ts

@@ -1,14 +1,5 @@
 import { retrievePageByComponentName } from "@/hooks/retrievePageInfoByComponentName";
 
-function getSubCategoryByPageName(subCategories: [], layerName: string) {
-  console.log("subCategories", subCategories, "layerName", layerName);
-  const subCategory = subCategories.filter((s: any) => s.name === layerName);
-  console.log("subCategory", subCategory);
-  if (subCategory.length === 0) {
-    return null;
-  }
-}
-
 export function getThreeLayerByPageName({
   lang,
   layer = 1,