feat: redesign sidebar

.eslintrc.js

@@ -64,6 +64,7 @@ module.exports = {
           'height',
           'width',
           'feature',
+          'variant',
         ],
       },
     ],

json-server/db.json

@@ -755,7 +755,7 @@
         "isAppRedesigned": true
       },
       "jsonSettings": {
-        "theme": "app_orange_theme",
+        "theme": "app_dark_theme",
         "isFirstVisit": true,
         "settingsPageHasBeenOpen": false,
         "isArticlesPageWasOpened": true

public/locales/ru/main.json

@@ -1,3 +1,3 @@
 {
-  "Главная страница": "Главная страница"
+  "Главная страница": "Главная"
 }

src/features/LangSwitcher/ui/LangSwitcher.tsx

@@ -2,7 +2,9 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { classNames } from '@/shared/lib/classNames';
-import { Button, ButtonTheme } from '@/shared/ui/deprecated/Button';
+import { Button as ButtonDeprecated, ButtonTheme } from '@/shared/ui/deprecated/Button';
+import { Button } from '@/shared/ui/redesigned/Button';
+import { ToggleFeatures } from '@/shared/lib/features';
 
 interface LangSwitcherProps {
   className?: string;
@@ -17,9 +19,23 @@ export const LangSwitcher = memo(({ className, short }: LangSwitcherProps) => {
   };
 
   return (
-    <Button theme={ButtonTheme.CLEAR} onClick={toggle} className={classNames('', {}, [className])}>
-      {t(short ? 'Короткий язык' : 'Язык')}
-    </Button>
+    <ToggleFeatures
+      feature="isAppRedesigned"
+      on={
+        <Button variant="clear" onClick={toggle} className={classNames('', {}, [className])}>
+          {t(short ? 'Короткий язык' : 'Язык')}
+        </Button>
+      }
+      off={
+        <ButtonDeprecated
+          theme={ButtonTheme.CLEAR}
+          onClick={toggle}
+          className={classNames('', {}, [className])}
+        >
+          {t(short ? 'Короткий язык' : 'Язык')}
+        </ButtonDeprecated>
+      }
+    />
   );
 });
 

src/features/ThemeSwitcher/ui/ThemeSwitcher.tsx

@@ -1,12 +1,15 @@
 import { memo, useCallback } from 'react';
 
 import { classNames } from '@/shared/lib/classNames';
-import { Button, ButtonTheme } from '@/shared/ui/deprecated/Button';
+import { Button as ButtonDeprecated, ButtonTheme } from '@/shared/ui/deprecated/Button';
 import { useTheme } from '@/shared/lib/hooks/useTheme/useTheme';
 import { saveJsonSettings } from '@/entities/User';
 import { useAppDispatch } from '@/shared/lib/hooks/useAppDispatch/useAppDispatch';
+import ThemeIconDeprecated from '@/shared/assets/icons/theme-light.svg';
 import ThemeIcon from '@/shared/assets/icons/theme.svg';
-import { Icon } from '@/shared/ui/deprecated/Icon';
+import { Icon as IconDeprecated } from '@/shared/ui/deprecated/Icon';
+import { Icon } from '@/shared/ui/redesigned/Icon';
+import { ToggleFeatures } from '@/shared/lib/features';
 
 interface ThemeSwitcherProps {
   className?: string;
@@ -23,13 +26,19 @@ export const ThemeSwitcher = memo(({ className }: ThemeSwitcherProps) => {
   }, [toggleTheme, dispatch]);
 
   return (
-    <Button
-      theme={ButtonTheme.CLEAR}
-      className={classNames('', {}, [className])}
-      onClick={onToggleHandler}
-    >
-      <Icon Svg={ThemeIcon} width={40} height={40} inverted />
-    </Button>
+    <ToggleFeatures
+      feature="isAppRedesigned"
+      on={<Icon Svg={ThemeIcon} clickable onClick={onToggleHandler} />}
+      off={
+        <ButtonDeprecated
+          theme={ButtonTheme.CLEAR}
+          className={classNames('', {}, [className])}
+          onClick={onToggleHandler}
+        >
+          <IconDeprecated Svg={ThemeIconDeprecated} width={40} height={40} inverted />
+        </ButtonDeprecated>
+      }
+    />
   );
 });
 

