Import repositories from gitlab
This commit is contained in:
Julien Aldon
34
next/components/header/index.jsx
Normal file
34
next/components/header/index.jsx
Normal file
@@ -0,0 +1,34 @@
|
||||
import getData from '@/api';
|
||||
import NavigationDrawer from './navigationDrawer';
|
||||
|
||||
export default async function Header() {
|
||||
const site = await getData('site', {
|
||||
populate: {
|
||||
edition: {
|
||||
fields: [],
|
||||
populate: {
|
||||
programs: {
|
||||
fields: ['type', 'title'],
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
const editionId = site.data?.attributes.edition.data?.id;
|
||||
const programs = editionId ? site.data.attributes.edition.data.attributes.programs.data : null
|
||||
const socialLinkQuery = editionId ? {
|
||||
filters: {
|
||||
$or: [
|
||||
{ edition: { id: { $null: true } } },
|
||||
{ edition: { id: { $eq: editionId } } },
|
||||
]
|
||||
}
|
||||
} : {
|
||||
filters: { edition: { id: { $null: true } } },
|
||||
}
|
||||
const socialLinks = await getData('social-links', socialLinkQuery)
|
||||
const links = socialLinks.data ?? []
|
||||
return (
|
||||
<NavigationDrawer programs={programs} links={links}/>
|
||||
);
|
||||
}
|
||||
46
next/components/header/navigationDrawer/index.jsx
Normal file
46
next/components/header/navigationDrawer/index.jsx
Normal file
@@ -0,0 +1,46 @@
|
||||
"use client";
|
||||
import Link from "next/link";
|
||||
import SocialIcon from "../social-icon";
|
||||
import { useState } from "react";
|
||||
import styles from "./style.module.scss";
|
||||
|
||||
export default function NavigationDrawer({programs, links , ...props}) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const toggleDrawer = () => {
|
||||
setIsOpen(prev => !prev);
|
||||
}
|
||||
|
||||
return (
|
||||
<header className={`${styles.header} ${isOpen ? styles.drawerOpen : ""}`}>
|
||||
<div className={`${styles.backdrop}`} onClick={toggleDrawer}/>
|
||||
<button className={`${styles.social} ${styles.burgerIcon}`} onClick={toggleDrawer}>
|
||||
<svg className={`feather feather-menu`} xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#1B519E" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
|
||||
</button>
|
||||
<Link href="/" className={`not-a-link ${styles.logo}`}>
|
||||
<img src="/fefan.png" alt="Fefan" />
|
||||
<h1>Festival de fanfare</h1>
|
||||
</Link>
|
||||
<a className={`${styles.social} ${styles.programIcon}`} href="/prog/city-wide">
|
||||
<svg className={`feather feather-calendar`} xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#1B519E" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
|
||||
</a>
|
||||
<nav className={`${styles.navigation}`}>
|
||||
<div className={styles.spacer} />
|
||||
<Link href="/">Accueil</Link>
|
||||
{programs ? programs.map(({ id, attributes: attr }) => (
|
||||
<Link href={`/prog/${attr.type}`} key={id}>{attr.title}</Link>
|
||||
)): null}
|
||||
<Link href="/editions">Éditions précédentes</Link>
|
||||
<Link href="/contact">Contact</Link>
|
||||
<div className={styles.spacer} />
|
||||
<nav className={styles.socialLinks}>
|
||||
{links.map(({ id, attributes: attr }) => (
|
||||
<Link aria-label={attr.type} target="_blank" href={attr.uri} key={id} className={`${styles.social} not-a-link`}>
|
||||
<SocialIcon name={attr.type} />
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
</nav>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
156
next/components/header/navigationDrawer/style.module.scss
Normal file
156
next/components/header/navigationDrawer/style.module.scss
Normal file
@@ -0,0 +1,156 @@
|
||||
.header {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 200;
|
||||
flex-flow: row;
|
||||
border-bottom: var(--fg-3) solid var(--border-width);
|
||||
background: var(--bg-0);
|
||||
}
|
||||
|
||||
.header + * {
|
||||
margin-top: calc(5rem + var(--border-width));
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
margin: 0.5rem 1rem;
|
||||
flex-flow: column;
|
||||
text-decoration: none;
|
||||
text-align: right;
|
||||
color: var(--fefan-4);
|
||||
|
||||
h1 {
|
||||
font-family: var(--font-details);
|
||||
font-weight: 500;
|
||||
font-size: 0.75rem;
|
||||
margin: -0.10rem 0.35rem;
|
||||
}
|
||||
|
||||
img:first-child {
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.social {
|
||||
appearance: none;
|
||||
border: none;
|
||||
background: unset;
|
||||
font-size: unset;
|
||||
margin: 0;
|
||||
border-radius: 100%;
|
||||
padding: 0.5rem;
|
||||
text-decoration: none;
|
||||
color: var(--fefan-1);
|
||||
display: flex;
|
||||
align-self: center;
|
||||
justify-content: center;
|
||||
box-shadow: inset 0 0 6px 3px var(--background);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.spacer:first-of-type {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
a {
|
||||
margin: 0 0.35rem;
|
||||
}
|
||||
|
||||
.socialLinks {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin-right: 1rem;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.backdrop {
|
||||
position: fixed;
|
||||
content: '';
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 100vh;
|
||||
z-index: 250;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.burgerIcon {
|
||||
display: none;
|
||||
align-self: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.drawerOpen .navigation {
|
||||
left: 0%;
|
||||
}
|
||||
|
||||
.drawerOpen .backdrop {
|
||||
bottom: 0vh;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.programIcon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 992px) {
|
||||
.header {
|
||||
justify-content: space-between;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
.burgerIcon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.programIcon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
padding: 1rem 0;
|
||||
flex-flow: column;
|
||||
position: fixed;
|
||||
z-index: 300;
|
||||
align-items: stretch;
|
||||
top: 0;
|
||||
max-width: 80vw;
|
||||
width: 20rem;
|
||||
left: -100%;
|
||||
bottom: 0;
|
||||
background: var(--bg-0);
|
||||
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.25);
|
||||
transition: all 0.2s ease;
|
||||
|
||||
a {
|
||||
padding: 0.5rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.spacer:first-of-type {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.socialLinks {
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
|
||||
.drawerOpen {
|
||||
left: 0%;
|
||||
}
|
||||
}
|
||||
38
next/components/header/social-icon/index.jsx
Normal file
38
next/components/header/social-icon/index.jsx
Normal file
@@ -0,0 +1,38 @@
|
||||
export default function SocialIcon(props) {
|
||||
if (props.name === 'youtube')
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="36" height="36" viewBox="0 0 24 24"
|
||||
fill="none" stroke="currentColor"
|
||||
strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"
|
||||
>
|
||||
<path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z" />
|
||||
<polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02" />
|
||||
</svg>
|
||||
);
|
||||
else if (props.name === 'instagram')
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="36" height="36" viewBox="0 0 24 24"
|
||||
fill="none" stroke="currentColor"
|
||||
strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"
|
||||
>
|
||||
<rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
|
||||
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
|
||||
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
|
||||
</svg>
|
||||
);
|
||||
else if (props.name === 'facebook')
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="36" height="36" viewBox="0 0 24 24"
|
||||
fill="none" stroke="currentColor"
|
||||
strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"
|
||||
>
|
||||
<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
0
next/components/header/style.module.scss
Normal file
0
next/components/header/style.module.scss
Normal file
Reference in New Issue
Block a user