keannu125/Ivy-Frontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Ivy-Frontend.git synced 2024-11-17 06:39:25 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Optimized sidebar styling

Browse source
This commit is contained in:
keannu125 2023-02-21 14:17:40 +08:00
parent afe0aeb202
commit 116fb70b48
2 changed files with 28 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -20,26 +20,38 @@ export default function Sidebar() {
const logged_in = useSelector((state: state) => state.logged_in.value);
if (!logged_in) {
return (
<div style={styles.sidebar_wrapper}>
<div style={styles.sidebar_container}>
<div
style={{
position: "relative",
display: "flex",
flexDirection: "column",
flexDirection: "row",
justifyContent: "flex-end",
}}
>
<SidebarButton onClick={() => navigate("/")} name="Dashboard">
<HomeIcon size={4} color="white" />
</SidebarButton>
<SidebarButton onClick={() => navigate("/Products")} name="Products">
<ProductsIcon size={4} color="white" />
</SidebarButton>
<SidebarButton
onClick={() => navigate("/Inventory")}
name="Inventory"
<div
style={{
position: "relative",
display: "flex",
flexDirection: "column",
justifyContent: "flex-start",
}}
>
<InventoryIcon size={4} color="white" />
</SidebarButton>
<SidebarButton onClick={() => navigate("/")} name="Dashboard">
<HomeIcon size={4} color="white" />
</SidebarButton>
<SidebarButton
onClick={() => navigate("/Products")}
name="Products"
>
<ProductsIcon size={4} color="white" />
</SidebarButton>
<SidebarButton
onClick={() => navigate("/Inventory")}
name="Inventory"
>
<InventoryIcon size={4} color="white" />
</SidebarButton>
</div>
</div>
</div>
);

5
src/styles.tsx
View file

@ -139,14 +139,13 @@ const styles: { [key: string]: React.CSSProperties } = {
display: "flex",
flexDirection: "column",
},
sidebar_wrapper: {
display: "flex",
flexDirection: "column",
sidebar_container: {
height: "100vh",
width: "100%",
paddingLeft: "2vh",
backgroundColor: "#3d4848",
},
sidebar_wrapper: {},
};
export default styles;