keannu125/Ivy-Frontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Ivy-Frontend.git synced 2025-04-19 16:31:28 +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 Christian 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 { useSelector, useDispatch } from "react-redux";
import { toggle } from "../../Features/Login/LoginSlice"; import { toggle } from "../../Features/Login/LoginSlice";
import { Button } from "@mui/material"; import { Button } from "@mui/material";
@ -26,7 +26,7 @@ export default function Logout(props: props) {
return <div></div>; return <div></div>;
} else { } else {
return ( return (
<div style={{ paddingTop: 384 }}> <div style={{ paddingTop: "90%" }}>
<Button <Button
onClick={login} onClick={login}
value="Log out" value="Log out"

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

@ -1,48 +1,79 @@
import React from "react"; import React from "react";
import styles from "../../styles"; import styles from "../../styles";
import { useNavigate } from "react-router-dom";
import { useSelector } from "react-redux";
import SidebarButton from "../SidebarButton/SidebarButton"; import SidebarButton from "../SidebarButton/SidebarButton";
import HomeIcon from "../Icons/HomeIcon/HomeIcon"; import HomeIcon from "../Icons/HomeIcon/HomeIcon";
import ProductsIcon from "../Icons/ProductsIcon/ProductsIcon"; import ProductsIcon from "../Icons/ProductsIcon/ProductsIcon";
import { useNavigate } from "react-router-dom";
import Logout from "../Logout/Logout"; import Logout from "../Logout/Logout";
import InventoryIcon from "../Icons/InventoryIcon/InventoryIcon"; import InventoryIcon from "../Icons/InventoryIcon/InventoryIcon";
import LogsIcon from "../Icons/LogsIcon/LogsIcon"; import LogsIcon from "../Icons/LogsIcon/LogsIcon";
import LogoutIcon from "../Icons/LogoutIcon/LogoutIcon"; import LogoutIcon from "../Icons/LogoutIcon/LogoutIcon";
export interface state { export interface state {
minimized: { logged_in: {
value: boolean; value: boolean;
sidebar_width: string;
page_width: string;
}; };
} }
export default function Sidebar() { export default function Sidebar() {
const navigate = useNavigate(); const navigate = useNavigate();
return ( const logged_in = useSelector((state: state) => state.logged_in.value);
<div style={styles.sidebar_wrapper}> if (!logged_in) {
<div return (
style={{ <div style={styles.sidebar_wrapper}>
position: "relative", <div
display: "flex", style={{
flexDirection: "column", position: "relative",
}} display: "flex",
> flexDirection: "column",
<SidebarButton onClick={() => navigate("/")} name="Dashboard"> }}
<HomeIcon size={48} color="white" /> >
</SidebarButton> <SidebarButton onClick={() => navigate("/")} name="Dashboard">
<SidebarButton onClick={() => navigate("/Products")} name="Products"> <HomeIcon size={48} color="white" />
<ProductsIcon size={48} color="white" /> </SidebarButton>
</SidebarButton> <SidebarButton onClick={() => navigate("/Products")} name="Products">
<SidebarButton onClick={() => navigate("/Inventory")} name="Inventory"> <ProductsIcon size={48} color="white" />
<InventoryIcon size={48} color="white" /> </SidebarButton>
</SidebarButton> <SidebarButton
<SidebarButton onClick={() => navigate("/Logs")} name="Logs"> onClick={() => navigate("/Inventory")}
<LogsIcon size={48} color="white" /> name="Inventory"
</SidebarButton> >
<InventoryIcon size={48} color="white" />
</SidebarButton>
</div>
</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> <Logout>
<LogoutIcon size={48} color="white" /> <LogoutIcon size={48} color="white" />
</Logout> </Logout>
</div> </div>
); );
}
} }

6
src/styles.tsx
View file

@ -51,7 +51,7 @@ const styles: { [key: string]: React.CSSProperties } = {
}, },
login_button: { login_button: {
backgroundColor: "#9e8500", backgroundColor: "#9e8500",
width: 128, width: "120%",
height: 32, height: 32,
border: "none", border: "none",
padding: 8, padding: 8,
@ -59,8 +59,8 @@ const styles: { [key: string]: React.CSSProperties } = {
}, },
logout_button: { logout_button: {
backgroundColor: "#0b2322", backgroundColor: "#0b2322",
width: 256,
height: 64, height: 64,
width: 192,
border: "none", border: "none",
padding: 8, padding: 8,
borderRadius: 16, borderRadius: 16,
@ -72,7 +72,7 @@ const styles: { [key: string]: React.CSSProperties } = {
}, },
sidebar_button: { sidebar_button: {
backgroundColor: "#0b2322", backgroundColor: "#0b2322",
width: 256, width: 192,
height: 64, height: 64,
border: "none", border: "none",
padding: 8, padding: 8,