src/shared/layouts/MainLayout/MainLayout.module.scss

@@ -2,7 +2,7 @@
   min-height: 100vh;
   display: grid;
   grid-template-areas: "sidebar content rightbar";
-  grid-template-columns: 284px 1fr 176px;
+  grid-template-columns: 284px 1fr 100px;
 }
 
 .sidebar {

src/shared/ui/redesigned/AppLink/index.ts

@@ -1,2 +1 @@
 export { AppLink } from './ui/AppLink';
-export type { AppLinkVariant } from './ui/AppLink';

src/shared/ui/redesigned/AppLink/ui/AppLink.tsx

@@ -1,5 +1,5 @@
 import { ForwardedRef, forwardRef, ReactNode } from 'react';
-import { Link, LinkProps } from 'react-router-dom';
+import { LinkProps, NavLink } from 'react-router-dom';
 
 import { classNames } from '@/shared/lib/classNames';
 
@@ -11,19 +11,29 @@ interface AppLinkProps extends LinkProps {
   className?: string;
   variant?: AppLinkVariant;
   children?: ReactNode;
+  activeClassName?: string;
 }
 
 export const AppLink = forwardRef((props: AppLinkProps, ref: ForwardedRef<HTMLAnchorElement>) => {
-  const { to, className, children, variant = 'primary', ...otherProps } = props;
+  const {
+    to,
+    className,
+    children,
+    variant = 'primary',
+    activeClassName = '',
+    ...otherProps
+  } = props;
 
   return (
-    <Link
+    <NavLink
       to={to}
       ref={ref}
-      className={classNames(cls.appLink, {}, [className, cls[variant]])}
+      className={({ isActive }) =>
+        classNames(cls.appLink, { [activeClassName]: isActive }, [className, cls[variant]])
+      }
       {...otherProps}
     >
       {children}
-    </Link>
+    </NavLink>
   );
 });

src/shared/ui/redesigned/Button/index.ts

@@ -1 +1 @@
-export { Button, ButtonTheme, ButtonSize } from './ui/Button';
+export { Button } from './ui/Button';

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

@@ -1,93 +1,54 @@
 .button {
   cursor: pointer;
-  color: var(--primary-color);
+  color: var(--text-redesigned);
   padding: 6px 15px;
 
   &:hover {
-    opacity: 0.8;
-    fill-opacity: 80%;
-    stroke-opacity: 80%;
+    color: var(--accent-redesigned);
   }
 }
 
-.clear,
-.clearInverted {
+.clear {
   padding: 0;
   margin: 0;
   border: none;
   background: none;
   outline: none;
 }
 
-.clearInverted {
-  color: var(--inverted-primary-color);
+.m {
+  font: var(--font-m-redesigned);
 }
 
-.outline {
-  border: 1px solid var(--primary-color);
-  color: var(--primary-color);
-  background: none;
+.l {
+  font: var(--font-l-redesigned);
 }
 
-.outline_red {
-  border: 1px solid var(--red-light);
-  color: var(--red-light);
-  background: none;
-}
-
-.background {
-  background: var(--bg-color);
-  color: var(--primary-color);
-  border: none;
-}
-
-.backgroundInverted {
-  background: var(--inverted-bg-color);
-  color: var(--inverted-primary-color);
-  border: none;
-}
-
-.size_m {
-  font: var(--font-m);
-}
-
-.size_l {
-  font: var(--font-l);
-}
-
-.size_xl {
-  font: var(--font-xl);
+.xl {
+  font: var(--font-xl-redesigned);
 }
 
 .square {
   padding: 0;
 
-  &.size_m {
+  &.m {
     width: var(--font-line-m);
     height: var(--font-line-m);
   }
 
-  &.size_l {
+  &.l {
     width: var(--font-line-l);
     height: var(--font-line-l);
   }
 
-  &.size_xl {
+  &.xl {
     width: var(--font-line-xl);
     height: var(--font-line-xl);
   }
 }
 
 .disabled {
   opacity: 0.5;
-  fill-opacity: 50%;
-  stroke-opacity: 50%;
-
-  &:hover {
-    opacity: 0.5;
-    fill-opacity: 50%;
-    stroke-opacity: 50%;
-  }
 }
 
 .fullWidth {