hw5 add page name to header

This commit is contained in:
2022-07-11 13:17:14 +02:00
parent dfab85da65
commit 046d91d330
4 changed files with 29 additions and 5 deletions

View File

@@ -70,6 +70,7 @@
margin-right: 20px; margin-right: 20px;
padding: 7px 25px 8px 13px; padding: 7px 25px 8px 13px;
border-radius: 10px; border-radius: 10px;
z-index: -1;
} }
.messageText:after { .messageText:after {
@@ -96,6 +97,7 @@
margin-left: 20px; margin-left: 20px;
padding: 7px 25px 8px 13px; padding: 7px 25px 8px 13px;
border-radius: 10px; border-radius: 10px;
z-index: -1;
} }
.friendMessageText:after { .friendMessageText:after {

View File

@@ -9,9 +9,19 @@
background: #fff; background: #fff;
box-shadow: 0 0 40px rgba(29, 33, 38, 0.13), 0 0 2px rgba(29, 33, 38, 0.1); box-shadow: 0 0 40px rgba(29, 33, 38, 0.13), 0 0 2px rgba(29, 33, 38, 0.1);
display: flex; display: flex;
justify-content: space-between;
height: var(--header_height); height: var(--header_height);
padding: 0 70px; padding: 0 70px;
position: sticky; position: sticky;
top: 0; top: 0;
width: 100%; width: 100%;
} }
.header h1 {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 24px;
line-height: 29px;
color: #000000;
}

View File

@@ -1,14 +1,25 @@
import React, { FC } from 'react' import React, { FC } from 'react'
import burgerIcon from './burger.svg' import burgerIcon from './burger.svg'
import s from './Header.module.css' import s from './Header.module.css'
import { useLocation } from 'react-router-dom'
import { PATH } from '../Pages'
type PropsType = { type PropsType = {
open: boolean
handleOpen: () => void handleOpen: () => void
} }
export const Header: FC<PropsType> = ({ open, handleOpen }) => { export const Header: FC<PropsType> = ({ handleOpen }) => {
// hw5-menu изначально отсутствует, при нажатии на бургер - появляется, при повторном нажатии исчезает // hw5-menu изначально отсутствует, при нажатии на бургер - появляется, при повторном нажатии исчезает
const location = useLocation()
const currentPath = location.pathname
const pageName =
currentPath === PATH.PRE_JUNIOR
? 'Pre Junior'
: currentPath === PATH.JUNIOR
? 'Junior'
: currentPath === PATH.JUNIOR_PLUS
? 'Junior Plus'
: 'Error'
return ( return (
<> <>
<div id={'hw5-header'} className={s.header}> <div id={'hw5-header'} className={s.header}>
@@ -19,6 +30,7 @@ export const Header: FC<PropsType> = ({ open, handleOpen }) => {
onClick={handleOpen} onClick={handleOpen}
alt={'open menu'} alt={'open menu'}
/> />
<h1>{pageName}</h1>
</div> </div>
</> </>
) )

View File

@@ -8,7 +8,7 @@
top: 0; top: 0;
transition: 0.2s ease-in; transition: 0.2s ease-in;
width: 317px; width: 317px;
z-index: 2; z-index: 20;
} }
.sidebar.open { .sidebar.open {
@@ -27,7 +27,7 @@
position: fixed; position: fixed;
right: 0; right: 0;
top: 0; top: 0;
z-index: 1; z-index: 10;
} }
.nav { .nav {
@@ -54,8 +54,8 @@
.nav a.active { .nav a.active {
color: #0059b2; color: #0059b2;
text-decoration: underline;
} }
.close { .close {
background-color: transparent; background-color: transparent;
border: none; border: none;