Fixed header auth
This commit is contained in:
parent
ce2342ff5d
commit
fd3ff67915
@ -1,5 +1,7 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
|
import userIcon from "../../images/userIcon.png";
|
||||||
|
|
||||||
import "./authHeader.scss";
|
import "./authHeader.scss";
|
||||||
|
|
||||||
export const AuthHeader = ({}) => {
|
export const AuthHeader = ({}) => {
|
||||||
@ -8,7 +10,27 @@ export const AuthHeader = ({}) => {
|
|||||||
<div className="auth-header__logo">
|
<div className="auth-header__logo">
|
||||||
<h3>itguild.</h3>
|
<h3>itguild.</h3>
|
||||||
</div>
|
</div>
|
||||||
<div className="auth-header__navigation"></div>
|
<div className="auth-header__navigation">
|
||||||
|
<div className="container">
|
||||||
|
<div className="auth-nav">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="#">Главная</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#">Кабинет разработчика</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#">Школа</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<a href="#">
|
||||||
|
<img src={userIcon}></img>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -0,0 +1,53 @@
|
|||||||
|
.auth-header {
|
||||||
|
background-color: #f1f1f1;
|
||||||
|
|
||||||
|
&__logo {
|
||||||
|
padding: 0 0 0 160px;
|
||||||
|
height: 55px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 32px;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__navigation {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 66px;
|
||||||
|
width: 100%;
|
||||||
|
background: #ffffff;
|
||||||
|
|
||||||
|
.auth-nav {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
display: flex;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin-right: 25px;
|
||||||
|
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 32px;
|
||||||
|
|
||||||
|
a,
|
||||||
|
a:hover {
|
||||||
|
color: #897676;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:focus {
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
BIN
src/images/userIcon.png
Normal file
BIN
src/images/userIcon.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 499 B |
@ -16,6 +16,7 @@ import { Footer } from "../../components/Footer/Footer";
|
|||||||
import SideBar from "../../components/SideBar/SideBar";
|
import SideBar from "../../components/SideBar/SideBar";
|
||||||
|
|
||||||
import "./authForDevelopers.scss";
|
import "./authForDevelopers.scss";
|
||||||
|
import AuthHeader from "../../components/AuthHeader/AuthHeader";
|
||||||
|
|
||||||
const AuthForDevelopers = () => {
|
const AuthForDevelopers = () => {
|
||||||
const isAuth = useSelector(selectAuth);
|
const isAuth = useSelector(selectAuth);
|
||||||
@ -30,6 +31,7 @@ const AuthForDevelopers = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="auth-developers">
|
<section className="auth-developers">
|
||||||
|
<AuthHeader />
|
||||||
<div className="auth-developers__background">
|
<div className="auth-developers__background">
|
||||||
<img className="auth-developers__vector" src={vector} alt="" />
|
<img className="auth-developers__vector" src={vector} alt="" />
|
||||||
<img
|
<img
|
||||||
|
@ -14,6 +14,7 @@ import { AuthBox } from "../../components/AuthBox/AuthBox";
|
|||||||
|
|
||||||
import "./authForPartners.scss";
|
import "./authForPartners.scss";
|
||||||
import SideBar from "../../components/SideBar/SideBar";
|
import SideBar from "../../components/SideBar/SideBar";
|
||||||
|
import AuthHeader from "../../components/AuthHeader/AuthHeader";
|
||||||
|
|
||||||
const AuthForPartners = () => {
|
const AuthForPartners = () => {
|
||||||
const isAuth = useSelector(selectAuth);
|
const isAuth = useSelector(selectAuth);
|
||||||
@ -29,6 +30,7 @@ const AuthForPartners = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="auth-partners">
|
<section className="auth-partners">
|
||||||
|
<AuthHeader />
|
||||||
<div className="auth-partners__background">
|
<div className="auth-partners__background">
|
||||||
<img className="auth-partners__vector" src={vector} alt="" />
|
<img className="auth-partners__vector" src={vector} alt="" />
|
||||||
<img className="auth-partners__vector-black" src={vectorBlack} alt="" />
|
<img className="auth-partners__vector-black" src={vectorBlack} alt="" />
|
||||||
|
Loading…
Reference in New Issue
Block a user