hw5

src/index.css

@@ -1,3 +1,9 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
 body {
     margin: 0;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
@@ -6,6 +12,7 @@ body {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     box-sizing: border-box;
+
 }
 
 code {

src/s1-main/App.module.css

@@ -1,6 +1,5 @@
 .App {
-    padding-top: 107px;
-    padding-bottom: 63px;
+    --header_height: 60px;
 }
 
 .hw {
@@ -14,6 +13,7 @@
     line-height: 27px;
     margin-bottom: 10px;
     margin-left: 70px;
+    margin-top: 47px;
 }
 
 .hwContainer {

src/s1-main/App.tsx

@@ -23,9 +23,9 @@ const App = () => {
             {/*<HW1/>*/}
             {/*<HW2/>*/}
             {/*<HW3/>*/}
-            <HW4/>
+            {/*<HW4/>*/}
 
-            {/*<HW5/>*/}
+            <HW5/>
         </div>
     )
 }

src/s2-homeworks/hw05/HW5.tsx

@@ -1,20 +1,16 @@
 import React from 'react'
-import Header from './Header'
+import { HashRouter } from 'react-router-dom'
+import { Layout } from './layout/Layout'
 import Pages from './Pages'
-import {HashRouter} from 'react-router-dom'
 
 function HW5() {
     return (
-        <div>
+        <HashRouter>
             {/*в gh-pages лучше работает HashRouter*/}
-            <HashRouter>
-
-            <Header/>
-
-            <Pages/>
-
-            </HashRouter>
-        </div>
+            <Layout>
+                <Pages/>
+            </Layout>
+        </HashRouter>
     )
 }
 

src/s2-homeworks/hw05/Header.module.css

@@ -1,39 +0,0 @@
-.link {
-    text-decoration: none;
-    color: #7af;
-    margin: 10px;
-}
-
-.link:hover {
-    color: #c9f;
-}
-
-.active {
-    color: #5ff;
-}
-
-.burgerMenu {
-    width: 21px;
-    height: 21px;
-
-    margin: 10px;
-
-    background: #99ff99;
-}
-
-.header {
-    display: flex;
-    justify-content: flex-end;
-
-    width: 280px;
-}
-
-.showMenu {
-    transition-duration: 500ms;
-    transform: translate(0);
-}
-
-.hideMenu {
-    transition-duration: 500ms;
-    transform: translate(-220px);
-}

src/s2-homeworks/hw05/Header.tsx

@@ -1,43 +0,0 @@
-import React, {useState} from 'react'
-import {NavLink} from 'react-router-dom'
-import {PATH} from './Pages'
-import s from './Header.module.css'
-
-function Header() {
-    const [isShow, setShow] = useState(false)
-
-    // hw5-menu изначально отсутствует, при нажатии на бургер - появляется, при повторном нажатии исчезает
-    return (
-        <div id={'hw5-header'} className={s.header + ' ' + (isShow ? s.showMenu : s.hideMenu)}>
-            {isShow && (
-                <div id={'hw5-menu'} className={s.menu}>
-                    <NavLink
-                        id={'hw5-pre-junior-link'}
-                        to={PATH.PRE_JUNIOR}
-                        className={({isActive}) => isActive ? s.active : s.link} // делает студент
-                    >
-                        pre-junior
-                    </NavLink>
-                    <NavLink
-                        id={'hw5-junior-link'}
-                        to={PATH.JUNIOR}
-                        className={({isActive}) => isActive ? s.active : s.link} // делает студент
-                    >
-                        junior
-                    </NavLink>
-                    <NavLink
-                        id={'hw5-junior-plus-link'}
-                        to={PATH.JUNIOR_PLUS}
-                        className={({isActive}) => isActive ? s.active : s.link} // делает студент
-                    >
-                        junior+
-                    </NavLink>
-                </div>
-            )}
-
-            <div id={'hw5-burger-menu'} className={s.burgerMenu} onClick={() => setShow(!isShow)}/>
-        </div>
-    )
-}
-
-export default Header

src/s2-homeworks/hw05/header/Header.module.css

@@ -0,0 +1,17 @@
+.burgerMenuIcon {
+    cursor: pointer;
+    height: 24px;
+    width: 24px;
+}
+
+.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);
+    display: flex;
+    height: var(--header_height);
+    padding: 0 70px;
+    position: sticky;
+    top: 0;
+    width: 100%;
+}

