[WIP][FEAT]: Add server side, download and readers page

src/components/MainMenu/MainMenuSideBar.tsx

@@ -10,6 +10,9 @@ import { MainMenuSideBarItems, MainMenuSideBarProps } from "./MenuSideBarProps";
 import ElectricBoltIcon from "@mui/icons-material/ElectricBolt";
 import { useNavigateToTop } from "../../hooks/useNavigateToTop";
 
+import ExpandLess from "@mui/icons-material/ExpandLess";
+import ExpandMore from "@mui/icons-material/ExpandMore";
+
 export default function MainMenuSideBar(props: MainMenuSideBarProps) {
   const { /* items, */ selectedIndex /* setSelectedIndex */ } = props;
   const navigate = useNavigateToTop();
@@ -64,7 +67,6 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
           index: 26,
           onClick: () => navigate("/components/fullscreen"),
         },
-       
       ],
     },
     {
@@ -126,43 +128,31 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
       index: 5,
       onClick: () => navigate("/localization"),
     },
+    /* {
+      label: "Code Generator",
+      index: 7,
+      onClick: () => navigate("/code-generator"),
+    }, */
+    {
+      label: "Types",
+      index: 7,
+      onClick: () => navigate("/types"),
+    },
     {
       label: "Server side",
       index: 6,
       onClick: () => navigate("/server-side"),
     },
     {
-      label: "Code Generator",
-      index: 7,
-      onClick: () => navigate("/code-generator"),
-    },
-    {
-      label: "Types",
+      label: "File readers",
       index: 8,
-      onClick: () => navigate("/types"),
+      onClick: () => navigate("/file-reader"),
     },
+
     {
-      label: "Utilities Methods",
+      label: "File download",
       index: 9,
-      subMenu: [
-        {
-          label: "File readers",
-          index: 81,
-          onClick: () => navigate("/utilities-methods/file-reader"),
-        },
-
-        {
-          label: "File uploader",
-          index: 82,
-          onClick: () => navigate("/utilities-methods/file-uploader"),
-        },
-
-        {
-          label: "File download",
-          index: 83,
-          onClick: () => navigate("/utilities-methods/file-downloader"),
-        },
-      ],
+      onClick: () => navigate("/file-download"),
     },
   ];
 
@@ -175,6 +165,7 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
     })
   );
 
+
   /*   const handleClick = () => {
     //setOpen(!open);
   }; */
