feat: change sidebar styles

.gitignore

@@ -1,4 +1,58 @@
-/build
 node_modules
 .idea
-/storybook-static
+
+
+
+
+
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/build
+/tmp
+/out-tsc
+
+# dependencies
+/node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+.vscode
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db
+.npmrc
+.env
+.env.development.local
+
+.prettierignore
+
+# Storybook
+
+/storybook-static
+

extractedTranslations/en/translation.json

@@ -1,5 +1,4 @@
 {
-  "throw error": "throw error",
   "Главная": "",
   "Главная страница": "",
   "О сайте": "",

package.json

@@ -63,6 +63,7 @@
     "jest": "^27.5.1",
     "loki": "^0.33.0",
     "mini-css-extract-plugin": "^2.5.3",
+    "postcss": "8",
     "regenerator-runtime": "^0.13.9",
     "sass": "^1.49.9",
     "sass-loader": "^12.6.0",

public/locales/en/translation.json

@@ -9,5 +9,6 @@
   "Обновить страницу": "Reload page",
   "throw error": "throw error",
   "Главная": "Main",
-  "О сайте": "About us"
+  "О сайте": "About us",
+  "Короткий язык": "En"
 }

public/locales/ru/translation.json

@@ -9,5 +9,6 @@
   "Обновить страницу": "Обновить страницу",
   "throw error": "throw error",
   "Главная": "Главная",
-  "О сайте": "О сайте"
+  "О сайте": "О сайте",
+  "Короткий язык": "Ru"
 }

src/app/styles/themes/dark.scss

@@ -1,7 +1,7 @@
 .app.dark {
     --bg-color: #090949;
     --inverted-bg-color: #e8e8ea;
-    --primary-color:  #04ff04;
+    --primary-color: #04ff04;
     --secondary-color: #049604;
     --inverted-primary-color: #0232c2;
     --inverted-secondary-color: #0452ff;

src/app/styles/themes/normal.scss

@@ -3,6 +3,6 @@
     --inverted-bg-color: #090949;
     --primary-color: #0232c2;
     --secondary-color: #0449e0;
-    --inverted-primary-color:  #04ff04;
+    --inverted-primary-color: #04ff04;
     --inverted-secondary-color: #049604;
 }

src/shared/ui/Button/Button.module.scss

@@ -21,7 +21,6 @@
     background: var(--bg-color);
     color: var(--primary-color);
     border: none;
-
 }
 
 .backgroundInverted {
@@ -62,4 +61,4 @@
 
 .size_xl {
     font: var(--font-m);
-}
+}

src/shared/ui/LangSwitcher/LangSwitcher.tsx

@@ -5,9 +5,10 @@ import { Button, ButtonTheme } from 'shared/ui/Button/Button';
 
 interface LangSwitcherProps {
     className?: string;
+		short?: boolean;
 }
 
