final ref hw5

src/s1-main/App.module.css

@@ -1,5 +1,5 @@
 .App {
-    /*--header_height: 60px;*/
+    --header_height: 60px;
 }
 
 .hw {

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
         >
-            <HW1/>
+            {/*<HW1/>*/}
-            <HW2/>
+            {/*раскомментировать по ходу выполнения*/}
-            <HW3/>
+            {/*<HW2/>*/}
-            <HW4/>
+            {/*<HW3/>*/}
+            {/*<HW4/>*/}
 
-            {/*<HW5/>*/}
+            {/*при выполнении дз 5 и более - закомментировать здесь дз 1-4, так как они есть внутри дз 5*/}
+            <HW5/>
         </div>
     )
 }

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 (
         <HashRouter>
-            {/*в gh-pages лучше работает HashRouter*/}
+            {/*в gh-pages лучше работает HashRouter, с BrowserRouter скорее всего не пройдёт тест*/}
             <Layout>
                 <Pages />
             </Layout>

src/s2-homeworks/hw05/Pages.tsx

@@ -17,14 +17,16 @@ function Pages() {
             {/*Routes выбирает первый подходящий роут*/}
             <Routes>
                 {/*роутинг будут писать студенты*/}
-                {/*в начале мы попадаем на страницу '/' и переходим сразу на страницу PRE_JUNIOR*/}
+                {/*в начале мы попадаем на страницу '/' и переходим сразу на страницу /pre-junior*/}
+                {/*<Route ...*/}
                 <Route path={'/'} element={<Navigate to={PATH.PRE_JUNIOR} />} />
 
+                {/*роуты для /pre-junior, /junior, /junior-plus*/}
                 <Route path={PATH.PRE_JUNIOR} element={<PreJunior />} />
                 <Route path={PATH.JUNIOR} element={<Junior />} />
                 <Route path={PATH.JUNIOR_PLUS} element={<JuniorPlus />} />
 
-                {/*он отрисуется если пользователь захочет попасть на несуществующую страницу*/}
+                {/*роут для несуществующей страницы должен отрисовать <Error404 />*/}
                 <Route path={'/*'} element={<Error404 />} />
             </Routes>
         </div>

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;
+    height: var(--header_height);
-    background: #fff;
+    position: sticky;
-    box-shadow: 0 0 40px rgba(29, 33, 38, 0.13), 0 0 2px rgba(29, 33, 38, 0.1);
     display: flex;
     justify-content: space-between;
-    height: var(--header_height);
+    align-items: center;
-    padding: 0 70px;
-    position: sticky;
-    top: 0;
     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;
 }

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 {useLocation} from 'react-router-dom'
-import { PATH } from '../Pages'
+import {PATH} from '../Pages'
 
 type PropsType = {
     handleOpen: () => void
 }
 
-export const Header: FC<PropsType> = ({ handleOpen }) => {
+export const Header: FC<PropsType> = ({handleOpen}) => {
     // hw5-menu изначально отсутствует, при нажатии на бургер - появляется, при повторном нажатии исчезает
     const location = useLocation()
     const currentPath = location.pathname
+
     const pageName =
         currentPath === PATH.PRE_JUNIOR
-            ? 'Pre Junior'
+            ? 'Pre-junior'
             : currentPath === PATH.JUNIOR
-            ? 'Junior'
+                ? 'Junior'
-            : currentPath === PATH.JUNIOR_PLUS
+                : currentPath === PATH.JUNIOR_PLUS
-            ? 'Junior Plus'
+                    ? 'Junior Plus'
-            : 'Error'
+                    : 'Error'
     return (
         <>
             <div id={'hw5-header'} className={s.header}>

src/s2-homeworks/hw05/layout/Layout.tsx

@@ -10,16 +10,20 @@ export const Layout: FC<PropsType> = ({ 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 (
         <>
             <Sidebar open={open} handleClose={handleClose} />
             <Header handleOpen={handleOpen} />
-            <div style={{ paddingBottom: '200px' }}>{children}</div>
+            <div>
+                {/*страницы*/}
+                {children}
+            </div>
         </>
     )
 }

src/s2-homeworks/hw05/pages/Junior.tsx

@@ -1,16 +1,16 @@
 import React from 'react'
-import HW6 from '../../hw06/HW6'
+// import HW6 from '../../hw06/HW6'
-import HW7 from '../../hw07/HW7'
+// import HW7 from '../../hw07/HW7'
-import HW8 from '../../hw08/HW8'
+// import HW8 from '../../hw08/HW8'
-import HW9 from '../../hw09/HW9'
+// import HW9 from '../../hw09/HW9'
 
 function Junior() {
     return (
         <div id={'hw5-page-junior'}>
-            <HW6 />
+            {/*<HW6 />*/}
-            <HW7 />
+            {/*<HW7 />*/}
-            <HW8 />
+            {/*<HW8 />*/}
-            <HW9 />
+            {/*<HW9 />*/}
         </div>
     )
 }

src/s2-homeworks/hw05/pages/JuniorPlus.tsx

@@ -1,16 +1,16 @@
 import React from 'react'
-import HW10 from '../../hw10/HW10'
+// import HW10 from '../../hw10/HW10'
-import HW11 from '../../hw11/HW11'
+// import HW11 from '../../hw11/HW11'
-import HW12 from '../../hw12/HW12'
+// import HW12 from '../../hw12/HW12'
-import HW13 from '../../hw13/HW13'
+// import HW13 from '../../hw13/HW13'
 
 function JuniorPlus() {
     return (
         <div id={'hw5-page-junior-plus'}>
-            <HW10 />
+            {/*<HW10 />*/}
-            <HW11 />
+            {/*<HW11 />*/}
-            <HW12 />
+            {/*<HW12 />*/}
-            <HW13 />
+            {/*<HW13 />*/}
         </div>
     )
 }

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);
+    z-index: 10;
-    background: rgba(0, 0, 0, 0.3);
+    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 {

src/s2-homeworks/hw05/sidebar/Sidebar.tsx

@@ -1,7 +1,7 @@
-import React, { FC } from 'react'
+import React, {FC} from 'react'
-import { NavLink } from 'react-router-dom'
+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<PropsType> = ({ open, handleClose }) => {
+export const Sidebar: FC<PropsType> = ({open, handleClose}) => {
+    const sidebarClass = s.sidebar
+        + (open ? ' ' + s.open : '')
     return (
         <>
-            {/*бэкграунд справа от открытого меню*/}
+            {/*затемнение справа от открытого меню*/}
-            {open && <div className={s.background} onClick={handleClose} />}
+            {open && <div className={s.background} onClick={handleClose}/>}
 
-            <aside className={`${s.sidebar} ${open ? s.open : ''}`}>
+            <aside className={sidebarClass}>
                 <button className={s.close} onClick={handleClose}>
                     <img
                         src={closeIcon}
@@ -29,7 +31,7 @@ export const Sidebar: FC<PropsType> = ({ open, handleClose }) => {
                         id={'hw5-pre-junior-link'}
                         to={PATH.PRE_JUNIOR}
                         onClick={handleClose}
-                        className={({ isActive }) => (isActive ? s.active : '')} // делает студент
+                        className={({isActive}) => (isActive ? s.active : '')} // делает студент
                     >
                         Pre-junior
                     </NavLink>
@@ -37,7 +39,7 @@ export const Sidebar: FC<PropsType> = ({ open, handleClose }) => {
                         id={'hw5-junior-link'}
                         to={PATH.JUNIOR}
                         onClick={handleClose}
-                        className={({ isActive }) => (isActive ? s.active : '')} // делает студент
+                        className={({isActive}) => (isActive ? s.active : '')} // делает студент
                     >
                         Junior
                     </NavLink>
@@ -45,9 +47,9 @@ export const Sidebar: FC<PropsType> = ({ open, handleClose }) => {
                         id={'hw5-junior-plus-link'}
                         to={PATH.JUNIOR_PLUS}
                         onClick={handleClose}
-                        className={({ isActive }) => (isActive ? s.active : '')} // делает студент
+                        className={({isActive}) => (isActive ? s.active : '')} // делает студент
                     >
-                        Junior+
+                        Junior Plus
                     </NavLink>
                 </nav>
             </aside>