@@ -195,11 +186,24 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
     withSubMenu?: boolean
   ) => {
     //setSelectedIndex(index);
+    console.log("newIndex",index, withSubMenu);
     if (!withSubMenu) {
       onClick?.();
     } else {
       setRegularItemsIni((arr) =>
         arr.map((item) => {
+      /*     if (item.subMenu) {
+            const newSubMenu = item.subMenu.map((x) => {
+              if (x.index === index) {
+                return { ...x , };
+              } else {
+                return { ...x };
+              }
+            });
+            return { ...item, subMenu: newSubMenu };
+          } else */
+          
+         
           if (item.index === index) {
             return { ...item, isOpen: !item.isOpen };
           }
@@ -300,7 +304,9 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
                   style={{ padding: "2px 20px" }}
                   key={indexBase}
                   // selected={subMenu === undefined && selectedIndex === index}
-                  selected={isOpen && selectedIndex === index}
+                  selected={
+                    (subMenu === undefined || isOpen) && selectedIndex === index
+                  }
                   onClick={(event) =>
                     handleListItemClick(
                       event,
@@ -321,6 +327,7 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
                     primary={label || ""}
                     primaryTypographyProps={{ fontWeight: "600" }}
                   />
+                  {subMenu && <>{isOpen ? <ExpandLess /> : <ExpandMore />}</>}
                 </ListItemButton>
 
                 {subMenu && (
@@ -336,6 +343,7 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
                           <ListItemButton
                             style={{ paddingTop: 0 }}
                             sx={{ pl: 4 }}
+                            //selected={selectedIndex === index}
                             selected={selectedIndex === index}
                             key={index2 + indexBase}
                             onClick={(event) =>

src/components/layout-pages/FooterPage.scss

+.fui-page-footer-container {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  .redirect-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .like-icon-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  @media (max-width: "960px") {
+    .redirect-container {
+      display: none;
+    }
+    .redirect-small-container {
+      display: flex;
+    }
+    .like-icon-container {
+      width: 100%;
+    }
+  }
+}

src/components/layout-pages/FooterPage.tsx

+import { Button, Divider } from "@mui/material";
+import * as React from "react";
+import KeyboardArrowLeftIcon from "@mui/icons-material/KeyboardArrowLeft";
+import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
+import { useNavigate } from "react-router";
+import "./FooterPage.scss";
+
+interface FooterPageProps {
+  labelBefore?: string;
+  labelAfter?: string;
+  linkBefore?: string;
+  linkAfter?: string;
+  page: string;
+}
+const FooterPage: React.FC<FooterPageProps> = (props: FooterPageProps) => {
+  const { labelAfter, labelBefore, linkAfter, linkBefore, page } = props;
+  const redirect = useNavigate();
+  return (
+    <footer>
+      <Divider style={{ width: "100%" }}></Divider>
+      <div className="fui-page-footer-container">
+        <div className="redirect-small-container">
+          {labelBefore && (
+            <Button
+              startIcon={<KeyboardArrowLeftIcon />}
+              onClick={linkBefore ? () => redirect(linkBefore) : undefined}
+            >
+              {labelBefore}
+            </Button>
+          )}
+          {labelAfter && (
+            <Button
+              endIcon={<KeyboardArrowRightIcon />}
+              onClick={labelAfter ? () => redirect(labelAfter) : undefined}
+            >
+              {labelAfter}
+            </Button>
+          )}
+        </div>
+
+        <div className="redirect-container">
+          {labelBefore && (
+            <Button
+              startIcon={<KeyboardArrowLeftIcon />}
+              onClick={linkBefore ? () => redirect(linkBefore) : undefined}
+            >
+              {labelBefore}
+            </Button>
+          )}
+        </div>
+
+        <div className="like-icon-container">like icons</div>
+        <div className="redirect-container">
+          {labelAfter && (
+            <Button
+              endIcon={<KeyboardArrowRightIcon />}
+              onClick={linkAfter ? () => redirect(linkAfter) : undefined}
+            >
+              {labelAfter}
+            </Button>
+          )}
+        </div>
+      </div>
+    </footer>
+  );
+};
+export default FooterPage;

src/components/layout-pages/MainContentContainer.jsx

@@ -22,6 +22,7 @@ const MainContentContainer = ({ children }) => {
         }}
       >
         {children}
+        
       </Box>
     </Box>
   );

src/pages/download-page/FileDownloadPage.jsx

 import * as React from "react";
+import MainContentContainer from "../../components/layout-pages/MainContentContainer";
+import MainLayoutPage from "../../components/layout-pages/MainLayoutPage";
+import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
+import MainTitle from "../../components/main-title/MainTitle";
+import MainParagraph from "../../components/paragraph-main/MainParagraph";
+import RightMenu from "../../components/RightMenu/RightMenu";
 
-const FileDownloadPage = props =>{
-    return(
-        <div>
-        FileDownloadPage
-        </div>
-    )
-}
-export default FileDownloadPage;
\ No newline at end of file
+const FileDownloadPage = (props) => {
+  return (
+    <React.Fragment>
+      <MainLayoutPage selectedIndex={9}>
+        <MainContentContainer>
+          <MainTitle>File Download</MainTitle>
+          <MainParagraph>
+            API reference docs for all the important types related to files UI
+            components.
+          </MainParagraph>
+        </MainContentContainer>
+      </MainLayoutPage>
+
+      <RightMenuContainer>
+        <RightMenu width="240px" items={rightMenuItems} />
+      </RightMenuContainer>
+    </React.Fragment>
+  );
+};
+export default FileDownloadPage;
+
+const rightMenuItems = [
+  {
+    id: 0,
+    label: "From Same host",
+    referTo: "/types#extfile",
+  },
+  {
+    id: 1,
+    label: "From Another host",
+    referTo: "/types#validatefileresponse",
+  },
+  
+];

src/pages/server-side/ServerSidePage.jsx

-import * as React from "react";
-import MainContentContainer from "../../components/layout-pages/MainContentContainer";
-import MainLayoutPage from "../../components/layout-pages/MainLayoutPage";
-import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
-import MainTitle from "../../components/main-title/MainTitle";
-import RightMenu from "../../components/RightMenu/RightMenu";
-
-const ServerSidePage = (props) => {
-  return (
-    <React.Fragment>
-      <MainLayoutPage selectedIndex={4}>
-        <MainContentContainer>
-          <MainTitle>Server Side implementatios</MainTitle>
-        </MainContentContainer>{" "}
-        <RightMenuContainer>
-          <RightMenu width="240px" items={[]} />
-        </RightMenuContainer>
-      </MainLayoutPage>
-    </React.Fragment>
-  );
-};
-export default ServerSidePage;

src/pages/server-side/ServerSidePage.tsx

+import * as React from "react";
+import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
+import SubTitle from "../../components/demo-components/sub-title/SubTitle";
+import MainContentContainer from "../../components/layout-pages/MainContentContainer";
+import MainLayoutPage from "../../components/layout-pages/MainLayoutPage";
+import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
+import MainTitle from "../../components/main-title/MainTitle";
+import MainParagraph from "../../components/paragraph-main/MainParagraph";
+import RightMenu from "../../components/RightMenu/RightMenu";
+import AnchorToTab from "../../components/util-components/AnchorToTab";
+
+const ServerSidePage = () => {
+  return (
+    <React.Fragment>
+      <MainLayoutPage selectedIndex={6}>
+        <MainContentContainer>
+          <MainTitle>Server Side implementations</MainTitle>
+          <MainParagraph>
+            Some implementations for handling correctly the uploaded files using
+            Files UI.
+          </MainParagraph>
+          <DescParagraph>
+            If you think there should be added more of them or you want to add
+            your own in any other programming language, please contact us.
+          </DescParagraph>
+          <section id="expressjs">
+            <SubTitle content="Express JS" />
+            <DescParagraph>
+              The following code is just the main part of a project. Check it up
+              in the following{" "}
+              <AnchorToTab href="https://github.com/files-ui/files-ui-web-test/tree/master/expressjs">
+                here
+              </AnchorToTab>
+              .
+            </DescParagraph>
+          </section>
+          <section id="springboot">
+            <SubTitle content="Java - Spring boot" />{" "}
+            <DescParagraph>
+              The following code is just the main part of a project. Check it up
+              in the following{" "}
+              <AnchorToTab href="https://github.com/files-ui/files-ui-web-test/tree/master/springboot">
+                here
+              </AnchorToTab>
+              .
+            </DescParagraph>
+          </section>
+        </MainContentContainer>
+        <RightMenuContainer>
+          <RightMenu width="240px" items={rightMenuItems} />
+        </RightMenuContainer>
+      </MainLayoutPage>
+    </React.Fragment>
+  );
+};
+export default ServerSidePage;
+
+const rightMenuItems = [
+  {
+    id: 0,
+    label: "ExpressJS",
+    referTo: "/server-side#expressjs",
+  },
+  {
+    id: 1,
+    label: "Spring Boot (Java)",
+    referTo: "/server-side#springboot",
+  },
+];

src/pages/types-page/TypesPage.jsx

@@ -70,7 +70,7 @@ const rightMenuItems = [
 const TypesPage = (props) => {
   return (
     <React.Fragment>
-      <MainLayoutPage selectedIndex={6}>
+      <MainLayoutPage selectedIndex={7}>
         <MainContentContainer>
           <MainTitle>Types</MainTitle>
           <MainParagraph>

src/pages/utilities/FileReaderPage.tsx

 import * as React from "react";
 import MainContentContainer from "../../components/layout-pages/MainContentContainer";
+import MainLayoutPage from "../../components/layout-pages/MainLayoutPage";
 import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
 import MainTitle from "../../components/main-title/MainTitle";
 import RightMenu from "../../components/RightMenu/RightMenu";
@@ -18,9 +19,12 @@ const FileReaderPage: React.FC<FileReaderPageProps> = (
 ) => {
   return (
     <React.Fragment>
-      <MainContentContainer>
+      <MainLayoutPage selectedIndex={8}>
+         <MainContentContainer>
         <MainTitle>File Reader</MainTitle>
       </MainContentContainer>
+      </MainLayoutPage>
+     
 
       <RightMenuContainer>
         <RightMenu width="240px" items={rightMenuItems} />

src/pages/utilities/FileUploaderPage.tsx

 import * as React from "react";
 import MainContentContainer from "../../components/layout-pages/MainContentContainer";
+import MainLayoutPage from "../../components/layout-pages/MainLayoutPage";
 import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
 import MainTitle from "../../components/main-title/MainTitle";
 import RightMenu from "../../components/RightMenu/RightMenu";
@@ -7,8 +8,13 @@ import RightMenu from "../../components/RightMenu/RightMenu";
 const rightMenuItems = [
   {
     id: 0,
+    label: "Upload to server",
+    referTo: "/file-upload/#uploadtoaws",
+  },
+  {
+    id: 1,
     label: "Upload to AWS",
-    referTo: "/utilities-methods/file-reader/#read-as-url",
+    referTo: "/file-upload/#uploadtoaws",
   },
 ];
 
@@ -18,9 +24,11 @@ const FileUploaderPage: React.FC<FileUploaderPageProps> = (
 ) => {
   return (
     <React.Fragment>
-      <MainContentContainer>
-        <MainTitle>File Upoad</MainTitle>
-      </MainContentContainer>
+      <MainLayoutPage selectedIndex={8}>
+        <MainContentContainer>
+          <MainTitle>File Upload</MainTitle>
+        </MainContentContainer>
+      </MainLayoutPage>
 
       <RightMenuContainer>
         <RightMenu width="240px" items={rightMenuItems} />

src/routes/MainRouter.jsx

@@ -6,7 +6,7 @@ import DropzoneDemoPage from "./../pages/demo/DropzoneDemoPage";
 import FileMosaicDemoPage from "./../pages/demo/FileMosaicDemoPage";
 import FileCardDemoPage from "./../pages/demo/FileCardDemoPage";
 import ServerSidePage from "./../pages/server-side/ServerSidePage";
-import CodeGeneratorPage from "./../pages/code-generator/CodeGeneratorPage";
+//import CodeGeneratorPage from "./../pages/code-generator/CodeGeneratorPage";
 import DropzoneApi from "./../pages/api/DropzoneApi";
 import FileMosaicApi from "./../pages/api/FileMosaicApi";
 import FileCardApi from "./../pages/api/FileCardApi";
@@ -15,7 +15,7 @@ import TypesPage from "./../pages/types-page/TypesPage";
 import { createBrowserRouter, Outlet, RouterProvider } from "react-router-dom";
 import MainLayoutPage from "../components/layout-pages/MainLayoutPage";
 import FileReaderPage from "../pages/utilities/FileReaderPage";
-import FileUploaderPage from "../pages/utilities/FileUploaderPage";
+//import FileUploaderPage from "../pages/utilities/FileUploaderPage";
 import AvatarDemoPage from "../pages/demo/AvatarDemoPage";
 import FileInputButtonApi from "../pages/api/FileInputButtonApi";
 import AvatarApi from "../pages/api/AvatarApi";
@@ -134,37 +134,28 @@ const router = createBrowserRouter([
     path: "/server-side",
     element: <ServerSidePage />,
   },
-  {
+/*   {
     path: "/code-generator",
     element: <CodeGeneratorPage />,
-  },
+  }, */
   {
     path: "/types",
     element: <TypesPage />,
   },
-
   {
-    path: "/utilities-methods",
-    element: (
-      <MainLayoutPage selectedIndex={7}>
-        <Outlet />
-      </MainLayoutPage>
-    ),
-    children: [
-      {
-        path: "/utilities-methods/file-reader",
-        element: <FileReaderPage />,
-      },
-      {
-        path: "/utilities-methods/file-uploader",
-        element: <FileUploaderPage />,
-      },
-      {
-        path: "/utilities-methods/file-downloader",
-        element: <FileDownloadPage />,
-      },
-    ],
+    path: "/file-reader",
+    element: <FileReaderPage />,
+  },
+  {
+    path: "/file-download",
+    element: <FileDownloadPage />,
   },
+  ///
+/*   {
+    path: "/file-upload",
+    element: <FileUploaderPage />,
+  }, */
+
 ]);
 
 const MainRouter = (props) => {

src/types/PageProps.ts

+export type PageList =
+    "Getting Started" |
+    "Usage" |
+    "Dropzone Demo" |
+    "FileMosaic Demo" |
+    "FileCard Demo" |
+    "FileInputButton Demo" |
+    "FullScreen Demo" |
+    "Avatar Demo" |
+    "Dropzone Api" |
+    "FileMosaic Api" |
+    "FileCard Api" |
+    "FileInputButton Api" |
+    "FullScreen Api" |
+    "Avatar Api" |
+    "ImagePreview Api" |
+    "VideoPreview Api" |
+    "File Icons" |
+    "Localization" |
+    "Server Side" |
+    "Types" |
+    "File Reders" |
+    "File Upload" |
+    "File Download"
+    ;
+
+export type PageProps = {
+    pageBefore: PageProps;
+    pageAfter: PageProps;
+    url?: string;
+    key: PageList;
+}
\ No newline at end of file