Redesigned sidebar

.eslintrc.js

@@ -58,6 +58,7 @@ module.exports = {
           'border',
           'flexAling',
           'featureName',
+          'variant',
         ],
       },
     ],

src/app/styles/variables/global.scss

@@ -56,4 +56,7 @@
 
   // XL
   --font-xl-redesigned: var(--font-size-xl) / var(--font-line-xl) var(--font-family-title-redesigned);
+
+    // Sidebar
+    --sidebar-width-collapsed-redesigned: 50px;
 }

src/entities/Article/ui/ArticleDetails/ArticleDetails.tsx

@@ -20,7 +20,7 @@ import { useAppDispatch } from '@/shared/lib/hooks/useAppDispatch/useAppDispatch
 import EyeIcon from '@/shared/assets/icons/eye.svg'
 import CalendarIcon from '@/shared/assets/icons/calendar.svg'
 import { useInitialEffect } from '@/shared/lib/hooks/useInitialEffect/useInitialEffect'
-import { HStack, VStack } from '@/shared/ui/Stack'
+import { HStack, VStack } from '@/shared/ui/redesigned/Stack'
 import { Avatar } from '@/shared/ui/deprecated/Avatar'
 import { Icon } from '@/shared/ui/deprecated/Icon'
 import { Skeleton } from '@/shared/ui/deprecated/Skeleton'

src/entities/Article/ui/ArticleListItem/ArticleListItem.tsx

@@ -11,7 +11,7 @@ import EyeIcon from '@/shared/assets/icons/eye.svg'
 import { getRouteArticleDetails } from '@/shared/const/router'
 import { Icon } from '@/shared/ui/deprecated/Icon'
 import { Text, TextSize } from '@/shared/ui/deprecated/Text'
-import { VStack } from '@/shared/ui/Stack'
+import { VStack } from '@/shared/ui/redesigned/Stack'
 import { AppImage } from '@/shared/ui/deprecated/AppImage'
 import { AppLink } from '@/shared/ui/deprecated/AppLink'
 import { Avatar } from '@/shared/ui/deprecated/Avatar'

src/entities/Comment/ui/CommentCard/CommentCard.tsx

@@ -6,7 +6,7 @@ import cls from './CommentCard.module.scss'
 
 import { classNames } from '@/shared/lib/ClassNames/ClassNames'
 import { getRouteProfile } from '@/shared/const/router'
-import { VStack } from '@/shared/ui/Stack'
+import { VStack } from '@/shared/ui/redesigned/Stack'
 import { AppLink } from '@/shared/ui/deprecated/AppLink'
 import { Avatar } from '@/shared/ui/deprecated/Avatar'
 import { Skeleton } from '@/shared/ui/deprecated/Skeleton'

src/entities/Comment/ui/CommentList/CommentList.tsx

@@ -5,7 +5,7 @@ import { Comment } from '../../model/types/comment'
 import { CommentCard } from '../CommentCard/CommentCard'
 
 import { classNames } from '@/shared/lib/ClassNames/ClassNames'
