From 638052992363d9825ab7576329b493aa3c08e6eb Mon Sep 17 00:00:00 2001 From: neko Date: Thu, 15 Sep 2022 14:51:07 +0300 Subject: [PATCH] final ref hw5 --- src/s1-main/App.module.css | 2 +- src/s1-main/App.tsx | 13 +++-- src/s2-homeworks/hw05/HW5.tsx | 8 ++- src/s2-homeworks/hw05/Pages.tsx | 6 ++- .../hw05/header/Header.module.css | 21 ++++---- src/s2-homeworks/hw05/header/Header.tsx | 19 +++---- src/s2-homeworks/hw05/layout/Layout.tsx | 8 ++- src/s2-homeworks/hw05/pages/Junior.tsx | 16 +++--- src/s2-homeworks/hw05/pages/JuniorPlus.tsx | 16 +++--- .../hw05/sidebar/Sidebar.module.css | 53 ++++++++++--------- src/s2-homeworks/hw05/sidebar/Sidebar.tsx | 24 +++++---- 11 files changed, 105 insertions(+), 81 deletions(-) diff --git a/src/s1-main/App.module.css b/src/s1-main/App.module.css index f5f6952..11ea138 100644 --- a/src/s1-main/App.module.css +++ b/src/s1-main/App.module.css @@ -1,5 +1,5 @@ .App { - /*--header_height: 60px;*/ + --header_height: 60px; } .hw { diff --git a/src/s1-main/App.tsx b/src/s1-main/App.tsx index 093964f..65eae4e 100644 --- a/src/s1-main/App.tsx +++ b/src/s1-main/App.tsx @@ -4,6 +4,7 @@ import HW1 from '../s2-homeworks/hw01/HW1' import HW2 from '../s2-homeworks/hw02/HW2' import HW3 from '../s2-homeworks/hw03/HW3' import HW4 from '../s2-homeworks/hw04/HW4' +import HW5 from '../s2-homeworks/hw05/HW5' function App() { // для дз 12 @@ -17,12 +18,14 @@ function App() { className={s.App} // data-theme={themeId} // для дз 12 > - - - - + {/**/} + {/*раскомментировать по ходу выполнения*/} + {/**/} + {/**/} + {/**/} - {/**/} + {/*при выполнении дз 5 и более - закомментировать здесь дз 1-4, так как они есть внутри дз 5*/} + ) } diff --git a/src/s2-homeworks/hw05/HW5.tsx b/src/s2-homeworks/hw05/HW5.tsx index 3b20d07..7104707 100644 --- a/src/s2-homeworks/hw05/HW5.tsx +++ b/src/s2-homeworks/hw05/HW5.tsx @@ -3,10 +3,16 @@ import { HashRouter } from 'react-router-dom' import { Layout } from './layout/Layout' import Pages from './Pages' +/* +* 1 - в файле Pages.tsx дописать роуты на все страницы +* 2 - в файле Sidebar.tsx дописать className так чтоб вешался класс s.active когда мы уже на соответствующей странице +* 3 - застилизовать хэдэр и сайдбар в соответствии с дизайном +* */ + function HW5() { return ( - {/*в gh-pages лучше работает HashRouter*/} + {/*в gh-pages лучше работает HashRouter, с BrowserRouter скорее всего не пройдёт тест*/} diff --git a/src/s2-homeworks/hw05/Pages.tsx b/src/s2-homeworks/hw05/Pages.tsx index 907fba4..ba38a9f 100644 --- a/src/s2-homeworks/hw05/Pages.tsx +++ b/src/s2-homeworks/hw05/Pages.tsx @@ -17,14 +17,16 @@ function Pages() { {/*Routes выбирает первый подходящий роут*/} {/*роутинг будут писать студенты*/} - {/*в начале мы попадаем на страницу '/' и переходим сразу на страницу PRE_JUNIOR*/} + {/*в начале мы попадаем на страницу '/' и переходим сразу на страницу /pre-junior*/} + {/*} /> + {/*роуты для /pre-junior, /junior, /junior-plus*/} } /> } /> } /> - {/*он отрисуется если пользователь захочет попасть на несуществующую страницу*/} + {/*роут для несуществующей страницы должен отрисовать */} } /> diff --git a/src/s2-homeworks/hw05/header/Header.module.css b/src/s2-homeworks/hw05/header/Header.module.css index c9ee04d..77527c2 100644 --- a/src/s2-homeworks/hw05/header/Header.module.css +++ b/src/s2-homeworks/hw05/header/Header.module.css @@ -1,27 +1,28 @@ .burgerMenuIcon { - cursor: pointer; height: 24px; width: 24px; + + cursor: pointer; } .header { - align-items: center; - background: #fff; - box-shadow: 0 0 40px rgba(29, 33, 38, 0.13), 0 0 2px rgba(29, 33, 38, 0.1); + height: var(--header_height); + position: sticky; display: flex; justify-content: space-between; - height: var(--header_height); - padding: 0 70px; - position: sticky; - top: 0; + align-items: center; width: 100%; + top: 0; + padding: 0 70px; + + background: #fff; + box-shadow: 0 0 40px rgba(29, 33, 38, 0.13), 0 0 2px rgba(29, 33, 38, 0.1); } .header h1 { + color: #000000; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 24px; line-height: 29px; - - color: #000000; } \ No newline at end of file diff --git a/src/s2-homeworks/hw05/header/Header.tsx b/src/s2-homeworks/hw05/header/Header.tsx index a64b6f2..9acc0a3 100644 --- a/src/s2-homeworks/hw05/header/Header.tsx +++ b/src/s2-homeworks/hw05/header/Header.tsx @@ -1,25 +1,26 @@ -import React, { FC } from 'react' +import React, {FC} from 'react' import burgerIcon from './burger.svg' import s from './Header.module.css' -import { useLocation } from 'react-router-dom' -import { PATH } from '../Pages' +import {useLocation} from 'react-router-dom' +import {PATH} from '../Pages' type PropsType = { handleOpen: () => void } -export const Header: FC = ({ handleOpen }) => { +export const Header: FC = ({handleOpen}) => { // hw5-menu изначально отсутствует, при нажатии на бургер - появляется, при повторном нажатии исчезает const location = useLocation() const currentPath = location.pathname + const pageName = currentPath === PATH.PRE_JUNIOR - ? 'Pre Junior' + ? 'Pre-junior' : currentPath === PATH.JUNIOR - ? 'Junior' - : currentPath === PATH.JUNIOR_PLUS - ? 'Junior Plus' - : 'Error' + ? 'Junior' + : currentPath === PATH.JUNIOR_PLUS + ? 'Junior Plus' + : 'Error' return ( <>
diff --git a/src/s2-homeworks/hw05/layout/Layout.tsx b/src/s2-homeworks/hw05/layout/Layout.tsx index 263c2ef..562af87 100644 --- a/src/s2-homeworks/hw05/layout/Layout.tsx +++ b/src/s2-homeworks/hw05/layout/Layout.tsx @@ -10,16 +10,20 @@ export const Layout: FC = ({ children }) => { const [open, setOpen] = useState(false) const handleClose = () => setOpen(false) const handleOpen = () => setOpen(true) + useEffect(() => { open && (document.body.style.overflow = 'hidden') !open && (document.body.style.overflow = 'unset') - }, [open]) //отключает прокрутку при открытом меню + }, [open]) // отключает прокрутку при открытом меню return ( <>
-
{children}
+
+ {/*страницы*/} + {children} +
) } diff --git a/src/s2-homeworks/hw05/pages/Junior.tsx b/src/s2-homeworks/hw05/pages/Junior.tsx index 55d5563..d895228 100644 --- a/src/s2-homeworks/hw05/pages/Junior.tsx +++ b/src/s2-homeworks/hw05/pages/Junior.tsx @@ -1,16 +1,16 @@ import React from 'react' -import HW6 from '../../hw06/HW6' -import HW7 from '../../hw07/HW7' -import HW8 from '../../hw08/HW8' -import HW9 from '../../hw09/HW9' +// import HW6 from '../../hw06/HW6' +// import HW7 from '../../hw07/HW7' +// import HW8 from '../../hw08/HW8' +// import HW9 from '../../hw09/HW9' function Junior() { return (
- - - - + {/**/} + {/**/} + {/**/} + {/**/}
) } diff --git a/src/s2-homeworks/hw05/pages/JuniorPlus.tsx b/src/s2-homeworks/hw05/pages/JuniorPlus.tsx index 3a8979d..692e280 100644 --- a/src/s2-homeworks/hw05/pages/JuniorPlus.tsx +++ b/src/s2-homeworks/hw05/pages/JuniorPlus.tsx @@ -1,16 +1,16 @@ import React from 'react' -import HW10 from '../../hw10/HW10' -import HW11 from '../../hw11/HW11' -import HW12 from '../../hw12/HW12' -import HW13 from '../../hw13/HW13' +// import HW10 from '../../hw10/HW10' +// import HW11 from '../../hw11/HW11' +// import HW12 from '../../hw12/HW12' +// import HW13 from '../../hw13/HW13' function JuniorPlus() { return (
- - - - + {/**/} + {/**/} + {/**/} + {/**/}
) } diff --git a/src/s2-homeworks/hw05/sidebar/Sidebar.module.css b/src/s2-homeworks/hw05/sidebar/Sidebar.module.css index 6d6c060..c3151f4 100644 --- a/src/s2-homeworks/hw05/sidebar/Sidebar.module.css +++ b/src/s2-homeworks/hw05/sidebar/Sidebar.module.css @@ -1,46 +1,50 @@ .sidebar { - background: #fff; - height: 100vh; - left: -317px; - /* max-width: 317px; */ - /* min-width: 317px; */ - position: fixed; - top: 0; - transition: 0.2s ease-in; - width: 317px; z-index: 20; + position: fixed; + transition: 0.2s ease-in; + + height: 100vh; + width: 317px; + left: -317px; + top: 0; + + background: #fff; } .sidebar.open { - box-shadow: 0 10px 40px rgba(29, 33, 38, 0.13), - 0 1px 2px rgba(29, 33, 38, 0.1); - left: 0; position: fixed; transition: 0.2s ease-out; + + left: 0; + box-shadow: 0 10px 40px rgba(29, 33, 38, 0.13), + 0 1px 2px rgba(29, 33, 38, 0.1); } .background { - backdrop-filter: blur(2px); - background: rgba(0, 0, 0, 0.3); + z-index: 10; + position: fixed; + bottom: 0; left: 0; - position: fixed; right: 0; top: 0; - z-index: 10; + + backdrop-filter: blur(2px); + background: rgba(0, 0, 0, 0.3); } .nav { display: flex; flex-direction: column; + gap: 45px; + margin-top: 63px; + padding-left: 70px; + font-family: 'Montserrat', sans-serif; font-size: 22px; font-style: normal; font-weight: 600; - gap: 45px; line-height: 27px; - margin-top: 63px; - padding-left: 70px; } .nav a { @@ -57,14 +61,15 @@ text-decoration: underline; } .close { + position: absolute; + height: 24px; + width: 24px; + right: 24px; + top: 16px; + background-color: transparent; border: none; cursor: pointer; - height: 24px; - position: absolute; - right: 24px; - top: 16px; - width: 24px; } .close img { diff --git a/src/s2-homeworks/hw05/sidebar/Sidebar.tsx b/src/s2-homeworks/hw05/sidebar/Sidebar.tsx index 06720e0..2d967bf 100644 --- a/src/s2-homeworks/hw05/sidebar/Sidebar.tsx +++ b/src/s2-homeworks/hw05/sidebar/Sidebar.tsx @@ -1,7 +1,7 @@ -import React, { FC } from 'react' -import { NavLink } from 'react-router-dom' +import React, {FC} from 'react' +import {NavLink} from 'react-router-dom' import s from './Sidebar.module.css' -import { PATH } from '../Pages' +import {PATH} from '../Pages' import closeIcon from './closeOutline.svg' type PropsType = { @@ -9,13 +9,15 @@ type PropsType = { handleClose: () => void } -export const Sidebar: FC = ({ open, handleClose }) => { +export const Sidebar: FC = ({open, handleClose}) => { + const sidebarClass = s.sidebar + + (open ? ' ' + s.open : '') return ( <> - {/*бэкграунд справа от открытого меню*/} - {open &&
} + {/*затемнение справа от открытого меню*/} + {open &&
} -