mirror of
https://github.com/ArthurDanjou/arthurdanjou.fr.git
synced 2026-02-01 12:37:49 +01:00
Initial commit 🚀
This commit is contained in:
18
components/header/activelink/activelink.js
Normal file
18
components/header/activelink/activelink.js
Normal file
@@ -0,0 +1,18 @@
|
||||
import { withRouter } from 'next/router'
|
||||
import Link from 'next/link'
|
||||
import React, { Children } from 'react'
|
||||
|
||||
const ActiveLink = ({ router, children, ...props }) => {
|
||||
const child = Children.only(children)
|
||||
|
||||
let className = child.props.className || null
|
||||
if (router.pathname === props.href && props.activeClassName) {
|
||||
className = `${className !== null ? className : ''} ${props.activeClassName}`.trim()
|
||||
}
|
||||
|
||||
delete props.activeClassName
|
||||
|
||||
return <Link {...props}>{React.cloneElement(child, { className })}</Link>
|
||||
}
|
||||
|
||||
export default withRouter(ActiveLink)
|
||||
83
components/header/header.js
Normal file
83
components/header/header.js
Normal file
@@ -0,0 +1,83 @@
|
||||
import React, {useState} from 'react';
|
||||
import Link from "next/link";
|
||||
import "./header.scss";
|
||||
import ActiveLink from "./activelink/activelink";
|
||||
|
||||
const Header = () => {
|
||||
|
||||
const [isOpened, setOpened] = useState(false);
|
||||
const [isActive, setActive] = useState(false);
|
||||
|
||||
return (
|
||||
<header id="header">
|
||||
<div className={isActive ? "active logo" : "logo"} >
|
||||
LOGO
|
||||
</div>
|
||||
<div className={isOpened ? "opened cross" : "cross"} onClick={() => setOpened(!isOpened)}/>
|
||||
|
||||
<div className={isOpened ? "opened menu" : "menu"} >
|
||||
<div className="menu-top">
|
||||
<div className="pages-link">
|
||||
<div className="title">
|
||||
Mes Pages
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<ActiveLink href="/" activeClassName="active">
|
||||
<a>Accueil</a>
|
||||
</ActiveLink>
|
||||
</li>
|
||||
<li>
|
||||
<ActiveLink href="/blog" activeClassName="active">
|
||||
<a>Mon blog</a>
|
||||
</ActiveLink>
|
||||
</li>
|
||||
<li>
|
||||
<ActiveLink href="/about" activeClassName="active">
|
||||
<a>A propos</a>
|
||||
</ActiveLink>
|
||||
</li>
|
||||
<li>
|
||||
<ActiveLink href="/env" activeClassName="active">
|
||||
<a>Mon environnement</a>
|
||||
</ActiveLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="contact-link">
|
||||
<div className="title">
|
||||
Les autres
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/resume">
|
||||
<a>Résumé</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/cli">
|
||||
<a>Console</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="menu-bottom">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="mailto:arthurdanjou@outlook.fr" target='_blank'>Mail</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/ArthurDanjou" target="_blank">Github</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://twitter.com/ArthurDanj" target="_blank">Twitter</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
};
|
||||
|
||||
export default Header;
|
||||
212
components/header/header.scss
Normal file
212
components/header/header.scss
Normal file
@@ -0,0 +1,212 @@
|
||||
$cross-closed: black;
|
||||
$cross-opened: red;
|
||||
$menu-background: #111111;
|
||||
$menu-color: white;
|
||||
$hover-color: rgba(205, 205, 205, 0.3);
|
||||
|
||||
#header {
|
||||
z-index: 100;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/*@media screen and (max-width: 700px) {
|
||||
height: 80px;
|
||||
width: 100%;
|
||||
background-color: rgba(54, 54, 54, 0.95);
|
||||
}*/
|
||||
|
||||
.logo {
|
||||
z-index: 100;
|
||||
position: fixed;
|
||||
top: 5%;
|
||||
left: 5%;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
top: 1%;
|
||||
}
|
||||
|
||||
.active {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.cross {
|
||||
z-index: 100;
|
||||
position: fixed;
|
||||
top: 5%;
|
||||
right: 5%;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
line-height: 20px;
|
||||
cursor: pointer;
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
top: 1%;
|
||||
}
|
||||
|
||||
&:active::before, &:active::after {
|
||||
transform: scale(0.85);
|
||||
}
|
||||
|
||||
&:before, &:after {
|
||||
position: absolute;
|
||||
transition: transform .3s;
|
||||
display: block;
|
||||
content: "";
|
||||
height: 5px;
|
||||
width: 100%;
|
||||
background-color: $cross-closed;
|
||||
}
|
||||
|
||||
&:before {
|
||||
top: 22px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
bottom: 22px;
|
||||
right: 0;
|
||||
width: 65%;
|
||||
}
|
||||
|
||||
&.opened {
|
||||
&:before, &:after {
|
||||
width: 100%;
|
||||
background-color: $cross-opened;
|
||||
}
|
||||
|
||||
&:before {
|
||||
top: 30px;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
&:after {
|
||||
bottom: 30px;
|
||||
left: 0;
|
||||
transform: rotate(45deg);
|
||||
box-shadow: 0 0 0 4px $menu-background, 0 0 12px 8px $menu-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
user-select: none;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
right: 4.5%;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
transition: opacity .3s;
|
||||
padding: 25px;
|
||||
border-radius: 5px;
|
||||
|
||||
a {
|
||||
padding: 2px 3px;
|
||||
box-shadow: inset 0 -10px 0 $hover-color;
|
||||
transition: box-shadow 0.2s ease-in-out;
|
||||
&:hover {
|
||||
box-shadow: inset 0 -100px 0 $hover-color;
|
||||
}
|
||||
&.active {
|
||||
box-shadow: inset 0 -100px 0 rgba(184, 184, 184, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.menu-top {
|
||||
margin-top: 40px;
|
||||
.pages-link {
|
||||
transition: transform .6s;
|
||||
transform: translateY(60px);
|
||||
.title {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
}
|
||||
li {
|
||||
font-size: 20px;
|
||||
padding: 7px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-link {
|
||||
margin-top: 40px;
|
||||
transition: transform .7s;
|
||||
transform: translateY(60px);
|
||||
|
||||
.title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
li {
|
||||
font-size: 18px;
|
||||
padding: 7px 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-bottom {
|
||||
margin-top: 50px;
|
||||
transition: transform .8s;
|
||||
transform: translateY(60px);
|
||||
border-top: solid 1px $menu-color;
|
||||
|
||||
ul {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-evenly;
|
||||
|
||||
li {
|
||||
padding: 3px 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.opened {
|
||||
z-index: 99;
|
||||
height: 500px;
|
||||
width: 350px;
|
||||
color: $menu-color;
|
||||
background-color: $menu-background;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
border-radius: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 150vh;
|
||||
}
|
||||
|
||||
.menu-top {
|
||||
.pages-link {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.contact-link {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.menu-bottom {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user