keannu125/Ivy-Frontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Ivy-Frontend.git synced 2025-05-15 19:08:11 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Polished logout sidebar button and added dailyview page

Browse source
This commit is contained in:
Keannu Christian Bernasol 2023-03-11 20:22:18 +08:00
parent 435a576c15
commit 1baf1ab5d2
4 changed files with 180 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/Components/Icons/TodayIcon/TodayIcon.tsx Normal file
View file

@ -0,0 +1,27 @@
import React from "react";
export interface props {
size: number;
color: string;
}
export default function TodayIcon(props: props) {
return (
<svg
width={props.size}
height={props.size}
viewBox="0 0 24 24"
strokeWidth="2"
stroke={props.color}
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path>
<path d="M4 13a8.094 8.094 0 0 0 3 5.24"></path>
<path d="M11 15h2a1 1 0 0 1 1 1v1a1 1 0 0 1 -1 1h-1a1 1 0 0 0 -1 1v1a1 1 0 0 0 1 1h2"></path>
<path d="M17 15v2a1 1 0 0 0 1 1h1"></path>
<path d="M20 15v6"></path>
</svg>
);
}

137
src/Components/Sidebar/Sidebar.tsx
View file

@ -9,6 +9,7 @@ import Logout from "../Logout/Logout";
import InventoryIcon from "../Icons/InventoryIcon/InventoryIcon";
import LogsIcon from "../Icons/LogsIcon/LogsIcon";
import LogoutIcon from "../Icons/LogoutIcon/LogoutIcon";
import TodayIcon from "../Icons/TodayIcon/TodayIcon";
export interface state {
logged_in: {
@ -18,88 +19,58 @@ export interface state {
export default function Sidebar() {
const navigate = useNavigate();
const logged_in = useSelector((state: state) => state.logged_in.value);
if (!logged_in) {
return (
<div style={styles.sidebar_container}>
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "flex-end",
}}
>
<div
style={{
position: "relative",
display: "flex",
flexDirection: "column",
justifyContent: "flex-start",
}}
>
<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>
</div>
</div>
);
} else {
return (
<div style={styles.sidebar_container}>
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "flex-end",
}}
>
<div
style={{
position: "relative",
display: "flex",
flexDirection: "column",
justifyContent: "flex-start",
}}
>
<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>
<Logout>
<LogoutIcon size={48} color="white" />
</Logout>
</div>
</div>
</div>
);
function LogoutButton() {
if (!logged_in) {
return <div />;
} else {
return (
<Logout>
<LogoutIcon size={48} color="white" />
</Logout>
);
}
}
return (
<div style={styles.sidebar_container}>
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "flex-end",
}}
>
<div
style={{
position: "relative",
display: "flex",
flexDirection: "column",
justifyContent: "flex-start",
}}
>
<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("/ActivityToday")}
name="Daily View"
>
<TodayIcon size={48} color="white" />
</SidebarButton>
<SidebarButton onClick={() => navigate("/Logs")} name="Logs">
<LogsIcon size={48} color="white" />
</SidebarButton>
<LogoutButton />
</div>
</div>
</div>
);
}