Feature/make new layout

src/App.js

@@ -1,9 +1,6 @@
-import React from "react";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
+import React, { useEffect } from "react";
+import { BrowserRouter, Route, Routes, useLocation } from "react-router-dom";
 import Homepage from "./pages/Homepage";
-import Footer from "./components/Footer";
-import Header from "./components/Header";
-import { NavigationLeft } from "./components/NavigationLeft";
 import { Avatar } from "./pages/Avatar";
 import { Card } from "./pages/Card";
 import { Alert } from "./pages/Alert";
@@ -12,29 +9,32 @@ import ButtonDoc from "./pages/ButtonDoc";
 import {ModalPage} from "./pages/ModalPage";
 import {FooterPage} from "./pages/FooterPage";
 
+
+
+
 function App() {
+
   return (
-    <div>
-      <BrowserRouter>
-        <Header />
-        <div className="home-container">
-          <NavigationLeft />
-          <div className="routes-container">
-            <Routes>
-              <Route path="/" element={<Homepage />} exact />
-              <Route path="/Button" element={<ButtonDoc />} />
-              <Route path="/Modal" element={<ModalPage />} />
-              <Route path="/Footer" element={<FooterPage />} />
-              <Route path="/Avatar" element={<Avatar />} />
-              <Route path="/card" element={<Card />} />
-              <Route path="/Alert" element={<Alert />} />
-              <Route path="/Badge" element={<Badge />} />
-            </Routes>
-          </div>
-        </div>
-      </BrowserRouter>
+    <BrowserRouter>
+
+    <div className="home-container">
+    <div className="routes-container  ">
+      <Routes>
+      <Route path="/" element={<Homepage />}>
+     <Route path="Button" element={<ButtonDoc />} />
+     <Route path="Modal" element={<ModalPage />} />
+     <Route path="Footer" element={<FooterPage />} />
+     <Route path="Avatar" element={<Avatar />} />
+     <Route path="card" element={<Card />} />
+     <Route path="alert" element={<Alert />} />
+     <Route path="badge" element={<Badge />} />
+     </Route>
+      </Routes>
     </div>
+  </div>
+    </BrowserRouter>
   );
 }
 
+
 export default App;

src/components/Button.jsx

