Added basic page navigation

src/App.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import Dashboard from "./Routes/Dashboard/Dashboard";
 import Error from "./Routes/Error/Error";
 import Products from "./Routes/Products/Products";
-import Header from "./Components/Header/Header";
 import Container from "./Components/Container/Container";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import Store from "./Plugins/Redux/Store/Store";
@@ -11,12 +10,30 @@ import { Provider } from "react-redux";
 const router = createBrowserRouter([
   {
     path: "/",
-    element: <Dashboard />,
+    element: (
-    errorElement: <Error />,
+      <React.StrictMode>
+        <Container>
+          <Dashboard />
+        </Container>
+      </React.StrictMode>
+    ),
+    errorElement: (
+      <React.StrictMode>
+        <Container>
+          <Error />
+        </Container>
+      </React.StrictMode>
+    ),
   },
   {
     path: "/Products",
-    element: <Products />,
+    element: (
+      <React.StrictMode>
+        <Container>
+          <Products />
+        </Container>
+      </React.StrictMode>
+    ),
   },
 ]);
 
@@ -24,10 +41,7 @@ export default function App() {
   return (
     <React.StrictMode>
       <Provider store={Store}>
-        <Header />
+        <RouterProvider router={router} />
-        <Container>
-          <RouterProvider router={router} />
-        </Container>
       </Provider>
     </React.StrictMode>
   );

src/components/Container/Container.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import Sidebar from "../Sidebar/Sidebar";
+import Header from "../Header/Header";
 import styles from "../../styles";
 
 export interface props {
@@ -9,12 +10,11 @@ export interface props {
 export default function Container(props: props) {
   return (
     <div>
-      <div>
+      <Header />
-        <div style={{ width: "15%", position: "fixed" }}>
+      <div style={{ width: "15%", position: "fixed" }}>
-          <Sidebar />
+        <Sidebar />
-        </div>
-        <div style={styles.route_wrapper}>{props.children}</div>
       </div>
+      <div style={styles.route_wrapper}>{props.children}</div>
     </div>
   );
 }

src/components/Sidebar/Sidebar.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import styles from "../../styles";
 import SidebarButton from "../SidebarButton/SidebarButton";
+import { redirect } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 export interface state {
   minimized: {
     value: boolean;
@@ -9,12 +11,13 @@ export interface state {
   };
 }
 export default function Sidebar() {
+  const navigate = useNavigate();
   return (
     <div style={styles.sidebar_wrapper}>
-      <SidebarButton onClick={() => console.log("WIP!")} name="Dashboard" />
+      <SidebarButton onClick={() => navigate("/")} name="Dashboard" />
-      <SidebarButton onClick={() => console.log("WIP!")} name="Products" />
+      <SidebarButton onClick={() => navigate("/Products")} name="Products" />
-      <SidebarButton onClick={() => console.log("WIP!")} name="Inventory" />
+      <SidebarButton onClick={() => navigate("/Inventory")} name="Inventory" />
-      <SidebarButton onClick={() => console.log("WIP!")} name="Logs" />
+      <SidebarButton onClick={() => navigate("/Logs")} name="Logs" />
     </div>
   );
 }