Fix bugs

package.json

@@ -26,6 +26,6 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "sass": "^1.71.0",
-    "vite": "^5.1.0"
+    "vite": "^5.1.4"
   }
 }

src/components/Sidebar/Sidebar.jsx

@@ -2,78 +2,84 @@ import './sidebar.scss';
 import React from 'react';
 import classnames from 'classnames';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import logo from '../../assets/logo.png'
+import logo from '../../assets/logo.png';
+import { useEffect } from 'react'
 
 const routes = [
-    { title: 'Home', icon: 'fas-solid fa-house', path: '/' },
-    { title: 'Sales', icon: 'chart-line', path: '/sales' },
-    { title: 'Costs', icon: 'chart-column', path: '/costs' },
-    { title: 'Payments', icon: 'wallet', path: '/payments' },
-    { title: 'Finances', icon: 'chart-pie', path: '/finances' },
-    { title: 'Messages', icon: 'envelope', path: '/messages' },
+  { title: 'Home', icon: 'fas-solid fa-house', path: '/' },
+  { title: 'Sales', icon: 'chart-line', path: '/sales' },
+  { title: 'Costs', icon: 'chart-column', path: '/costs' },
+  { title: 'Payments', icon: 'wallet', path: '/payments' },
+  { title: 'Finances', icon: 'chart-pie', path: '/finances' },
+  { title: 'Messages', icon: 'envelope', path: '/messages' },
 ];
 
 const bottomRoutes = [
-    { title: 'Settings', icon: 'sliders', path: '/settings' },
-    { title: 'Support', icon: 'phone-volume', path: '/support' },
+  { title: 'Settings', icon: 'sliders', path: '/settings' },
+  { title: 'Support', icon: 'phone-volume', path: '/support' },
 ];
 
 export default class Sidebar extends React.Component {
-    constructor(props) {
-        super(props);
 
-        this.state = {
-            isOpened: true,
-        };
+  componentDidUpdate(prevProps, prevState) {
+    if (prevState.isOpened !== this.state.isOpened) {
+      console.log('Состояние isOpened изменилось:', this.state.isOpened);
     }
+  }
 
-    toggleSidebar = () => {
-        this.setState((state) => ({ isOpened: !state.isOpened }) );
-    };
+  constructor(props) {
+    super(props);
 
-    goToRoute = (path) => {
-        console.log(`going to "${path}"`);
+    this.state = {
+      isOpened: true,
     };
+  }
+
+  toggleSidebar = () => {
+    this.setState((state) => ({ isOpened: !state.isOpened }));
+  };
 
-    render() {
-        const { isOpened } = this.state;
-        const containerClassnames = classnames('sidebar', { opened: isOpened });
+  goToRoute = (path) => {
+    console.log(`going to "${path}"`);
+  };
 
-        return (
-            <div className={ containerClassnames }>
-                <div>
-                    <img
-                        src={ logo }
-                        alt="TensorFlow logo"
-                    />
-                    <span>TensorFlow</span>
-                    <button onClick={ this.toggleSidebar }>
-                        <FontAwesomeIcon icon={ isOpened ? 'angle-left' : 'angle-right' } />
-                    </button>
-                </div>
+  render() {
+    const { isOpened } = this.state;
+    const containerClassnames = classnames('sidebar', { opened: isOpened });
 
-                <div>
-                    {
-                        routes.map((route) => (
-                            <div key={ route.title } onClick={ () => this.goToRoute(route.path) }>
-                                <FontAwesomeIcon icon={ route.icon } />
-                                <span>{ route.title }</span>
-                            </div>
-                        ))
-                    }
-                </div>
+    return (
+      <div className={containerClassnames}>
+        <div>
+          <img
+            src={logo}
+            alt="TensorFlow logo"
+          />
+          <span>TensorFlow</span>
+          <button onClick={this.toggleSidebar}>
+            <FontAwesomeIcon icon={isOpened ? 'angle-left' : 'angle-right'} />
+          </button>
+        </div>
 
-                <div>
-                    {
-                        bottomRoutes.map((route) => (
-                            <div key={ route.title } onClick={ () => this.goToRoute(route.path) }>
-                                <FontAwesomeIcon icon={ route.icon } />
-                                <span>{ route.title }</span>
-                            </div>
-                        ))
-                    }
-                </div>
+        <div>
+          {routes.map((route) => (
+            <div key={route.title} onClick={() => this.goToRoute(route.path)}>
+              <FontAwesomeIcon icon={route.icon} />
+              {isOpened && <span>{route.title}</span>}
             </div>
-        );
-    }
+          ))}
+        </div>
+
+        <div className={'bottom-routes'}>
+          {
+            bottomRoutes.map((route) => (
+              <div key={route.title} onClick={() => this.goToRoute(route.path)}>
+                <FontAwesomeIcon icon={route.icon} />
+                {isOpened && <span>{route.title}</span>}
+              </div>
+            ))
+          }
+        </div>
+      </div>
+    );
+  }
 }

src/components/Sidebar/sidebar.scss

@@ -0,0 +1,60 @@
+.sidebar {
+  width: 80px;
+  height: calc(100% - 40px);
+  background-color: #fff;
+  color: #333;
+  position: fixed;
+  top: 20px;
+  left: 20px;
+  bottom: 20px;
+  overflow-x: hidden;
+  padding-top: 20px;
+  transition: 0.5s;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  border-radius: 10px;
+}
+
+.sidebar.opened {
+  width: 300px;
+}
+
+.sidebar>div {
+  padding: 10px;
+  text-align: center;
+}
+
+.sidebar img {
+  width: 50px;
+  height: auto;
+  margin-bottom: 10px;
+}
+
+.sidebar button {
+  background: none;
+  border: none;
+  color: #333;
+  font-size: 20px;
+  cursor: pointer;
+  outline: none;
+}
+
+.sidebar button:hover {
+  color: #555;
+}
+
+.sidebar div>div {
+  padding: 10px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.sidebar div>div:hover {
+  background-color: #f0f0f0;
+}
+
+.bottom-routes {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}