From 774f34b9719a5466f0582db43943f4f0a6902691 Mon Sep 17 00:00:00 2001
From: Beesquit <sealreb@gmail.com>
Date: Fri, 19 Sep 2025 17:13:04 +0300
Subject: [PATCH] sidebar enhancements

---
 src/App.tsx                       |  1 -
 src/components/Sidebar.css        | 50 +++++++++++++++++++++++--------
 src/components/Sidebar.tsx        |  2 +-
 src/index.css                     |  8 ++---
 src/pages/dashboard/dashboard.css | 12 ++++++++
 src/pages/dashboard/dashboard.tsx |  3 +-
 src/pages/login/login.tsx         |  2 +-
 7 files changed, 57 insertions(+), 21 deletions(-)
 create mode 100644 src/pages/dashboard/dashboard.css

diff --git a/src/App.tsx b/src/App.tsx
index 94e5e3d..5ef1206 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -71,7 +71,6 @@ function App() {
         closeOnClick={false}
         rtl={false}
         theme={systemDark ? "light" : "dark"}
-        // transition={Bounce}
       />
       <Router>
         <Routes>
diff --git a/src/components/Sidebar.css b/src/components/Sidebar.css
index 191fb40..8af5f2c 100644
--- a/src/components/Sidebar.css
+++ b/src/components/Sidebar.css
@@ -2,24 +2,25 @@
   position: fixed;
   top: 0;
   left: 0;
-  height: 100vh;
-  width: 250px;
-  background-color: #fff;
-  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
-  border-right: 1px solid #e5e7eb;
+  width: 240px;
+  height: 100%;
+  background-color: #2a2a2a;
+  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
+  border-right: 1px solid #404040;
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
 }
 
 .sidebar-header {
   padding: 1.5rem;
-  border-bottom: 1px solid #e5e7eb;
-  background-color: #f9fafb;
+  border-bottom: 1px solid #404040;
+  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;
-  border-left-color: #3b82f6;
+  background-color: #333333;
+  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;
 }
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 90d3eb0..a5fd04f 100644
--- a/src/components/Sidebar.tsx
+++ b/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>
   );
diff --git a/src/index.css b/src/index.css
index 7227235..a6a5cd6 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,6 +1,6 @@
 :root {
-  --background_dark: #242424;
-  --text_dark: rgba(255, 255, 255, 0.87);
+  --background-dark: #242424;
+  --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);
-  background-color: var(--background_dark);
+  color: var(--text-dark);
+  background-color: var(--background-dark);
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
diff --git a/src/pages/dashboard/dashboard.css b/src/pages/dashboard/dashboard.css
new file mode 100644
index 0000000..8a6d90e
--- /dev/null
+++ b/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;
+}
diff --git a/src/pages/dashboard/dashboard.tsx b/src/pages/dashboard/dashboard.tsx
index 8b88a6e..267b298 100644
--- a/src/pages/dashboard/dashboard.tsx
+++ b/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>
diff --git a/src/pages/login/login.tsx b/src/pages/login/login.tsx
index fd50595..6a1c0cc 100644
--- a/src/pages/login/login.tsx
+++ b/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}