ershisan99/home-works
1
0
Fork 0
mirror of https://github.com/IgnatZakalinsky/home-works.git synced 2025-12-16 20:39:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

final ref hw5

Browse Source
This commit is contained in:
neko
2022-09-15 14:51:07 +03:00
parent 3107511031
commit 6380529923
11 changed files with 105 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/s1-main/App.module.css
View File

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

13
src/s1-main/App.tsx
View File

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

8
src/s2-homeworks/hw05/HW5.tsx
View File

@@ -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>

6
src/s2-homeworks/hw05/Pages.tsx
View File

@@ -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>

21
src/s2-homeworks/hw05/header/Header.module.css
View File

@@ -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;
}

19
src/s2-homeworks/hw05/header/Header.tsx
View File

@@ -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<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'
: currentPath === PATH.JUNIOR_PLUS
? 'Junior Plus'
: 'Error'
? 'Junior'
: currentPath === PATH.JUNIOR_PLUS
? 'Junior Plus'
: 'Error'
return (
<>
<div id={'hw5-header'} className={s.header}>

8
src/s2-homeworks/hw05/layout/Layout.tsx
View File

@@ -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>
</>
)
}

16
src/s2-homeworks/hw05/pages/Junior.tsx
View File

@@ -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 (
<div id={'hw5-page-junior'}>
<HW6 />
<HW7 />
<HW8 />
<HW9 />
{/*<HW6 />*/}
{/*<HW7 />*/}
{/*<HW8 />*/}
{/*<HW9 />*/}
</div>
)
}

16
src/s2-homeworks/hw05/pages/JuniorPlus.tsx
View File

@@ -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 (
<div id={'hw5-page-junior-plus'}>
<HW10 />
<HW11 />
<HW12 />
<HW13 />
{/*<HW10 />*/}
{/*<HW11 />*/}
{/*<HW12 />*/}
{/*<HW13 />*/}
</div>
)
}

53
src/s2-homeworks/hw05/sidebar/Sidebar.module.css
View File

@@ -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 {

24
src/s2-homeworks/hw05/sidebar/Sidebar.tsx
View File

@@ -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<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>