src/s2-homeworks/hw05/header/Header.tsx

@@ -0,0 +1,27 @@
+import React, { FC } from 'react'
+import burgerIcon from './burger.svg'
+import s from './Header.module.css'
+
+type PropsType = {
+    open: boolean
+    handleOpen: () => void
+}
+
+export const Header: FC<PropsType> = ({open, handleOpen}) => {
+
+    // hw5-menu изначально отсутствует, при нажатии на бургер - появляется, при повторном нажатии исчезает
+    return (
+        <>
+            <div id={'hw5-header'} className={s.header}>
+                <img src={burgerIcon}
+                     id={'hw5-burger-menu'}
+                     className={s.burgerMenuIcon}
+                     onClick={handleOpen}
+                     alt={'open menu'}/>
+
+            </div>
+
+        </>
+    )
+}
+

src/s2-homeworks/hw05/header/burger.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.05 11H3.95C3.42533 11 3 11.4253 3 11.95V12.05C3 12.5747 3.42533 13 3.95 13H20.05C20.5747 13 21 12.5747 21 12.05V11.95C21 11.4253 20.5747 11 20.05 11Z" fill="black"/>
+<path d="M20.05 16H3.95C3.42533 16 3 16.4253 3 16.95V17.05C3 17.5747 3.42533 18 3.95 18H20.05C20.5747 18 21 17.5747 21 17.05V16.95C21 16.4253 20.5747 16 20.05 16Z" fill="black"/>
+<path d="M20.05 6H3.95C3.42533 6 3 6.42533 3 6.95V7.05C3 7.57467 3.42533 8 3.95 8H20.05C20.5747 8 21 7.57467 21 7.05V6.95C21 6.42533 20.5747 6 20.05 6Z" fill="black"/>
+</svg>

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

@@ -0,0 +1,27 @@
+import React, { FC, ReactNode, useEffect, useState } from 'react'
+import { Header } from '../header/Header'
+import { Sidebar } from '../sidebar/Sidebar'
+
+type PropsType = {
+    children: ReactNode
+}
+
+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]) //отключает прокрутку при открытом меню
+
+    return (
+        <>
+            <Sidebar open={open} handleClose={handleClose}/>
+            <Header open={open} handleOpen={handleOpen}/>
+            {children}
+        </>
+
+    )
+}
+

src/s2-homeworks/hw05/pages/Error404.module.css

@@ -0,0 +1,14 @@
+.error404 {
+    font-family: 'Montserrat', sans-serif;
+    font-size: 200px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 244px;
+}
+
+.wrapper {
+    align-items: center;
+    display: flex;
+    height: calc(100vh - var(--header_height));
+    justify-content: center;
+}

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

@@ -1,11 +1,12 @@
 import React from 'react'
+import s from './Error404.module.css'
 
 const Error404 = () => {
     return (
         <div id={'hw5-page-404'}>
-            <div>404</div>
-            <div>Page not found!</div>
-            <div>—ฅ/ᐠ.̫ .ᐟ\ฅ—</div>
+            <div className={s.wrapper}>
+                <span className={s.error404}>404</span>
+            </div>
         </div>
     )
 }

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

