From a42d1bc9c2b17d38598a209289992a80bd4d648b Mon Sep 17 00:00:00 2001 From: KoloskovaAlla <91485080+KoloskovaAlla@users.noreply.github.com> Date: Thu, 22 Feb 2024 09:33:00 +0300 Subject: [PATCH 1/3] Added styles for Sidebar --- package-lock.json | 4 +-- src/components/Sidebar/sidebar.scss | 54 +++++++++++++++++++++++++++++ 2 files changed, 56 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index e41edc6..89fbf5b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,11 +1,11 @@ { - "name": "test-vite", + "name": "frontend-html-test", "version": "0.0.0", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "test-vite", + "name": "frontend-html-test", "version": "0.0.0", "dependencies": { "@fortawesome/fontawesome-svg-core": "^6.5.1", diff --git a/src/components/Sidebar/sidebar.scss b/src/components/Sidebar/sidebar.scss index e69de29..c414ae8 100644 --- a/src/components/Sidebar/sidebar.scss +++ b/src/components/Sidebar/sidebar.scss @@ -0,0 +1,54 @@ +.sidebar { + width: 250px; + 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: 80px; +} + +.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; +} \ No newline at end of file From 369a7de42b23030d460ff2d976f2d7f672b79790 Mon Sep 17 00:00:00 2001 From: allakoloskova <66311342+allakoloskova@users.noreply.github.com> Date: Thu, 22 Feb 2024 13:25:35 +0300 Subject: [PATCH 2/3] Refactored styles in the Sidebar --- package-lock.json | 8 +- package.json | 2 +- src/components/Sidebar/Sidebar.jsx | 118 +++++++++++++++------------- src/components/Sidebar/sidebar.scss | 16 ++-- 4 files changed, 78 insertions(+), 66 deletions(-) diff --git a/package-lock.json b/package-lock.json index 89fbf5b..fcbe4fc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,7 +24,7 @@ "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" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -4156,9 +4156,9 @@ } }, "node_modules/vite": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/vite/-/vite-5.1.3.tgz", - "integrity": "sha512-UfmUD36DKkqhi/F75RrxvPpry+9+tTkrXfMNZD+SboZqBCMsxKtO52XeGzzuh7ioz+Eo/SYDBbdb0Z7vgcDJew==", + "version": "5.1.4", + "resolved": "https://registry.npmjs.org/vite/-/vite-5.1.4.tgz", + "integrity": "sha512-n+MPqzq+d9nMVTKyewqw6kSt+R3CkvF9QAKY8obiQn8g1fwTscKxyfaYnC632HtBXAQGc1Yjomphwn1dtwGAHg==", "dev": true, "dependencies": { "esbuild": "^0.19.3", diff --git a/package.json b/package.json index 222c1fd..b2e90ab 100644 --- a/package.json +++ b/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" } } diff --git a/src/components/Sidebar/Sidebar.jsx b/src/components/Sidebar/Sidebar.jsx index 0e8dd6b..5d97665 100644 --- a/src/components/Sidebar/Sidebar.jsx +++ b/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 ( -
-
- TensorFlow logo - TensorFlow - -
+ render() { + const { isOpened } = this.state; + const containerClassnames = classnames('sidebar', { opened: isOpened }); -
- { - routes.map((route) => ( -
this.goToRoute(route.path) }> - - { route.title } -
- )) - } -
+ return ( +
+
+ TensorFlow logo + TensorFlow + +
-
- { - bottomRoutes.map((route) => ( -
this.goToRoute(route.path) }> - - { route.title } -
- )) - } -
+
+ {routes.map((route) => ( +
this.goToRoute(route.path)}> + + {isOpened && {route.title}}
- ); - } + ))} +
+ +
+ { + bottomRoutes.map((route) => ( +
this.goToRoute(route.path)}> + + {isOpened && {route.title}} +
+ )) + } +
+
+ ); + } } diff --git a/src/components/Sidebar/sidebar.scss b/src/components/Sidebar/sidebar.scss index c414ae8..63a820e 100644 --- a/src/components/Sidebar/sidebar.scss +++ b/src/components/Sidebar/sidebar.scss @@ -1,5 +1,5 @@ .sidebar { - width: 250px; + width: 80px; height: calc(100% - 40px); background-color: #fff; color: #333; @@ -15,10 +15,10 @@ } .sidebar.opened { - width: 80px; + width: 300px; } -.sidebar > div { +.sidebar>div { padding: 10px; text-align: center; } @@ -42,13 +42,19 @@ color: #555; } -.sidebar div > div { +.sidebar div>div { padding: 10px; display: flex; align-items: center; cursor: pointer; } -.sidebar div > div:hover { +.sidebar div>div:hover { background-color: #f0f0f0; +} + +.bottom-routes { + position: absolute; + bottom: 0; + left: 0; } \ No newline at end of file From 5016426e11b8728a82deb69a603001698d143971 Mon Sep 17 00:00:00 2001 From: KoloskovaAlla <91485080+KoloskovaAlla@users.noreply.github.com> Date: Fri, 23 Feb 2024 20:06:20 +0300 Subject: [PATCH 3/3] Fixed bug --- src/components/Sidebar/Sidebar.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Sidebar/Sidebar.jsx b/src/components/Sidebar/Sidebar.jsx index 5d97665..cf98ea1 100644 --- a/src/components/Sidebar/Sidebar.jsx +++ b/src/components/Sidebar/Sidebar.jsx @@ -69,7 +69,7 @@ export default class Sidebar extends React.Component { ))}
-
+
{ bottomRoutes.map((route) => (
this.goToRoute(route.path)}>