style changes especially sidebar

src/pages/dashboard/dashboard.css

@@ -5,8 +5,22 @@
   max-width:100%;
 }
 
-
-.login-link:hover {
-  color: var(--links-hover-color);
-  text-decoration: none;
+.sidebar-container {
+  display: flex;
+}
+
+.dashboard-content {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+}
+
+.dashboard-text {
+  display: flex;
+  max-width: 40vw;
+  text-align: center;
+  text-wrap: pretty;
+  outline: 1px solid thistle;
 }

src/pages/dashboard/dashboard.tsx

@@ -4,8 +4,14 @@ import "./dashboard.css"
 const Dashboard = () => {
   return (
     <div className="dashboard">
-      <h2>Dashboard</h2>
-      <Sidebar/>
+      <div>
+        <Sidebar/>
+      </div>
+      <div className="dashboard-content">
+        <div className="dashboard-text">
+          <h2>Dashboard Content<br/>WIP</h2>
+        </div>
+      </div>
     </div>
   )
 }

src/pages/home/home.tsx

@@ -1,23 +1,12 @@
-import { useNavigate } from "react-router-dom";
-import useAuth from "../../auth/auth";
-
 import { Link } from 'react-router-dom';
 import useLogout from "../../auth/logout"
 
 
 const Home = () => {
-  const { setToken } = useAuth();
-  const navigate = useNavigate();
-
-  const handleLogout = () => {
-    setToken(null);
-    navigate("/login");
-  };
-
   return (
     <div>
       <h2>Home</h2>
-      <button onClick={handleLogout}>
+      <button onClick={useLogout()}>
         Logout
       </button>
       <nav>

src/pages/login/login.css

@@ -20,7 +20,6 @@
   display: flex;
   height: 100%;
   flex-direction: column;
-  margin-left: auto;
   margin-right: 5vw;
   margin-left: 5vw;
   justify-content: inherit;