@@ -7,7 +7,7 @@ import HW4 from '../../hw04/HW4'
 function PreJunior() {
     return (
         <div id={'hw5-page-pre-junior'}>
-            pre junior page
+            {/*pre junior page*/}
             <HW1/>
             <HW2/>
             <HW3/>

src/s2-homeworks/hw05/sidebar/Sidebar.module.css

@@ -0,0 +1,71 @@
+.sidebar {
+    background: #fff;
+    height: 100vh;
+    left: -317px;
+    max-width: 317px;
+    min-width: 317px;
+    position: fixed;
+    top: 0;
+    transition: 0.2s ease-in;
+    z-index: 2;
+}
+
+.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;
+}
+
+.background {
+    backdrop-filter: blur(2px);
+    background: rgba(0, 0, 0, 0.3);
+    bottom: 0;
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 1;
+}
+
+.nav {
+    display: flex;
+    flex-direction: column;
+    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 {
+    color: black;
+    text-decoration: none;
+}
+
+.nav a:hover {
+    color: #0080ff;
+}
+
+.nav a.active {
+    color: #0059b2;
+}
+
+.close {
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    height: 24px;
+    position: absolute;
+    right: 24px;
+    top: 16px;
+    width: 24px;
+}
+
+.close img {
+    height: 24px;
+    width: 24px;
+}

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

@@ -0,0 +1,50 @@
+import React, { FC } from 'react'
+import { NavLink } from 'react-router-dom'
+import s from './Sidebar.module.css'
+import { PATH } from '../Pages'
+import closeIcon from './closeOutline.svg'
+
+type PropsType = {
+    open: boolean
+    handleClose: () => void
+}
+
+export const Sidebar: FC<PropsType> = ({open, handleClose}) => {
+    return (
+        <>
+            {open && <div className={s.background} onClick={handleClose}/>}
+            <aside className={`${s.sidebar} ${open ? s.open : ''}`}>
+                <button className={s.close} onClick={handleClose}>
+                    <img src={closeIcon} alt='close sidebar'/>
+                </button>
+                <nav id={'hw5-menu'} className={s.nav}>
+                    <NavLink
+                        id={'hw5-pre-junior-link'}
+                        to={PATH.PRE_JUNIOR}
+                        onClick={handleClose}
+                        className={({isActive}) => isActive ? s.active : ''} // делает студент
+                    >
+                        Pre-junior
+                    </NavLink>
+                    <NavLink
+                        id={'hw5-junior-link'}
+                        to={PATH.JUNIOR}
+                        onClick={handleClose}
+                        className={({isActive}) => isActive ? s.active : ''} // делает студент
+                    >
+                        Junior
+                    </NavLink>
+                    <NavLink
+                        id={'hw5-junior-plus-link'}
+                        to={PATH.JUNIOR_PLUS}
+                        onClick={handleClose}
+                        className={({isActive}) => isActive ? s.active : ''} // делает студент
+                    >
+                        Junior+
+                    </NavLink>
+                </nav>
+            </aside>
+        </>
+    )
+}
+

src/s2-homeworks/hw05/sidebar/closeOutline.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.4099 11.9999L17.7099 7.70994C17.8982 7.52164 18.004 7.26624 18.004 6.99994C18.004 6.73364 17.8982 6.47825 17.7099 6.28994C17.5216 6.10164 17.2662 5.99585 16.9999 5.99585C16.7336 5.99585 16.4782 6.10164 16.2899 6.28994L11.9999 10.5899L7.70994 6.28994C7.52164 6.10164 7.26624 5.99585 6.99994 5.99585C6.73364 5.99585 6.47824 6.10164 6.28994 6.28994C6.10164 6.47825 5.99585 6.73364 5.99585 6.99994C5.99585 7.26624 6.10164 7.52164 6.28994 7.70994L10.5899 11.9999L6.28994 16.2899C6.19621 16.3829 6.12182 16.4935 6.07105 16.6154C6.02028 16.7372 5.99414 16.8679 5.99414 16.9999C5.99414 17.132 6.02028 17.2627 6.07105 17.3845C6.12182 17.5064 6.19621 17.617 6.28994 17.7099C6.3829 17.8037 6.4935 17.8781 6.61536 17.9288C6.73722 17.9796 6.86793 18.0057 6.99994 18.0057C7.13195 18.0057 7.26266 17.9796 7.38452 17.9288C7.50638 17.8781 7.61698 17.8037 7.70994 17.7099L11.9999 13.4099L16.2899 17.7099C16.3829 17.8037 16.4935 17.8781 16.6154 17.9288C16.7372 17.9796 16.8679 18.0057 16.9999 18.0057C17.132 18.0057 17.2627 17.9796 17.3845 17.9288C17.5064 17.8781 17.617 17.8037 17.7099 17.7099C17.8037 17.617 17.8781 17.5064 17.9288 17.3845C17.9796 17.2627 18.0057 17.132 18.0057 16.9999C18.0057 16.8679 17.9796 16.7372 17.9288 16.6154C17.8781 16.4935 17.8037 16.3829 17.7099 16.2899L13.4099 11.9999Z" fill="black"/>
+</svg>