Optimized sidebar styling

src/components/Sidebar/Sidebar.tsx

@@ -20,18 +20,29 @@ 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={{
+            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={4} color="white" />
             </SidebarButton>
-          <SidebarButton onClick={() => navigate("/Products")} name="Products">
+            <SidebarButton
+              onClick={() => navigate("/Products")}
+              name="Products"
+            >
               <ProductsIcon size={4} color="white" />
             </SidebarButton>
             <SidebarButton
@@ -42,6 +53,7 @@ export default function Sidebar() {
             </SidebarButton>
           </div>
         </div>
+      </div>
     );
   } else {
     return (

src/styles.tsx

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