sidebar enhancements

src/App.tsx

@@ -71,7 +71,6 @@ function App() {
         closeOnClick={false}
         rtl={false}
         theme={systemDark ? "light" : "dark"}
-        // transition={Bounce}
       />
       <Router>
         <Routes>

src/components/Sidebar.css

@@ -2,24 +2,25 @@
   position: fixed;
   top: 0;
   left: 0;
-  height: 100vh;
+  width: 240px;
-  width: 250px;
+  height: 100%;
-  background-color: #fff;
+  background-color: #2a2a2a;
-  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
+  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
-  border-right: 1px solid #e5e7eb;
+  border-right: 1px solid #404040;
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
 }
 
 .sidebar-header {
   padding: 1.5rem;
-  border-bottom: 1px solid #e5e7eb;
+  border-bottom: 1px solid #404040;
-  background-color: #f9fafb;
+  background-color: #333333;
 }
 
 .sidebar-title {
   margin: 0;
   font-size: 1.25rem;
   font-weight: 600;
-  color: #374151;
+  color: rgba(255, 255, 255, 0.87);
 }
 
 .sidebar-nav {
@@ -29,17 +30,40 @@
 .sidebar-link {
   display: block;
   padding: 0.75rem 1.5rem;
-  color: #374151;
+  color: rgba(255, 255, 255, 0.87);
   text-decoration: none;
-  transition: background-color 0.2s ease;
+  transition: all 0.2s ease;
   border-left: 3px solid transparent;
 }
 
 .sidebar-link:hover {
-  background-color: #f3f4f6;
+  background-color: #333333;
-  border-left-color: #3b82f6;
+  border-left-color: var(--links-main-color);
+  color: var(--links-main-color);
 }
 
 .sidebar-link:active {
-  background-color: #e5e7eb;
+  background-color: #2a2a2a;
+}
+
+
+.sidebar-bottom-link {
+  display: block;
+  padding: 0.75rem 1.5rem;
+  color: rgba(255, 255, 255, 0.87);
+  text-decoration: none;
+  transition: all 0.2s ease;
+  border-left: 3px solid transparent;
+  bottom: 0;
+}
+
+.sidebar-bottom-link:hover {
+  background-color: #333333;
+  /* a249a5 */
+  border-left-color: var(--links-main-color);
+  color: var(--links-main-color);
+}
+
+.sidebar-bottom-link:active {
+  background-color: #2a2a2a;
 }

src/components/Sidebar.tsx

@@ -12,8 +12,8 @@ const Sidebar: React.FC = () => {
       <nav className="sidebar-nav">
         <a href="/" className="sidebar-link">Home</a>
         <a href="/dashboard" className="sidebar-link">Dashboard</a>
-        <a href="/settings" className="sidebar-link">Settings</a>
         <a href="/admin" className="sidebar-link">Admin</a>
+        <a href="/settings" className="sidebar-bottom-link">Settings</a>
       </nav>
     </div>
   );

src/index.css

@@ -1,6 +1,6 @@
 :root {
-  --background_dark: #242424;
+  --background-dark: #242424;
-  --text_dark: rgba(255, 255, 255, 0.87);
+  --text-dark: rgba(255, 255, 255, 0.87);
 
   --links-main-color: #cc3f69;
   --links-hover-color: #ab3659;
@@ -14,8 +14,8 @@
   font-weight: 400;
 
   color-scheme: light dark;
-  color: var(--text_dark);
+  color: var(--text-dark);
-  background-color: var(--background_dark);
+  background-color: var(--background-dark);
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;

src/pages/dashboard/dashboard.css

@@ -0,0 +1,12 @@
+.dashboard {
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  max-width:100%;
+}
+
+
+.login-link:hover {
+  color: var(--links-hover-color);
+  text-decoration: none;
+}

src/pages/dashboard/dashboard.tsx

@@ -1,8 +1,9 @@
 import Sidebar from "../../components/Sidebar";
+import "./dashboard.css"
 
 const Dashboard = () => {
   return (
-    <div>
+    <div className="dashboard">
       <h2>Dashboard</h2>
       <Sidebar/>
     </div>

src/pages/login/login.tsx

@@ -59,7 +59,7 @@ const Login = () => {
       </div>
       <div className="login-right">
         <h2 className="login-logo-block">
-          <img className="login-logo" src="./myautag.png" alt="Picrinth logo" />
+          <img className="login-logo" src="./logo.png" alt="Picrinth logo" />
         </h2>
         <div className="login-login-block">
           <form onSubmit={handleSubmit}