-export const LangSwitcher = ({ className }: LangSwitcherProps) => {
+export const LangSwitcher = ({ className, short }: LangSwitcherProps) => {
     const { t, i18n } = useTranslation();
 
     const toggle = async () => {
@@ -20,7 +21,7 @@ export const LangSwitcher = ({ className }: LangSwitcherProps) => {
             theme={ButtonTheme.CLEAR}
             onClick={toggle}
         >
-            {t('Язык')}
+            {t(short ? 'Короткий язык' : 'Язык')}
         </Button>
     );
 };

src/widgets/Navbar/ui/Navbar.tsx

@@ -1,25 +1,12 @@
 import { classNames } from 'shared/lib/classNames/classNames';
-import { AppLink, AppLinkTheme } from 'shared/ui/AppLink/AppLink';
-import { useTranslation } from 'react-i18next';
 import cls from './Navbar.module.scss';
 
 interface NavbarProps {
-    className?: string;
+  className?: string;
 }
 
-export const Navbar = ({ className }: NavbarProps) => {
-    const { t } = useTranslation();
-
-    return (
-        <div className={classNames(cls.Navbar, {}, [className])}>
-            <div className={cls.links}>
-                <AppLink theme={AppLinkTheme.SECONDARY} to="/" className={cls.mainLink}>
-                    {t('Главная')}
-                </AppLink>
-                <AppLink theme={AppLinkTheme.RED} to="/about">
-                    {t('О сайте')}
-                </AppLink>
-            </div>
-        </div>
-    );
-};
+export const Navbar = ({ className }: NavbarProps) => (
+    <div className={classNames(cls.Navbar, {}, [className])}>
+        <div className={cls.links} />
+    </div>
+);

src/widgets/Sidebar/ui/Sidebar/Sidebar.module.scss

@@ -6,10 +6,6 @@
     transition: width 0.3s;
 }
 
-.collapsed {
-    width: var(--sidebar-width-collapsed);
-}
-
 .switchers {
     position: absolute;
     bottom: 20px;
@@ -26,4 +22,45 @@
     position: absolute;
     right: -32px;
     bottom: 32px;
-}
+}
+
+.items {
+    margin-top: 20px;
+    display: flex;
+    flex-direction: column;
+    margin-left: 30px;
+}
+
+.item {
+    margin-left: 10px;
+    display: flex;
+    align-items: center;
+}
+
+.link {
+    margin-left: 10px;
+    opacity: 1;
+}
+
+.icon {
+    fill: var(--inverted-primary-color);
+}
+
+.collapsed {
+    width: var(--sidebar-width-collapsed);
+
+    .switchers {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .lang {
+        margin-left: 0;
+    }
+
+    .link {
+        opacity: 0;
+        width: 0;
+        transition: 0.2s opacity;
+    }
+}

src/widgets/Sidebar/ui/Sidebar/Sidebar.tsx

@@ -3,6 +3,11 @@ import { useState } from 'react';
 import { ThemeSwitcher } from 'shared/ui/ThemeSwitcher';
 import { LangSwitcher } from 'shared/ui/LangSwitcher/LangSwitcher';
 import { Button, ButtonSize, ButtonTheme } from 'shared/ui/Button/Button';
+import { AppLink, AppLinkTheme } from 'shared/ui/AppLink/AppLink';
+import { useTranslation } from 'react-i18next';
+import { RoutePath } from 'shared/config/routeConfig/routeConfig';
+import AboutIcon from 'shared/assets/icons/about-20-20.svg';
+import MainIcon from 'shared/assets/icons/main-20-20.svg';
 import cls from './Sidebar.module.scss';
 
 interface SidebarProps {
@@ -16,6 +21,8 @@ export const Sidebar = ({ className }: SidebarProps) => {
         setCollapsed((prev) => !prev);
     };
 
+    const { t } = useTranslation();
+
     return (
         <div
             data-testid="sidebar"
@@ -31,9 +38,31 @@ export const Sidebar = ({ className }: SidebarProps) => {
             >
                 {collapsed ? '>' : '<'}
             </Button>
+            <div className={cls.items}>
+                <AppLink
+                    theme={AppLinkTheme.SECONDARY}
+                    to={RoutePath.main}
+                    className={cls.item}
+                >
+                    <MainIcon className={cls.icon} />
+                    <span className={cls.link}>
+                        {t('Главная')}
+                    </span>
+                </AppLink>
+                <AppLink
+                    theme={AppLinkTheme.SECONDARY}
+                    to={RoutePath.about}
+                    className={cls.item}
+                >
+                    <AboutIcon className={cls.icon} />
+                    <span className={cls.link}>
+                        {t('О сайте')}
+                    </span>
+                </AppLink>
+            </div>
             <div className={cls.switchers}>
                 <ThemeSwitcher />
-                <LangSwitcher className={cls.lang} />
+                <LangSwitcher short={collapsed} className={cls.lang} />
             </div>
         </div>
     );

yarn.lock

@@ -11436,15 +11436,7 @@ postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@^7.0.14, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.36, postcss@^7.0.5, postcss@^7.0.6:
-  version "7.0.39"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.39.tgz#9624375d965630e2e1f2c02a935c82a59cb48309"
-  integrity sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==
-  dependencies:
-    picocolors "^0.2.1"
-    source-map "^0.6.1"
-
-postcss@^8.2.15, postcss@^8.4.19, postcss@^8.4.21:
+postcss@8, postcss@^8.2.15, postcss@^8.4.19, postcss@^8.4.21:
   version "8.4.31"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
   integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
@@ -11453,6 +11445,14 @@ postcss@^8.2.15, postcss@^8.4.19, postcss@^8.4.21:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+postcss@^7.0.14, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.36, postcss@^7.0.5, postcss@^7.0.6:
+  version "7.0.39"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.39.tgz#9624375d965630e2e1f2c02a935c82a59cb48309"
+  integrity sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==
+  dependencies:
+    picocolors "^0.2.1"
+    source-map "^0.6.1"
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"