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); const logged_in = useSelector((state: state) => state.logged_in.value);
if (!logged_in) { if (!logged_in) {
return ( return (
<div style={styles.sidebar_wrapper}> <div style={styles.sidebar_container}>
<div <div
style={{ style={{
position: "relative",
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "row",
justifyContent: "flex-end",
}} }}
> >
<SidebarButton onClick={() => navigate("/")} name="Dashboard"> <div
<HomeIcon size={4} color="white" /> style={{
</SidebarButton> position: "relative",
<SidebarButton onClick={() => navigate("/Products")} name="Products"> display: "flex",
<ProductsIcon size={4} color="white" /> flexDirection: "column",
</SidebarButton> justifyContent: "flex-start",
<SidebarButton }}
onClick={() => navigate("/Inventory")}
name="Inventory"
> >
<InventoryIcon size={4} color="white" /> <SidebarButton onClick={() => navigate("/")} name="Dashboard">
</SidebarButton> <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>
</div> </div>
); );

5
src/styles.tsx
View file

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