mirror of
https://github.com/IgnatZakalinsky/home-works.git
synced 2025-12-18 04:39:24 +00:00
hw5 add page name to header
This commit is contained in:
@@ -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 {
|
||||||
|
|||||||
@@ -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;
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user