top part of layout finished

Author: diorm47

package-lock.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "flowbite-react": "^0.4.9",
     "react": "^18.2.0",
     "react-accessible-accordion": "^5.0.0",
     "react-dom": "^18.2.0",

package.json

@@ -2,6 +2,9 @@
   display: flex;
   padding-top: 80px;
 }
+a {
+  text-decoration: none;
+}
 
 .main_content_wrapper {
   width: 100%;
@@ -56,4 +59,11 @@
   .m_content_center {
     width: 85%;
   }
+  .main_page_styles {
+    padding-top: 20px !important;
+    padding-right: 20px !important;
+  }
+  .profile_wrapper, .home_page_carousel {
+    margin-top: 10px !important;
+  }
 }

src/App.css

@@ -14,10 +14,14 @@ import Earn from "./pages/earn/earn";
 import Profile from "./pages/profile/profile";
 import Affilitates from "./pages/affiliates/affliates";
 import Rewards from "./pages/rewards/rewards";
+import Inventory from "./pages/inventory/inventory";
+import Withdraw from "./pages/withdraw/withdraw";
+import WithDrawModal from "./components/withdraw-modal/withdraw-modal";
 
 function App() {
   const [isMenuVisible, setMenuVisible] = useState(false);
   const [isModalVisible, setModalVisible] = useState(false);
+  const [isWithDrawVisible, setWithDrawVisible] = useState(false);
   const [isDepositeVisible, setDepositeModalVisible] = useState(false);
   const toggleMenu = () => {
     setMenuVisible(!isMenuVisible);
@@ -28,10 +32,18 @@ function App() {
   const toggleDeposit = () => {
     setDepositeModalVisible(!isDepositeVisible);
   };
+  const toggleWithDraw = () => {
+    setWithDrawVisible(!isWithDrawVisible);
+  };
+
   return (
     <>
       <div className="main_wrapper">
-        <Navbar toggleModal={toggleModal} toggleDeposit={toggleDeposit} />
+        <Navbar
+          toggleModal={toggleModal}
+          toggleDeposit={toggleDeposit}
+          toggleWithDraw={toggleWithDraw}
+        />
         <div className="main_content">
           <Sidebar />
           <div className="main_content_wrapper">
@@ -49,6 +61,8 @@ function App() {
                 <Route path="/earn" element={<Earn />} />
                 <Route path="/affiliates" element={<Affilitates />} />
                 <Route path="/rewards" element={<Rewards />} />
+                <Route path="/inventory" element={<Inventory />} />
+                <Route path="/withdraw" element={<Withdraw />} />
                 <Route
                   path="/profile"
                   element={<Profile toggleDeposit={toggleDeposit} />}
@@ -70,6 +84,7 @@ function App() {
       </div>
       {!isModalVisible || <SignIn toggleModal={toggleModal} />}
       {!isDepositeVisible || <Deposit toggleDeposit={toggleDeposit} />}
+      {!isWithDrawVisible || <WithDrawModal toggleWithDraw={toggleWithDraw} />}
     </>
   );
 }