-import { VStack } from '@/shared/ui/Stack'
+import { VStack } from '@/shared/ui/redesigned/Stack'
 import { Text } from '@/shared/ui/deprecated/Text'
 
 interface CommentListProps {

src/entities/Country/ui/CountrySelect/CountrySelect.tsx

@@ -4,7 +4,7 @@ import React, { memo } from 'react'
 import { Country } from '../../model/types/country'
 
 import { classNames } from '@/shared/lib/ClassNames/ClassNames'
-import { ListBox } from '@/shared/ui/Popups/ui/ListBox/ListBox'
+import { ListBox } from '@/shared/ui/redesigned/Popups/ui/ListBox/ListBox'
 
 interface CountrySelectProps {
   className?: string

src/entities/Currency/ui/CurrencySelect/CurrencySelect.tsx

@@ -4,7 +4,7 @@ import React, { memo } from 'react'
 import { Currency } from '../../model/types/currency'
 
 import { classNames } from '@/shared/lib/ClassNames/ClassNames'
-import { ListBox } from '@/shared/ui/Popups/ui/ListBox/ListBox'
+import { ListBox } from '@/shared/ui/redesigned/Popups/ui/ListBox/ListBox'
 
 interface CurrencySelectProps {
   className?: string

src/entities/Notification/ui/NotificationList/NotificationList.tsx

@@ -6,7 +6,7 @@ import { NotificationItem } from '../NotificationItem/NotificationItem'
 
 import { classNames } from '@/shared/lib/ClassNames/ClassNames'
 import { Skeleton } from '@/shared/ui/deprecated/Skeleton'
-import { VStack } from '@/shared/ui/Stack'
+import { VStack } from '@/shared/ui/redesigned/Stack'
 // import cls from './NotificationList.module.scss';
 
 interface NotificationListProps {

src/entities/Profile/ui/ProfileCard/ProfileCard.tsx

@@ -6,7 +6,7 @@ import { Profile } from '../../model/types/profile'
 import { classNames, Mods } from '@/shared/lib/ClassNames/ClassNames'
 import { Currency, CurrencySelect } from '@/entities/Currency'
 import { Country, CountrySelect } from '@/entities/Country'
-import { HStack, VStack } from '@/shared/ui/Stack'
+import { HStack, VStack } from '@/shared/ui/redesigned/Stack'
 import { Avatar } from '@/shared/ui/deprecated/Avatar'
 import { Input } from '@/shared/ui/deprecated/Input'
 import { TextTheme, TextAling, Text } from '@/shared/ui/deprecated/Text/ui/Text'

src/entities/Rating/ui/RatingCart/RatingCart.tsx

@@ -5,7 +5,7 @@ import { BrowserView, MobileView } from 'react-device-detect'
 import { classNames } from '@/shared/lib/ClassNames/ClassNames'
 import { Text } from '@/shared/ui/deprecated/Text'
 import { Input } from '@/shared/ui/deprecated/Input'
-import { VStack, HStack } from '@/shared/ui/Stack'
+import { VStack, HStack } from '@/shared/ui/redesigned/Stack'
 import { Button, ButtonVariables } from '@/shared/ui/deprecated/Button'
 import { ButtonSizes } from '@/shared/ui/deprecated/Button/ui/Button'
 import { Card } from '@/shared/ui/deprecated/Card'

src/features/ArticleRecomendationsList/ui/ArticleRecomendationsList/ArticleRecomendationsList.tsx

@@ -6,7 +6,7 @@ import { getArticleRecomendationsList } from '../../api/ArticleRecomendationsLis
 import { classNames } from '@/shared/lib/ClassNames/ClassNames'
 import { ArticleList } from '@/entities/Article'
 import { Text, TextSize } from '@/shared/ui/deprecated/Text'
-import { VStack } from '@/shared/ui/Stack'
+import { VStack } from '@/shared/ui/redesigned/Stack'
 
 // import cls from './ArticleRecomendationsList.module.scss';
 

src/features/AvatarDropdown/ui/AvatarDropdown.tsx

@@ -4,7 +4,7 @@ import { useDispatch, useSelector } from 'react-redux'
 
 import { getUserAuthData, isUserAdmin, isUserManager, userActions } from '@/entities/User'
 import { getRouteAdminPanel, getRouteProfile } from '@/shared/const/router'
-import { Dropdown } from '@/shared/ui/Popups'
+import { Dropdown } from '@/shared/ui/redesigned/Popups'
 import { Avatar } from '@/shared/ui/deprecated/Avatar'
 
 interface AvatarDropdownProps {

src/features/EditableProfileCard/ui/EditableProfileCardHeader/EditableProfileCardHeader.tsx

@@ -10,7 +10,7 @@ import { updateProfileData } from '../../model/services/updateProfileData/update
 import { classNames } from '@/shared/lib/ClassNames/ClassNames'
 import { useAppDispatch } from '@/shared/lib/hooks/useAppDispatch/useAppDispatch'
 import { getUserAuthData } from '@/entities/User'
-import { HStack } from '@/shared/ui/Stack'
+import { HStack } from '@/shared/ui/redesigned/Stack'
 import { Button, ButtonVariables } from '@/shared/ui/deprecated/Button'
 import { Text } from '@/shared/ui/deprecated/Text'
 

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/ClassNames'
-import { Button, ButtonVariables } from '@/shared/ui/deprecated/Button'
+import { Button as ButtonDeprecated, ButtonVariables } from '@/shared/ui/deprecated/Button'
+import { ToggleFeaturesComponent } from '@/shared/lib/features'
+import { Button } from '@/shared/ui/redesigned/Button'
 
 interface LangSwitcherProps {
   className?: string
@@ -18,9 +20,21 @@ export const LangSwitcher: React.FC<LangSwitcherProps> = memo((props) => {
     i18n.changeLanguage(i18n.language === 'ru' ? 'en' : 'ru')
   }
 
-  return (
-    <Button theme={ButtonVariables.CLEAR_THIRD} onClick={switchLanguage} className={classNames('', {}, [className])}>
+  const deprecatedContent = (
+    <ButtonDeprecated
+      theme={ButtonVariables.CLEAR_THIRD}
+      onClick={switchLanguage}
+      className={classNames('', {}, [className])}
+    >
+      {t(short ? 'Короткий язык' : 'Русский')}
+    </ButtonDeprecated>
+  )
+
+  const redesignedContent = (
+    <Button variant="clear" onClick={switchLanguage} className={classNames('', {}, [className])}>
       {t(short ? 'Короткий язык' : 'Русский')}
     </Button>
   )
+
+  return <ToggleFeaturesComponent featureName="isAppRedesigned" on={redesignedContent} off={deprecatedContent} />
 })

src/features/NotificationButton/ui/NotificationButton/NotificationButton.tsx

@@ -4,7 +4,7 @@ import { BrowserView, MobileView } from 'react-device-detect'
 import cls from './NotificationButton.module.scss'
 
 import { NotificationList } from '@/entities/Notification'
-import { Popover } from '@/shared/ui/Popups'
+import { Popover } from '@/shared/ui/redesigned/Popups'
 import Notification from '@/shared/assets/icons/notification.svg'
 import { Button, ButtonVariables } from '@/shared/ui/deprecated/Button'
 import { Drawer } from '@/shared/ui/deprecated/Drawer'

src/features/ThemeSwitcher/ui/ThemeSwitcher.tsx

@@ -2,12 +2,16 @@ import { memo, useCallback } from 'react'
 
 import { Theme, useTheme } from '@/app/providers/ThemeProvider'
 import { classNames } from '@/shared/lib/ClassNames/ClassNames'
-import LightIcon from '@/shared/assets/icons/white.svg'
-import DarkIcon from '@/shared/assets/icons/orange.svg'
+import LightIconDeprecated from '@/shared/assets/icons/white.svg'
+import DarkIconDeprecated from '@/shared/assets/icons/orange.svg'
+import ThemeSwitcherIcon from '@/shared/assets/icons/redesign/theme-switcher.svg'
 import { useAppDispatch } from '@/shared/lib/hooks/useAppDispatch/useAppDispatch'
 import { saveJsonSettings } from '@/entities/User'
-import { Button, ButtonVariables } from '@/shared/ui/deprecated/Button'
-import { Icon } from '@/shared/ui/deprecated/Icon'
+import { Button as ButtonDeprecated, ButtonVariables } from '@/shared/ui/deprecated/Button'
+import { Icon as IconDeprecated } from '@/shared/ui/deprecated/Icon'
+import { ToggleFeaturesComponent } from '@/shared/lib/features'
+import { Button } from '@/shared/ui/redesigned/Button'
+import { Icon } from '@/shared/ui/redesigned/Icon'
 
 interface ThemeSwitcherProps {
   className?: string
@@ -24,9 +28,21 @@ export const ThemeSwitcher: React.FC<ThemeSwitcherProps> = memo((props) => {
     })
   }, [dispatch, toggleTheme])
 
-  return (
-    <Button theme={ButtonVariables.CLEAR_THIRD} onClick={onToggleHandler} className={classNames('', {}, [className])}>
-      <Icon height={24} width={24} Svg={theme === Theme.DARK ? DarkIcon : LightIcon} />
+  const deprecatedContent = (
+    <ButtonDeprecated
+      theme={ButtonVariables.CLEAR_THIRD}
+      onClick={onToggleHandler}
+      className={classNames('', {}, [className])}
+    >
+      <IconDeprecated height={24} width={24} Svg={theme === Theme.DARK ? DarkIconDeprecated : LightIconDeprecated} />
+    </ButtonDeprecated>
+  )
+
+  const redesignedContent = (
+    <Button variant="clear" onClick={onToggleHandler} className={classNames('', {}, [className])}>
+      <Icon Svg={ThemeSwitcherIcon} />
     </Button>
   )
+
+  return <ToggleFeaturesComponent featureName="isAppRedesigned" on={redesignedContent} off={deprecatedContent} />
 })

src/features/addCommentForm/ui/AddCommentForm/AddCommentForm.tsx

@@ -10,7 +10,7 @@ import cls from './AddCommentForm.module.scss'
 import { classNames } from '@/shared/lib/ClassNames/ClassNames'
 import { useAppDispatch } from '@/shared/lib/hooks/useAppDispatch/useAppDispatch'
 import { DynamicModuleLoader, ReducersList } from '@/shared/lib/components/DynamicModuleLoader/DynamicModuleLoader'
-import { HStack } from '@/shared/ui/Stack'
+import { HStack } from '@/shared/ui/redesigned/Stack'
 import { Input } from '@/shared/ui/deprecated/Input'
 import { Button, ButtonVariables } from '@/shared/ui/deprecated/Button'
 

src/pages/ArticleDetailsPage/ui/ArticleDetailsComments/ArticleDetailsComments.tsx

@@ -10,7 +10,7 @@ import { getArticleCommentsLoading } from '../../model/selectors/getArticleComme
 import { AddCommentForm } from '@/features/addCommentForm'
 import { CommentList } from '@/entities/Comment'
 import { useInitialEffect } from '@/shared/lib/hooks/useInitialEffect/useInitialEffect'
-import { VStack } from '@/shared/ui/Stack'
+import { VStack } from '@/shared/ui/redesigned/Stack'
 import { Text, TextSize } from '@/shared/ui/deprecated/Text'
 
 // import cls from './ArticleDetailsComments.module.scss';

src/pages/ArticleDetailsPage/ui/ArticleDetailsPage/ArticleDetailsPage.tsx

@@ -13,7 +13,7 @@ import { ArticleRecomendationsList } from '@/features/ArticleRecomendationsList'
 import { ArticleRating } from '@/features/ArticleRating'
 import { toggleFeatures } from '@/shared/lib/features'
 import { Card } from '@/shared/ui/deprecated/Card'
-import { VStack } from '@/shared/ui/Stack'
+import { VStack } from '@/shared/ui/redesigned/Stack'
 
 interface ArticleDetailsPageProps {
   className?: string

src/pages/ArticleDetailsPage/ui/ArticleDetailsPageHeader/ArticleDetailsPageHeader.tsx

@@ -8,7 +8,7 @@ import { getCanEditArticle } from '../../model/selectors/getCanEditArticle/getCa
 import { classNames } from '@/shared/lib/ClassNames/ClassNames'
 import { getArticleDetailsData } from '@/entities/Article'
 import { getRouteArticleEdit, getRouteArticles } from '@/shared/const/router'
-import { HStack } from '@/shared/ui/Stack'
+import { HStack } from '@/shared/ui/redesigned/Stack'
 import { Button, ButtonVariables } from '@/shared/ui/deprecated/Button'
 
 interface ArticleDetailsPageHeaderProps {

src/pages/ProfilePage/ui/ProfilePage.tsx

@@ -3,7 +3,7 @@ import { useParams } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 
 import { Page } from '@/widgets/Page'
-import { VStack } from '@/shared/ui/Stack'
+import { VStack } from '@/shared/ui/redesigned/Stack'
 import { EditableProfileCard } from '@/features/EditableProfileCard'
 
 interface ProfilePageProps {

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

@@ -2,18 +2,18 @@
   min-width: 100%;
   display: grid;
   grid-template-areas: 'sidebar content rightbar';
-  grid-template-columns: 284px 1fr 176px;
+  grid-template-columns: 284px 1fr 100px;
 }
 
 .sidebar {
   grid-area: sidebar;
-  justify-self: center;
   padding: 32px;
 }
 .content {
   grid-area: content;
   justify-self: center;
   max-width: 1200px;
+  width: 100%;
   padding: 32px;
 }
 

src/shared/ui/deprecated/Modal/ui/Modal.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react'
 
-import { Portal } from '../../../Portal'
+import { Portal } from '../../../redesigned/Portal'
 import cls from './Modal.module.scss'
 import { Overlay } from '../../Overlay'
 

src/shared/ui/Popups/ui/Dropdown/Dropdown.stories.tsx → src/shared/ui/deprecated/Popups/ui/Dropdown/Dropdown.stories.tsx

@@ -2,7 +2,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react'
 
 // eslint-disable-next-line ulbi-tv-plugin/path-checker
 import { Dropdown } from './Dropdown'
-import { Button } from '../../../deprecated/Button'
+import { Button } from '../../../../deprecated/Button'
 
 export default {
   title: 'shared/Popups/Dropdown',

src/shared/ui/Popups/ui/Dropdown/Dropdown.tsx → src/shared/ui/deprecated/Popups/ui/Dropdown/Dropdown.tsx

@@ -5,7 +5,7 @@ import { Menu } from '@headlessui/react'
 import cls from './Dropdown.module.scss'
 import popupCls from '../../styles/Popups.module.scss'
 import { mapDirectionClass } from '../../styles/const'
-import { AppLink } from '../../../deprecated/AppLink'
+import { AppLink } from '../../../../deprecated/AppLink'
 
 import { DropdownDirection } from '@/shared/types/ui'
 import { classNames } from '@/shared/lib/ClassNames/ClassNames'

src/shared/ui/Popups/ui/ListBox/ListBox.tsx → src/shared/ui/deprecated/Popups/ui/ListBox/ListBox.tsx

@@ -5,7 +5,7 @@ import popupCls from '../../styles/Popups.module.scss'
 import cls from './ListBox.module.scss'
 import { mapDirectionClass } from '../../styles/const'
 import { HStack } from '../../../Stack'
-import { Button, ButtonVariables } from '../../../deprecated/Button'
+import { Button, ButtonVariables } from '../../../../deprecated/Button'
 
 import { classNames } from '@/shared/lib/ClassNames/ClassNames'
 import { DropdownDirection } from '@/shared/types/ui'

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

@@ -0,0 +1 @@
+export * from './ui/AppLink'

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

@@ -0,0 +1,15 @@
+.primary {
+    color: var(--text-redesigned);
+
+    &:hover {
+        color: var(--accent-redesigned);
+    }
+}
+
+.red {
+    color: var(--cancel-redesigned);
+
+    &:hover {
+        opacity: 0.8;
+    }
+}

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

@@ -0,0 +1,29 @@
+import { LinkProps, NavLink } from 'react-router-dom'
+import { memo, ReactNode } from 'react'
+
+import cls from './AppLink.module.scss'
+
+import { classNames } from '@/shared/lib/ClassNames/ClassNames'
+
+export type AppLinkVariant = 'primary' | 'red'
+
+interface AppLinkProps extends LinkProps {
+  className?: string
+  variant?: AppLinkVariant
+  children?: ReactNode
+  activeClassName?: string
+}
+
+export const AppLink = memo((props: AppLinkProps) => {
+  const { to, className, children, variant = 'primary', activeClassName = '', ...otherProps } = props
+
+  return (
+    <NavLink
+      to={to}
+      className={({ isActive }) => classNames(cls.AppLink, { [activeClassName]: isActive }, [className, cls[variant]])}
+      {...otherProps}
+    >
+      {children}
+    </NavLink>
+  )
+})

src/shared/ui/deprecated/AppLogo/ui/AppLogo.module.scss → src/shared/ui/redesigned/AppLogo/ui/AppLogo.module.scss

@@ -3,6 +3,7 @@
 }
 
 .gradientBig {
+  pointer-events: none;
   position: absolute;
   background: radial-gradient(57.05% 57.05% at 49.84% 42.95%, rgba(94, 211, 243, 0.2) 0%, rgba(94, 211, 243, 0.132281) 7.81%, rgba(94, 211, 243, 0.0830304) 29.69%, rgba(94, 211, 243, 0.0386116) 56.77%, rgba(94, 211, 243, 0.021875) 77.6%, rgba(94, 211, 243, 0) 100%);
   width: 300px;
@@ -12,6 +13,7 @@
 }
 
 .gradientSmall {
+  pointer-events: none;
   position: absolute;
   width: 200px;
   height: 200px;