@@ -23,7 +23,7 @@ const Button = (props) => {
 
   return (
     <button
-      className={`relative inline-flex items-center rounded-full border px-7 py-4 text-lg leading-none transition-all duration-300 ease-in-out
+      className={` my-2 mx-1 max-md:mx-1 backdrop:relative inline-flex items-center rounded-full border px-7 py-4 text-lg leading-none transition-all duration-300 ease-in-out
       ${
         backgroundColor
           ? `${backgroundColor} ${textColor} ${borderColor}`

src/components/Content.jsx

@@ -0,0 +1,76 @@
+import React, { Fragment, useEffect } from "react";
+import Button from "../components/Button";
+import arrowRight from "../assets/arrow-right.svg";
+import Accordion from "../components/Accordion";
+import Modal from "../components/Modal";
+import Feature6 from "../components/TopHeader";
+import Footer from "../components/Footer";
+import Login from "../components/Login";
+import BottomNav from "./Bottom Nav bar/BottomNavBar";
+import { Outlet, useLocation } from "react-router-dom";
+import RouteComponent from "./RouteComponent";
+import Homepage from "../pages/Homepage";
+import ButtonDoc from "../pages/ButtonDoc";
+import { ModalPage } from "../pages/ModalPage";
+import { FooterPage } from "../pages/FooterPage";
+import { Avatar } from "../pages/Avatar";
+import { Card } from "../pages/Card";
+import { Alert } from "../pages/Alert";
+
+const Content = () => {
+  const location = useLocation();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const getComponentForPath = (path) => {
+
+
+
+    switch (path) {
+      case '/':
+        return <RouteComponent />;
+      case '/button':
+        return <ButtonDoc />;
+      case '/Modal':
+        return <ModalPage />;
+      case '/Footer':
+        return <FooterPage />;
+        case '/Avatar':
+          return <Avatar />;
+          case '/card':
+            return <Card />;
+          case '/alert':
+            case '/badge':
+              return <Card />;
+
+      default:
+        return null; // Return a default component or handle not found
+    }
+  };
+
+  useEffect(() => {
+
+  }, [location.pathname, getComponentForPath]);
+
+
+  // Define a function to get the component based on the URL endpoint
+
+  return (
+<Fragment>
+<div className="max-md:p-1 sm:ml-64" >
+<div className="min-h-screen  py-5">
+<div className="flex flex-col items-center space-y-4">
+{
+  getComponentForPath(location.pathname)
+}
+
+ </div>
+
+</div>
+</div>
+
+
+
+</Fragment>
+  );
+};
+
+export default Content;

src/components/RouteComponent.jsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import Button from "../components/Button";
+import arrowRight from "../assets/arrow-right.svg";
+import Accordion from "../components/Accordion";
+import Modal from "../components/Modal";
+import Feature6 from "../components/TopHeader";
+import Footer from "../components/Footer";
+import Login from "../components/Login";
+import BottomNav from "./Bottom Nav bar/BottomNavBar";
+import { Outlet } from 'react-router-dom';
+
+
+const RouteComponent = () => {
+    const accordionItems = [
+        { title: "Section 1", content: "Content for Section 1" },
+        { title: "Section 2", content: "Content for Section 2" },
+      ];
+    return (
+
+
+    <div className="max-md:p-1 " >
+    <div className="min-h-screen  py-5">
+    <div className="flex flex-col items-center space-y-4">
+
+       {/* Default Button */}
+       <Button>Default Button</Button>
+
+       {/* Customized Button 1 */}
+       <Button
+         iconURL={arrowRight}
+         borderColor={"border-black"}
+         textColor={"text-white"}
+         backgroundColor={"bg-black"}
+       >
+         Customized Button 1
+       </Button>
+
+       {/* Customized Button 2 */}
+       <Button
+         borderColor={"border-blue-500"}
+         textColor={"text-blue-500"}
+         backgroundColor={"bg-white"}
+       >
+         Customized Button 2
+       </Button>
+
+       {/* Customized Button 3 */}
+       <Button
+         borderColor={"border-green-500"}
+         textColor={"text-green-500"}
+         backgroundColor={"bg-white"}
+       >
+         Customized Button 3
+       </Button>
+
+       <Accordion items={accordionItems} />
+       <Login />
+       <Feature6 />
+       <Modal />
+       <Footer />
+     </div>
+
+    </div>
+    </div>
+  )
+}
+
+export default RouteComponent

src/components/Sidebar.jsx

@@ -0,0 +1,124 @@
+import { useState } from "react";
+import { NavLink, useNavigate } from "react-router-dom";
+import {FcMenu} from "react-icons/fc"
+const Sidebar = () => {
+    const [showSidebar, setShowSidebar] = useState(false);
+    const [showProfile, SetshowProfile] = useState(false);
+  const navigate =  useNavigate()
+  const HandleContent= (link)=>{
+    navigate(link)
+  }
+
+  const toggleSidebar = () => {
+    setShowSidebar(!showSidebar);
+  };
+
+  return (
+    <div>
+      <nav className="fixed  top-0 z-50 w-full bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
+        <div className="px-3 py-3 lg:px-5 lg:pl-3">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center justify-start">
+              <button
+                onClick={toggleSidebar}
+                data-drawer-target="logo-sidebar"
+                data-drawer-toggle="logo-sidebar"
+                aria-controls="logo-sidebar"
+                type="button"
+                className="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg sm:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+              >
+                <FcMenu size={20}/>
+              </button>
+              <p className="flex gap-x-2 items-center ml-2 md:mr-24">
+                <svg
+                  id="logo-35"
+                  className="h-6"
+                  viewBox="0 0 50 39"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  {" "}
+                  <path
+                    d="M16.4992 2H37.5808L22.0816 24.9729H1L16.4992 2Z"
+                    className="ccompli1"
+                    fill="#007AFF"
+                  ></path>{" "}
+                  <path
+                    d="M17.4224 27.102L11.4192 36H33.5008L49 13.0271H32.7024L23.2064 27.102H17.4224Z"
+                    class="ccustom"
+                    fill="#312ECB"
+                  ></path>{" "}
+                </svg>
+                <span className="self-center text-xl font-semibold sm:text-2xl whitespace-nowrap dark:text-white">
+
+                  <p className="bg-gradient-to-r  from-green-300 via-blue-200 to-purple-500 bg-clip-text text-xl font-bold text-transparent text-center my-1 max-md:text-xl">Web Componentify</p>
+                </span>
+              </p>
+            </div>
+
+          </div>
+        </div>
+      </nav>
+
+      <aside
+        onClick={toggleSidebar}
+        className={`fixed top-0 left-0 z-40 w-64 h-screen pt-20 transition-transform ${
+          showSidebar ? "translate-x-0" : "-translate-x-full"
+        } bg-white border-r border-gray-200 sm:translate-x-0 dark:bg-gray-800 dark:border-gray-700`}
+        aria-label="Sidebar"
+      >
+        <div className="h-full px-3 pb-4 overflow-y-auto bg-white dark:bg-gray-800">
+          <ul className="space-y-2 font-medium">
+
+          <li>
+          <button onClick={()=>{HandleContent("/")}} className=" bg-gradient-to-t  from-green-500 via-blue-200 to-purple-100 bg-clip-text tracking-wider font-bold text-transparent text-center my-1 w-full flex items-center p-2 hover:bg-gray-100 dark:hover:bg-gray-700 group">
+            <span className="px-1 whitespace-nowrap">Home</span>
+          </button>
+        </li>
+            <li>
+              <button onClick={()=>{HandleContent('/button')}} className="  bg-gradient-to-t  from-green-500 via-blue-200 to-purple-100 bg-clip-text tracking-wider font-bold text-transparent text-center my-1 w-full flex items-center p-2 hover:bg-gray-100 dark:hover:bg-gray-700 group">
+                <span className="px-1 whitespace-nowrap">Button</span>
+              </button>
+            </li>
+            <li>
+              <button onClick={()=>{HandleContent('/Modal')}} className="bg-gradient-to-t  from-green-200 via-blue-200 to-purple-100 bg-clip-text tracking-wider font-bold text-transparent text-center my-1 w-full flex items-center p-2  hover:bg-gray-100 dark:hover:bg-gray-700 group">
+                <span className="px-1 whitespace-nowrap">  Modal</span>
+              </button>
+            </li>{" "}
+            <li>
+              <button onClick={()=>{HandleContent('Footer')}} className="bg-gradient-to-t  from-green-200 via-blue-200 to-purple-100 bg-clip-text tracking-wider font-bold text-transparent text-center my-1 w-full flex items-center p-2  hover:bg-gray-100 dark:hover:bg-gray-700 group">
+                <span className="px-1 whitespace-nowrap">Footer</span>
+              </button>
+            </li>{" "}
+            <li>
+              <button onClick={()=>{HandleContent('/avatar')}} className="bg-gradient-to-t  from-green-200 via-blue-200 to-purple-100 bg-clip-text tracking-wider font-bold text-transparent text-center my-1 w-full flex items-center p-2  hover:bg-gray-100 dark:hover:bg-gray-700 group">
+                <span className="px-1 whitespace-nowrap">Avatar</span>
+              </button>
+            </li>{" "}
+
+            <li>
+            <button onClick={()=>{HandleContent('card')}} className="bg-gradient-to-t  from-green-200 via-blue-200 to-purple-100 bg-clip-text tracking-wider font-bold text-transparent text-center my-1 w-full flex items-center p-2  hover:bg-gray-100 dark:hover:bg-gray-700 group">
+              <span className="px-1 whitespace-nowrap">Card</span>
+            </button>
+          </li>
+          <li>
+          <button onClick={()=>{HandleContent('/alert')}} className="bg-gradient-to-t  from-green-200 via-blue-200 to-purple-100 bg-clip-text tracking-wider font-bold text-transparent text-center my-1 w-full flex items-center p-2  hover:bg-gray-100 dark:hover:bg-gray-700 group">
+            <span className="px-1 whitespace-nowrap">Alert</span>
+          </button>
+        </li>
+        <li>
+
+        <button onClick={()=>{HandleContent('/badge')}} className="bg-gradient-to-t  from-green-200 via-blue-200 to-purple-100 bg-clip-text tracking-wider font-bold text-transparent text-center my-1 w-full flex items-center p-2  hover:bg-gray-100 dark:hover:bg-gray-700 group">
+          <span className="px-1 whitespace-nowrap">Badge</span>
+        </button>
+      </li>
+          </ul>
+        </div>
+      </aside>
+    </div>
+  );
+};
+
+export default Sidebar;
+
+