feat: add articles \ articles details page

config/build/buildWebpackConfig.ts

@@ -16,6 +16,7 @@ export function buildWebpackConfig(options: BuildOptions): webpack.Configuration
             filename: '[name].[contenthash].js',
             path: paths.build,
             clean: true,
+            publicPath: '/',
         },
         plugins: buildPlugins(options),
         module: {

extractedTranslations/en/translation.json

@@ -12,6 +12,11 @@
   "Profile": "",
   "Save": "",
   "Server error": "",
+  "articles": "",
+  "articles page": "",
+  "articles_details": "",
+  "articles_details page": "",
+  "articles_detals": "",
   "auth_form": "",
   "auth_password": "",
   "auth_username": "",

src/pages/ArticlesDetailsPage/index.ts

@@ -0,0 +1,5 @@
+import { ArticlesDetailsPageAsync } from './ui/ArticlesDetailsPage.async';
+
+export {
+    ArticlesDetailsPageAsync as ArticlesDetailsPage,
+};

src/pages/ArticlesDetailsPage/ui/ArticlesDetailsPage.async.tsx

@@ -0,0 +1,7 @@
+import { lazy } from 'react';
+
+export const ArticlesDetailsPageAsync = lazy(() => new Promise((resolve) => {
+    // @ts-ignore
+    // ТАК В РЕАЛЬНЫХ ПРОЕКТАХ НЕ ДЕЛАТЬ!!!!! ДЕЛАЕМ ДЛЯ КУРСА!
+    setTimeout(() => resolve(import('./ArticlesDetailsPage')), 1500);
+}));

src/pages/ArticlesDetailsPage/ui/ArticlesDetailsPage.stories.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { ArticlesDetailsPage } from 'pages/ArticlesDetailsPage';
+
+export default {
+    title: 'shared/ArticlesDetailsPage',
+    component: ArticlesDetailsPage,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+} as ComponentMeta<typeof ArticlesDetailsPage>;
+
+const Template: ComponentStory<typeof ArticlesDetailsPage> = (args) => <ArticlesDetailsPage {...args} />;
+
+export const Normal = Template.bind({});
+Normal.args = {};

src/pages/ArticlesDetailsPage/ui/ArticlesDetailsPage.tsx

@@ -0,0 +1,8 @@
+import { useTranslation } from 'react-i18next';
+import { memo } from 'react';
+
+const ArticlesDetailsPage = (props: any) => {
+    const { t } = useTranslation();
+    return <div>{t('articles_details page')}</div>;
+};
+export default memo(ArticlesDetailsPage);

src/pages/ArticlesPage/index.ts

@@ -0,0 +1,5 @@
+import { ArticlesPageAsync } from './ui/ArticlesPage.async';
+
+export {
+    ArticlesPageAsync as ArticlesPage,
+};

src/pages/ArticlesPage/ui/ArticlesPage.async.tsx

@@ -0,0 +1,7 @@
+import { lazy } from 'react';
+
+export const ArticlesPageAsync = lazy(() => new Promise((resolve) => {
+    // @ts-ignore
+    // ТАК В РЕАЛЬНЫХ ПРОЕКТАХ НЕ ДЕЛАТЬ!!!!! ДЕЛАЕМ ДЛЯ КУРСА!
+    setTimeout(() => resolve(import('./ArticlesPage')), 1500);
+}));

src/pages/ArticlesPage/ui/ArticlesPage.stories.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { ArticlesPage } from 'pages/ArticlesPage';
+
+export default {
+    title: 'shared/ArticlesPage',
+    component: ArticlesPage,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+} as ComponentMeta<typeof ArticlesPage>;
+
+const Template: ComponentStory<typeof ArticlesPage> = (args) => <ArticlesPage {...args} />;
+
+export const Normal = Template.bind({});
+Normal.args = {};

src/pages/ArticlesPage/ui/ArticlesPage.tsx

@@ -0,0 +1,9 @@
+import { useTranslation } from 'react-i18next';
+import { memo } from 'react';
+
+const ArticlesPage = (props: any) => {
+    const { t } = useTranslation();
+    return <div>{t('articles page')}</div>;
+};
+
+export default memo(ArticlesPage);

src/shared/config/routeConfig/routeConfig.tsx

@@ -3,6 +3,8 @@ import { MainPage } from 'pages/MainPage';
 import { AboutPage } from 'pages/AboutPage';
 import { NotFoundPage } from 'pages/NotFoundPage';
 import { ProfilePage } from 'pages/ProfilePage';
+import { ArticlesPage } from 'pages/ArticlesPage';
+import { ArticlesDetailsPage } from 'pages/ArticlesDetailsPage';
 
 export type AppRoutesProps = RouteProps & {
 	authOnly?: boolean;
@@ -12,13 +14,17 @@ export enum AppRoutes {
     MAIN = 'main',
     ABOUT = 'about',
 		PROFILE = 'profile',
+		ARTICLES = 'articles',
+		ARTICLE_DETAILS = 'article_details',
     NOT_FOUND = 'not_found',
 }
 
 export const RoutePath: Record<AppRoutes, string> = {
     [AppRoutes.MAIN]: '/',
     [AppRoutes.ABOUT]: '/about',
     [AppRoutes.PROFILE]: '/profile',
+    [AppRoutes.ARTICLES]: '/articles',
+    [AppRoutes.ARTICLE_DETAILS]: '/articles/', // + :id
     [AppRoutes.NOT_FOUND]: '*',
 };
 
@@ -36,6 +42,16 @@ export const routeConfig: Record<AppRoutes, AppRoutesProps> = {
         element: <ProfilePage />,
         authOnly: true,
     },
+    [AppRoutes.ARTICLES]: {
+        path: RoutePath.articles,
+        element: <ArticlesPage />,
+        authOnly: true,
+    },
+    [AppRoutes.ARTICLE_DETAILS]: {
+        path: `${RoutePath.article_details}:id`,
+        element: <ArticlesDetailsPage />,
+        authOnly: true,
+    },
     [AppRoutes.NOT_FOUND]: {
         path: RoutePath.not_found,
         element: <NotFoundPage />,

src/widgets/Sidebar/model/items.ts

@@ -3,6 +3,7 @@ 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 ProfileIcon from 'shared/assets/icons/profile-20-20.svg';
+import ArticleIcon from 'shared/assets/icons/article-20-20.svg';
 
 export interface SidebarItemType {
 	path: string;
@@ -28,4 +29,10 @@ export const SidebarItemsList: SidebarItemType[] = [
         text: 'Профиль',
         authOnly: true,
     },
+    {
+        path: RoutePath.articles,
+        Icon: ArticleIcon,
+        text: 'Статьи',
+        authOnly: true,
+    },
 ];

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

@@ -2,6 +2,7 @@
     margin-left: 10px;
     display: flex;
     align-items: center;
+    margin-top: 5px;
 }
 
 .link {