keannu125/Ivy-Frontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Ivy-Frontend.git synced 2024-11-16 22:29:24 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Only show logs page on sidebar if logged in

Browse source
This commit is contained in:
Keannu Bernasol 2023-02-16 14:37:32 +08:00
parent c7e3687544
commit a19d644e7a
3 changed files with 66 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/Logout/Logout.tsx
View file

@ -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"

91
src/components/Sidebar/Sidebar.tsx
View file

@ -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>
);
}
}

6
src/styles.tsx
View file

@ -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,