frontend: Mise en place de NextJS
This commit is contained in:
Divlo
7
frontend/components/Footer/Footer.js
Normal file
7
frontend/components/Footer/Footer.js
Normal file
@ -0,0 +1,7 @@
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer>
|
||||
Footer
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
34
frontend/components/HeadTag.js
Normal file
34
frontend/components/HeadTag.js
Normal file
@ -0,0 +1,34 @@
|
||||
import Head from 'next/head';
|
||||
|
||||
const HeadTag = (props) => (
|
||||
<Head>
|
||||
<title>{props.title}</title>
|
||||
<link rel="icon" type="image/png" href={props.image} />
|
||||
|
||||
{/* Meta Tag */}
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content={props.description} />
|
||||
<link rel="canonical" href="function.divlo.fr"/>
|
||||
<meta name="Language" content="fr" />
|
||||
<meta name="theme-color" content="#ffd800" />
|
||||
|
||||
{/* Open Graph Metadata */}
|
||||
<meta property="og:title" content={props.title} />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://function.divlo.fr/" />
|
||||
<meta property="og:image" content={props.image} />
|
||||
<meta property="og:description" content={props.description} />
|
||||
<meta property="og:locale" content="fr_FR" />
|
||||
<meta property="og:site_name" content="FunctionProject" />
|
||||
|
||||
{/* Twitter card Metadata */}
|
||||
<meta name="twitter:card" content="summary" />
|
||||
<meta name="twitter:description" content={props.description} />
|
||||
<meta name="twitter:title" content={props.title} />
|
||||
<meta name="twitter:site" content="@Divlo_FR" />
|
||||
<meta name="twitter:image:src" content={props.image} />
|
||||
<meta name="twitter:creator" content="@Divlo_FR" />
|
||||
</Head>
|
||||
);
|
||||
|
||||
export default HeadTag;
|
||||
161
frontend/components/Header/Header.css
Normal file
161
frontend/components/Header/Header.css
Normal file
@ -0,0 +1,161 @@
|
||||
/* HEADER */
|
||||
.Header {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: .5rem 1rem;
|
||||
|
||||
border-bottom: var(--border-header-footer);
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.Header {
|
||||
flex-flow: row nowrap;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
.Header > .container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.Header > .container {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
/* Brand */
|
||||
.Header__brand-link {
|
||||
display: inline-block;
|
||||
padding-top: .3125rem;
|
||||
padding-bottom: .3125rem;
|
||||
margin-right: 1rem;
|
||||
font-size: 1.25rem;
|
||||
line-height: inherit;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#brand-link__logo-small-screen {
|
||||
display: none;
|
||||
}
|
||||
@media (max-width: 496px) {
|
||||
#brand-link__logo {
|
||||
display: none;
|
||||
}
|
||||
.Header__brand-link {
|
||||
width: 30%;
|
||||
}
|
||||
#brand-link__logo-small-screen {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.Header .Header__navbar {
|
||||
display: flex;
|
||||
flex-basis: auto;
|
||||
}
|
||||
}
|
||||
.Header__navbar {
|
||||
flex-basis: 100%;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
}
|
||||
.navbar__list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-left: auto;
|
||||
}
|
||||
.navbar__list.navbar__list-active {
|
||||
margin: 0 !important;
|
||||
display: flex;
|
||||
}
|
||||
@media (max-width: 992px) {
|
||||
.navbar__list {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
.navbar-link {
|
||||
display: block;
|
||||
padding: .5rem 1rem;
|
||||
}
|
||||
|
||||
/* Details Styling */
|
||||
.navbar-link:hover {
|
||||
text-decoration: none;
|
||||
color: rgba(255, 255, 255, .75);
|
||||
}
|
||||
.navbar-link, .navbar-link-active {
|
||||
color: rgba(255, 255, 255, .5);
|
||||
}
|
||||
.navbar-link-active, .navbar-link-active:hover, .Header__brand-link {
|
||||
color: var(--text-color);
|
||||
}
|
||||
.navbar-item {
|
||||
list-style: none;
|
||||
}
|
||||
.navbar-link {
|
||||
font-size: 16px;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
/* Hamburger Icon */
|
||||
.Header__hamburger {
|
||||
display: none;
|
||||
width: 56px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
border: 1px solid rgba(255, 255, 255, .1);
|
||||
border-radius: .25rem;
|
||||
position: relative;
|
||||
}
|
||||
.Header__hamburger > span, .Header__hamburger > span::before, .Header__hamburger > span::after {
|
||||
position: absolute;
|
||||
width: 22px;
|
||||
height: 1.3px;
|
||||
background-color: rgba(255, 255, 255);
|
||||
}
|
||||
.Header__hamburger > span {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: background-color .3s ease-in-out;
|
||||
}
|
||||
.Header__hamburger > span::before, .Header__hamburger > span::after {
|
||||
content: '';
|
||||
transition: transform .3s ease-in-out;
|
||||
}
|
||||
.Header__hamburger > span::before {
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
.Header__hamburger > span::after {
|
||||
transform: translateY(8px);
|
||||
}
|
||||
.Header__hamburger-active span {
|
||||
background-color: transparent;
|
||||
}
|
||||
.Header__hamburger-active > span::before {
|
||||
transform: translateY(0px) rotateZ(45deg);
|
||||
}
|
||||
.Header__hamburger-active > span::after {
|
||||
transform: translateY(0px) rotateZ(-45deg);
|
||||
}
|
||||
/* Apparition du hamburger */
|
||||
@media (max-width: 992px) {
|
||||
.Header__hamburger {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
48
frontend/components/Header/Header.js
Normal file
48
frontend/components/Header/Header.js
Normal file
@ -0,0 +1,48 @@
|
||||
import { useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import NavigationLink from './NavigationLink';
|
||||
import './Header.css';
|
||||
|
||||
export default function Header() {
|
||||
|
||||
const [hamburgerIcon, setHamburgerIcon] = useState("");
|
||||
const [navbarList, setNavbarList] = useState("");
|
||||
|
||||
const toggleNavbar = () => {
|
||||
if (hamburgerIcon) {
|
||||
setHamburgerIcon("");
|
||||
setNavbarList("");
|
||||
} else {
|
||||
setHamburgerIcon("Header__hamburger-active");
|
||||
setNavbarList("navbar__list-active");
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<header className="Header">
|
||||
<div className="container">
|
||||
|
||||
{/* Brand */}
|
||||
<Link href={"/"}>
|
||||
<a className="Header__brand-link">
|
||||
<img id="brand-link__logo" src="/images/FunctionProject_brand-logo.png" alt="FunctionProject" />
|
||||
<img id="brand-link__logo-small-screen" src="/images/FunctionProject_icon_small.png" alt="FunctionProject" />
|
||||
</a>
|
||||
</Link>
|
||||
|
||||
{/* Hamburger icon on Mobile */}
|
||||
<div onClick={toggleNavbar} className={"Header__hamburger " + hamburgerIcon}>
|
||||
<span></span>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="Header__navbar">
|
||||
<ul className={"navbar__list " + navbarList}>
|
||||
<NavigationLink name="Accueil" path="/" />
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
18
frontend/components/Header/NavigationLink.js
Normal file
18
frontend/components/Header/NavigationLink.js
Normal file
@ -0,0 +1,18 @@
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/router';
|
||||
import './Header.css';
|
||||
|
||||
export default function NavigationLink(props) {
|
||||
|
||||
const { pathname } = useRouter();
|
||||
|
||||
return (
|
||||
<li className="navbar-item">
|
||||
<Link href={props.path}>
|
||||
<a className={`navbar-link ${pathname === props.path ? "navbar-link-active" : null}`}>
|
||||
{props.name}
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
22
frontend/components/Layout.js
Normal file
22
frontend/components/Layout.js
Normal file
@ -0,0 +1,22 @@
|
||||
/* Libraries Imports */
|
||||
import { Fragment } from 'react';
|
||||
|
||||
/* Components Imports */
|
||||
import Header from './Header/Header';
|
||||
import Footer from './Footer/Footer';
|
||||
|
||||
/* CSS Imports */
|
||||
import '../public/fonts/Montserrat/Montserrat.css';
|
||||
import '../public/css/normalize.css';
|
||||
import '../public/css/grid.css';
|
||||
import '../public/css/general.css';
|
||||
|
||||
const Layout = (props) => (
|
||||
<Fragment>
|
||||
<Header />
|
||||
<div className="content container-fluid">{props.children}</div>
|
||||
<Footer />
|
||||
</Fragment>
|
||||
);
|
||||
|
||||
export default Layout;
|
||||
Reference in New Issue
Block a user