From a19d644e7a30ea9cec15722f272724f54fdc5f8d Mon Sep 17 00:00:00 2001
From: Keannu Bernasol <noehbernasol0@gmail.com>
Date: Thu, 16 Feb 2023 14:37:32 +0800
Subject: [PATCH] Only show logs page on sidebar if logged in

---
 src/components/Logout/Logout.tsx   |  4 +-
 src/components/Sidebar/Sidebar.tsx | 91 ++++++++++++++++++++----------
 src/styles.tsx                     |  6 +-
 3 files changed, 66 insertions(+), 35 deletions(-)

diff --git a/src/components/Logout/Logout.tsx b/src/components/Logout/Logout.tsx
index d4c01a4..699634b 100644
--- a/src/components/Logout/Logout.tsx
+++ b/src/components/Logout/Logout.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { toggle } from "../../Features/Login/LoginSlice";
 import { Button } from "@mui/material";
@@ -26,7 +26,7 @@ export default function Logout(props: props) {
     return <div></div>;
   } else {
     return (
-      <div style={{ paddingTop: 384 }}>
+      <div style={{ paddingTop: "90%" }}>
         <Button
           onClick={login}
           value="Log out"
diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index d153df7..f6a75c6 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -1,48 +1,79 @@
 import React from "react";
 import styles from "../../styles";
+import { useNavigate } from "react-router-dom";
+import { useSelector } from "react-redux";
 import SidebarButton from "../SidebarButton/SidebarButton";
 import HomeIcon from "../Icons/HomeIcon/HomeIcon";
 import ProductsIcon from "../Icons/ProductsIcon/ProductsIcon";
-import { useNavigate } from "react-router-dom";
 import Logout from "../Logout/Logout";
 import InventoryIcon from "../Icons/InventoryIcon/InventoryIcon";
 import LogsIcon from "../Icons/LogsIcon/LogsIcon";
 import LogoutIcon from "../Icons/LogoutIcon/LogoutIcon";
+
 export interface state {
-  minimized: {
+  logged_in: {
     value: boolean;
-    sidebar_width: string;
-    page_width: string;
   };
 }
 export default function Sidebar() {
   const navigate = useNavigate();
-  return (
-    <div style={styles.sidebar_wrapper}>
-      <div
-        style={{
-          position: "relative",
-          display: "flex",
-          flexDirection: "column",
-        }}
-      >
-        <SidebarButton onClick={() => navigate("/")} name="Dashboard">
-          <HomeIcon size={48} color="white" />
-        </SidebarButton>
-        <SidebarButton onClick={() => navigate("/Products")} name="Products">
-          <ProductsIcon size={48} color="white" />
-        </SidebarButton>
-        <SidebarButton onClick={() => navigate("/Inventory")} name="Inventory">
-          <InventoryIcon size={48} color="white" />
-        </SidebarButton>
-        <SidebarButton onClick={() => navigate("/Logs")} name="Logs">
-          <LogsIcon size={48} color="white" />
-        </SidebarButton>
+  const logged_in = useSelector((state: state) => state.logged_in.value);
+  if (!logged_in) {
+    return (
+      <div style={styles.sidebar_wrapper}>
+        <div
+          style={{
+            position: "relative",
+            display: "flex",
+            flexDirection: "column",
+          }}
+        >
+          <SidebarButton onClick={() => navigate("/")} name="Dashboard">
+            <HomeIcon size={48} color="white" />
+          </SidebarButton>
+          <SidebarButton onClick={() => navigate("/Products")} name="Products">
+            <ProductsIcon size={48} color="white" />
+          </SidebarButton>
+          <SidebarButton
+            onClick={() => navigate("/Inventory")}
+            name="Inventory"
+          >
+            <InventoryIcon size={48} color="white" />
+          </SidebarButton>
+        </div>
       </div>
+    );
+  } else {
+    return (
+      <div style={styles.sidebar_wrapper}>
+        <div
+          style={{
+            position: "relative",
+            display: "flex",
+            flexDirection: "column",
+          }}
+        >
+          <SidebarButton onClick={() => navigate("/")} name="Dashboard">
+            <HomeIcon size={48} color="white" />
+          </SidebarButton>
+          <SidebarButton onClick={() => navigate("/Products")} name="Products">
+            <ProductsIcon size={48} color="white" />
+          </SidebarButton>
+          <SidebarButton
+            onClick={() => navigate("/Inventory")}
+            name="Inventory"
+          >
+            <InventoryIcon size={48} color="white" />
+          </SidebarButton>
+          <SidebarButton onClick={() => navigate("/Logs")} name="Logs">
+            <LogsIcon size={48} color="white" />
+          </SidebarButton>
+        </div>
 
-      <Logout>
-        <LogoutIcon size={48} color="white" />
-      </Logout>
-    </div>
-  );
+        <Logout>
+          <LogoutIcon size={48} color="white" />
+        </Logout>
+      </div>
+    );
+  }
 }
diff --git a/src/styles.tsx b/src/styles.tsx
index 90a7219..23c0bc0 100644
--- a/src/styles.tsx
+++ b/src/styles.tsx
@@ -51,7 +51,7 @@ const styles: { [key: string]: React.CSSProperties } = {
   },
   login_button: {
     backgroundColor: "#9e8500",
-    width: 128,
+    width: "120%",
     height: 32,
     border: "none",
     padding: 8,
@@ -59,8 +59,8 @@ const styles: { [key: string]: React.CSSProperties } = {
   },
   logout_button: {
     backgroundColor: "#0b2322",
-    width: 256,
     height: 64,
+    width: 192,
     border: "none",
     padding: 8,
     borderRadius: 16,
@@ -72,7 +72,7 @@ const styles: { [key: string]: React.CSSProperties } = {
   },
   sidebar_button: {
     backgroundColor: "#0b2322",
-    width: 256,
+    width: 192,
     height: 64,
     border: "none",
     padding: 8,