diff --git a/src/index.css b/src/index.css index 49776bb..fe5e20d 100644 --- a/src/index.css +++ b/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 { diff --git a/src/s1-main/App.module.css b/src/s1-main/App.module.css index 2f8034e..a672827 100644 --- a/src/s1-main/App.module.css +++ b/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 { diff --git a/src/s1-main/App.tsx b/src/s1-main/App.tsx index fc9b704..5d2671c 100644 --- a/src/s1-main/App.tsx +++ b/src/s1-main/App.tsx @@ -23,9 +23,9 @@ const App = () => { {/**/} {/**/} {/**/} - + {/**/} - {/**/} + ) } diff --git a/src/s2-homeworks/hw05/HW5.tsx b/src/s2-homeworks/hw05/HW5.tsx index 6aa155c..b8e5456 100644 --- a/src/s2-homeworks/hw05/HW5.tsx +++ b/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 ( -
+ {/*в gh-pages лучше работает HashRouter*/} - - -
- - - - -
+ + + + ) } diff --git a/src/s2-homeworks/hw05/Header.module.css b/src/s2-homeworks/hw05/Header.module.css deleted file mode 100644 index 87d0be7..0000000 --- a/src/s2-homeworks/hw05/Header.module.css +++ /dev/null @@ -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); -} \ No newline at end of file diff --git a/src/s2-homeworks/hw05/Header.tsx b/src/s2-homeworks/hw05/Header.tsx deleted file mode 100644 index c3ef5dd..0000000 --- a/src/s2-homeworks/hw05/Header.tsx +++ /dev/null @@ -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 ( -
- {isShow && ( -
- isActive ? s.active : s.link} // делает студент - > - pre-junior - - isActive ? s.active : s.link} // делает студент - > - junior - - isActive ? s.active : s.link} // делает студент - > - junior+ - -
- )} - -
setShow(!isShow)}/> -
- ) -} - -export default Header diff --git a/src/s2-homeworks/hw05/header/Header.module.css b/src/s2-homeworks/hw05/header/Header.module.css new file mode 100644 index 0000000..66d6719 --- /dev/null +++ b/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%; +} diff --git a/src/s2-homeworks/hw05/header/Header.tsx b/src/s2-homeworks/hw05/header/Header.tsx new file mode 100644 index 0000000..0821875 --- /dev/null +++ b/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 = ({open, handleOpen}) => { + + // hw5-menu изначально отсутствует, при нажатии на бургер - появляется, при повторном нажатии исчезает + return ( + <> +
+ {'open + +
+ + + ) +} + diff --git a/src/s2-homeworks/hw05/header/burger.svg b/src/s2-homeworks/hw05/header/burger.svg new file mode 100644 index 0000000..afaa906 --- /dev/null +++ b/src/s2-homeworks/hw05/header/burger.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/s2-homeworks/hw05/layout/Layout.tsx b/src/s2-homeworks/hw05/layout/Layout.tsx new file mode 100644 index 0000000..e09bda8 --- /dev/null +++ b/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 = ({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 ( + <> + +
+ {children} + + + ) +} + diff --git a/src/s2-homeworks/hw05/pages/Error404.module.css b/src/s2-homeworks/hw05/pages/Error404.module.css new file mode 100644 index 0000000..a419b33 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/s2-homeworks/hw05/pages/Error404.tsx b/src/s2-homeworks/hw05/pages/Error404.tsx index 49a0dc3..d147323 100644 --- a/src/s2-homeworks/hw05/pages/Error404.tsx +++ b/src/s2-homeworks/hw05/pages/Error404.tsx @@ -1,11 +1,12 @@ import React from 'react' +import s from './Error404.module.css' const Error404 = () => { return (
-
404
-
Page not found!
-
—ฅ/ᐠ.̫ .ᐟ\ฅ—
+
+ 404 +
) } diff --git a/src/s2-homeworks/hw05/pages/PreJunior.tsx b/src/s2-homeworks/hw05/pages/PreJunior.tsx index 7a16ee5..ff8eac3 100644 --- a/src/s2-homeworks/hw05/pages/PreJunior.tsx +++ b/src/s2-homeworks/hw05/pages/PreJunior.tsx @@ -7,7 +7,7 @@ import HW4 from '../../hw04/HW4' function PreJunior() { return (
- pre junior page + {/*pre junior page*/} diff --git a/src/s2-homeworks/hw05/sidebar/Sidebar.module.css b/src/s2-homeworks/hw05/sidebar/Sidebar.module.css new file mode 100644 index 0000000..33cc5ea --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/s2-homeworks/hw05/sidebar/Sidebar.tsx b/src/s2-homeworks/hw05/sidebar/Sidebar.tsx new file mode 100644 index 0000000..087bac8 --- /dev/null +++ b/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 = ({open, handleClose}) => { + return ( + <> + {open &&
} + + + ) +} + diff --git a/src/s2-homeworks/hw05/sidebar/closeOutline.svg b/src/s2-homeworks/hw05/sidebar/closeOutline.svg new file mode 100644 index 0000000..f368ff6 --- /dev/null +++ b/src/s2-homeworks/hw05/sidebar/closeOutline.svg @@ -0,0 +1,3 @@ + + +