feat: add portals for modal

extractedTranslations/en/translation.json

@@ -0,0 +1,3 @@
+{
+  "Войти": ""
+}

src/app/App.tsx

@@ -1,30 +1,18 @@
-import React, { Suspense, useState } from 'react';
+import React, { Suspense } from 'react';
 import './styles/index.scss';
 import { classNames } from 'shared/lib/classNames/classNames';
 import { useTheme } from 'app/providers/ThemeProvider';
 import { AppRouter } from 'app/providers/router';
 import { Navbar } from 'widgets/Navbar';
 import { Sidebar } from 'widgets/Sidebar';
-import { Modal } from 'shared/ui/Modal/Modal';
 
 function App() {
     const { theme } = useTheme();
 
-    const [isOpen, setIsOpen] = useState(false);
-
     return (
         <div className={classNames('app', {}, [theme])}>
             <Suspense fallback="">
                 <Navbar />
-                <button type="button" onClick={() => setIsOpen(true)}>
-                    toggle
-                </button>
-                <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab
-                    accusantium aliquid architecto autem consequuntur debitis et facere,
-                    laudantium modi nostrum nulla obcaecati odit quas quod sapiente,
-                    veritatis? Illo, veritatis.
-                </Modal>
                 <div className="content-page">
                     <Sidebar />
                     <AppRouter />

src/app/styles/index.scss

@@ -3,10 +3,13 @@
 @import "themes/normal";
 @import "themes/dark";
 
-.app {
+body {
     font: var(--font-m);
-    background: var(--bg-color);
     color: var(--primary-color);
+}
+
+.app {
+    background: var(--bg-color);
     min-height: 100vh;
 }
 

src/index.tsx

@@ -2,6 +2,7 @@ import { render } from 'react-dom';
 import { BrowserRouter } from 'react-router-dom';
 import { ThemeProvider } from 'app/providers/ThemeProvider';
 import App from './app/App';
+import 'app/styles/index.scss';
 
 import './shared/config/i18n/i18n';
 import { ErrorBoundary } from './app/providers/ErrorBoundary';

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

@@ -3,13 +3,18 @@
     color: var(--primary-color);
 }
 
-.clear {
+.clear,
+.clearInverted {
     padding: 0;
     border: none;
     background: none;
     outline: none;
 }
 
+.clearInverted {
+    color: var(--inverted-primary-color);
+}
+
 .outline {
     padding: 10px 15px;
     border: 1px solid var(--primary-color);

src/shared/ui/Button/Button.stories.tsx

@@ -26,6 +26,12 @@ Clear.args = {
     theme: ButtonTheme.CLEAR,
 };
 
+export const ClearInverted = Template.bind({});
+ClearInverted.args = {
+    children: 'Text',
+    theme: ButtonTheme.CLEAR_INVERTED,
+};
+
 export const Outline = Template.bind({});
 Outline.args = {
     children: 'Text',

src/shared/ui/Button/Button.tsx

@@ -4,6 +4,7 @@ import cls from './Button.module.scss';
 
 export enum ButtonTheme {
   CLEAR = 'clear',
+  CLEAR_INVERTED = 'clearInverted',
   OUTLINE = 'outline',
   BACKGROUND = 'background',
   BACKGROUND_INVERTED = 'backgroundInverted',

src/shared/ui/Modal/Modal.tsx

@@ -6,6 +6,7 @@ import React, {
     useState,
 } from 'react';
 import { classNames } from 'shared/lib/classNames/classNames';
+import { Portal } from 'shared/ui/Portal/Portal';
 import cls from './Modal.module.scss';
 
 interface ModalProps {
@@ -65,12 +66,14 @@ export const Modal = (props: ModalProps) => {
     };
 
     return (
-        <div className={classNames(cls.Modal, mods, [className])}>
-            <div className={cls.overlay} onClick={closeHandler}>
-                <div className={cls.content} onClick={onContentClick}>
-                    {children}
+        <Portal>
+            <div className={classNames(cls.Modal, mods, [className])}>
+                <div className={cls.overlay} onClick={closeHandler}>
+                    <div className={cls.content} onClick={onContentClick}>
+                        {children}
+                    </div>
                 </div>
             </div>
-        </div>
+        </Portal>
     );
 };

src/shared/ui/Portal/Portal.tsx

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+
+interface PortalProps {
+	children: ReactNode;
+	element?: HTMLElement;
+}
+
+export const Portal = (props: PortalProps) => {
+    const {
+        children,
+        element = document.body,
+    } = props;
+
+    return createPortal(children, element);
+};

src/widgets/Navbar/ui/Navbar.tsx

@@ -1,12 +1,37 @@
 import { classNames } from 'shared/lib/classNames/classNames';
+import { Modal } from 'shared/ui/Modal/Modal';
+import React, { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, ButtonTheme } from 'shared/ui/Button/Button';
 import cls from './Navbar.module.scss';
 
 interface NavbarProps {
   className?: string;
 }
 
-export const Navbar = ({ className }: NavbarProps) => (
-    <div className={classNames(cls.Navbar, {}, [className])}>
-        <div className={cls.links} />
-    </div>
-);
+export const Navbar = ({ className }: NavbarProps) => {
+    const { t } = useTranslation();
+    const [isAuthModal, setIsAuthModal] = useState(false);
+
+    const onToggleModal = useCallback(() => {
+        setIsAuthModal((prev) => !prev);
+    }, []);
+
+    return (
+        <div className={classNames(cls.Navbar, {}, [className])}>
+            <Button
+                theme={ButtonTheme.CLEAR_INVERTED}
+                className={cls.links}
+                onClick={onToggleModal}
+            >
+                {t('Войти')}
+            </Button>
+            <Modal isOpen={isAuthModal} onClose={onToggleModal}>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab
+                accusantium aliquid architecto autem consequuntur debitis et facere,
+                laudantium modi nostrum nulla obcaecati odit quas quod sapiente,
+                veritatis? Illo, veritatis.
+            </Modal>
+        </div>
+    );
+};