Gainburua CSS modules-era pasatzen du (#11)
* chore: CSS modules sartzen du * refactor: alergeno legenda CSS modules * refactor: css modules erabiltzen du * chore: datubasea berreskuratzen du * chore: kontaktu datuak aldatzen ditu * ignore: saltoa * feat: mugikor nabigazioa erakusten du * chore: mugikor nabigazioa pasatzen du * refactor: kontaktu datuak batzen ditu * fix: gezia konpontzen du * refactor: move component * refactor: move component * refactor: move component * fix: builda konpontzen du * chore: erabiltzen ez zen konponentea kentzen du * fix: hasiera eta kafetegia ez diren atalak konpontzen ditu * chore: react-responsive dependentzia kentzen du * chore: yarn.lock eguneratzen du * fix: kontsolako erroreak kentzen ditu
This commit is contained in:
Aitor Urrutia
GitHub
@@ -0,0 +1,53 @@
|
||||
@import '../../styles/tools/mediaQueries.scss';
|
||||
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-column-gap: var(--size-tiny);
|
||||
grid-row-gap: var(--size-base);
|
||||
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
|
||||
@media #{$fromTablet} {
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.izena {
|
||||
margin-bottom: var(--size-tiny);
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.zenbakia {
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
color: var(--color-morea);
|
||||
}
|
||||
|
||||
.alergenoWrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logoWrapper {
|
||||
margin-bottom: var(--size-mini);
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
|
||||
height: var(--size-medium);
|
||||
|
||||
@media #{$fromDesktop} {
|
||||
height: var(--size-huge);
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: var(--size-medium);
|
||||
|
||||
@media #{$fromDesktop} {
|
||||
height: var(--size-huge);
|
||||
}
|
||||
}
|
||||
@@ -1,26 +1,10 @@
|
||||
import React from 'react';
|
||||
|
||||
import { AlergenoIdentifikadorea } from '../../domain/models/AlergenoIdentifikadorea';
|
||||
import Esnekiak from './assets/alergenoak/esnekiak.svg';
|
||||
import Arrautzak from './assets/alergenoak/arrautzak.svg';
|
||||
import Glutena from './assets/alergenoak/glutena.svg';
|
||||
import Moluskuak from './assets/alergenoak/moluskuak.svg';
|
||||
import Krustazeoak from './assets/alergenoak/krustazeoak.svg';
|
||||
import Arraina from './assets/alergenoak/arraina.svg';
|
||||
import Lupinuak from './assets/alergenoak/lupinuak.svg';
|
||||
import FruituLehorrak from './assets/alergenoak/fruituLehorrak.svg';
|
||||
import Kakahueteak from './assets/alergenoak/kakahueteak.svg';
|
||||
import Sesamoa from './assets/alergenoak/sesamoa.svg';
|
||||
import Soja from './assets/alergenoak/soja.svg';
|
||||
import Sulfitoak from './assets/alergenoak/sulfitoak.svg';
|
||||
import Apioa from './assets/alergenoak/apioa.svg';
|
||||
import Ziapea from './assets/alergenoak/ziapea.svg';
|
||||
import styled from 'styled-components';
|
||||
import { rem } from 'polished';
|
||||
import { breakpoints, colors, fontWeight, media, size } from '../../ui/theme';
|
||||
import { mapAlergenoIdentifikadoreaToIzena } from '../../domain/mappers/mapAlergenoIdentifikadoreaToIzena';
|
||||
import { mapAlergenoIdentifikadoreaToZenbakia } from '../../domain/mappers/mapAlergenoIdentifikadoreaToZenbakia';
|
||||
import { useMediaQuery } from 'react-responsive';
|
||||
import { AlergenoIdentifikadorea } from '../../domain/models/AlergenoIdentifikadorea';
|
||||
import * as styles from './AlergenoLegenda.module.scss';
|
||||
import { AlergenoLogoa } from './AlergenoLogoa';
|
||||
|
||||
const alergenoakOrdenaturik: AlergenoIdentifikadorea[] = [
|
||||
'esnekiak',
|
||||
@@ -39,82 +23,23 @@ const alergenoakOrdenaturik: AlergenoIdentifikadorea[] = [
|
||||
'ziapea',
|
||||
];
|
||||
|
||||
export const AlergenoLegenda: React.VFC = () => {
|
||||
export const AlergenoLegenda: React.FC = () => {
|
||||
return (
|
||||
<Wrapper>
|
||||
<div className={styles.wrapper}>
|
||||
{alergenoakOrdenaturik.map(alergenoa => (
|
||||
<AlergenoWrapper>
|
||||
<LogoWrapper>
|
||||
<div className={styles.alergenoWrapper}>
|
||||
<div className={styles.logoWrapper}>
|
||||
<AlergenoLogoa alergenoId={alergenoa} />
|
||||
</LogoWrapper>
|
||||
</div>
|
||||
|
||||
<Izena>{mapAlergenoIdentifikadoreaToIzena(alergenoa)}</Izena>
|
||||
<Zenbakia>{mapAlergenoIdentifikadoreaToZenbakia(alergenoa)}</Zenbakia>
|
||||
</AlergenoWrapper>
|
||||
<div className={styles.izena}>
|
||||
{mapAlergenoIdentifikadoreaToIzena(alergenoa)}
|
||||
</div>
|
||||
<div className={styles.zenbakia}>
|
||||
{mapAlergenoIdentifikadoreaToZenbakia(alergenoa)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</Wrapper>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const Izena = styled.div`
|
||||
margin-bottom: ${rem(size.tiny)};
|
||||
font-weight: ${fontWeight.bold};
|
||||
text-align: center;
|
||||
`;
|
||||
|
||||
const Zenbakia = styled.div`
|
||||
font-weight: ${fontWeight.bold};
|
||||
text-align: center;
|
||||
color: ${colors.morea};
|
||||
`;
|
||||
|
||||
const AlergenoWrapper = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
`;
|
||||
|
||||
const Wrapper = styled.div`
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-column-gap: ${rem(size.tiny)};
|
||||
grid-row-gap: ${rem(size.base)};
|
||||
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
${media.tablet`
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
`};
|
||||
`;
|
||||
|
||||
const LogoWrapper = styled.div`
|
||||
margin-bottom: ${rem(size.mini)};
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
`;
|
||||
|
||||
const AlergenoLogoa: React.VFC<{ alergenoId: AlergenoIdentifikadorea }> = ({
|
||||
alergenoId,
|
||||
}) => {
|
||||
const isAboveDesktop = useMediaQuery({ minWidth: breakpoints.desktop });
|
||||
const height = rem(isAboveDesktop ? size.huge : size.medium);
|
||||
|
||||
const alergenoIdToLogo: { [id in AlergenoIdentifikadorea]: React.ReactNode } =
|
||||
{
|
||||
esnekiak: <Esnekiak height={height} />,
|
||||
arrautzak: <Arrautzak height={height} />,
|
||||
glutena: <Glutena height={height} />,
|
||||
moluskuak: <Moluskuak height={height} />,
|
||||
krustazeoak: <Krustazeoak height={height} />,
|
||||
arraina: <Arraina height={height} />,
|
||||
lupinuak: <Lupinuak height={height} />,
|
||||
fruituLehorrak: <FruituLehorrak height={height} />,
|
||||
kakahueteak: <Kakahueteak height={height} />,
|
||||
sesamoa: <Sesamoa height={height} />,
|
||||
soja: <Soja height={height} />,
|
||||
sulfitoak: <Sulfitoak height={height} />,
|
||||
apioa: <Apioa height={height} />,
|
||||
ziapea: <Ziapea height={height} />,
|
||||
};
|
||||
return <>{alergenoIdToLogo[alergenoId]}</>;
|
||||
};
|
||||
|
||||
43
front/src/components/AlergenoLegenda/AlergenoLogoa.tsx
Normal file
43
front/src/components/AlergenoLegenda/AlergenoLogoa.tsx
Normal file
@@ -0,0 +1,43 @@
|
||||
import React from 'react';
|
||||
|
||||
import { AlergenoIdentifikadorea } from '../../domain/models/AlergenoIdentifikadorea';
|
||||
import Apioa from './assets/alergenoak/apioa.svg';
|
||||
import Arraina from './assets/alergenoak/arraina.svg';
|
||||
import Arrautzak from './assets/alergenoak/arrautzak.svg';
|
||||
import Esnekiak from './assets/alergenoak/esnekiak.svg';
|
||||
import FruituLehorrak from './assets/alergenoak/fruituLehorrak.svg';
|
||||
import Glutena from './assets/alergenoak/glutena.svg';
|
||||
import Kakahueteak from './assets/alergenoak/kakahueteak.svg';
|
||||
import Krustazeoak from './assets/alergenoak/krustazeoak.svg';
|
||||
import Lupinuak from './assets/alergenoak/lupinuak.svg';
|
||||
import Moluskuak from './assets/alergenoak/moluskuak.svg';
|
||||
import Sesamoa from './assets/alergenoak/sesamoa.svg';
|
||||
import Soja from './assets/alergenoak/soja.svg';
|
||||
import Sulfitoak from './assets/alergenoak/sulfitoak.svg';
|
||||
import Ziapea from './assets/alergenoak/ziapea.svg';
|
||||
|
||||
interface Props {
|
||||
alergenoId: AlergenoIdentifikadorea;
|
||||
}
|
||||
|
||||
export const AlergenoLogoa: React.FC<Props> = ({ alergenoId }) => {
|
||||
const alergenoIdToLogo: {
|
||||
[id in AlergenoIdentifikadorea]: React.ReactNode;
|
||||
} = {
|
||||
esnekiak: <Esnekiak height="100%" />,
|
||||
arrautzak: <Arrautzak height="100%" />,
|
||||
glutena: <Glutena height="100%" />,
|
||||
moluskuak: <Moluskuak height="100%" />,
|
||||
krustazeoak: <Krustazeoak height="100%" />,
|
||||
arraina: <Arraina height="100%" />,
|
||||
lupinuak: <Lupinuak height="100%" />,
|
||||
fruituLehorrak: <FruituLehorrak height="100%" />,
|
||||
kakahueteak: <Kakahueteak height="100%" />,
|
||||
sesamoa: <Sesamoa height="100%" />,
|
||||
soja: <Soja height="100%" />,
|
||||
sulfitoak: <Sulfitoak height="100%" />,
|
||||
apioa: <Apioa height="100%" />,
|
||||
ziapea: <Ziapea height="100%" />,
|
||||
};
|
||||
return <>{alergenoIdToLogo[alergenoId]}</>;
|
||||
};
|
||||
1
front/src/components/Gainburua/AtalaName.ts
Normal file
1
front/src/components/Gainburua/AtalaName.ts
Normal file
@@ -0,0 +1 @@
|
||||
export type AtalaName = 'hasiera' | 'kafetegia';
|
||||
@@ -1,56 +0,0 @@
|
||||
import React from 'react';
|
||||
import styled, { css } from 'styled-components';
|
||||
import { rem } from 'polished';
|
||||
import { size } from '../../ui/theme';
|
||||
import { AtalaName } from './Gainburua';
|
||||
import { GainburuLink } from './GainburuLink';
|
||||
|
||||
interface Props {
|
||||
atala?: AtalaName;
|
||||
}
|
||||
|
||||
export const DesktopNabigazioa: React.FC<Props> = ({ atala }) => {
|
||||
return (
|
||||
<Nabigazioa>
|
||||
<EstekaZerrenda>
|
||||
<Esteka aktiboa={atala === 'hasiera'}>
|
||||
<GainburuLink to="/">Laba gara</GainburuLink>
|
||||
</Esteka>
|
||||
<Esteka aktiboa={atala === 'kafetegia'}>
|
||||
<GainburuLink to="/kafetegia">Dastatu Laba</GainburuLink>
|
||||
</Esteka>
|
||||
</EstekaZerrenda>
|
||||
</Nabigazioa>
|
||||
);
|
||||
};
|
||||
|
||||
export const Nabigazioa = styled.nav`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-bottom: ${rem(size.tiny)};
|
||||
`;
|
||||
|
||||
export const EstekaZerrenda = styled.ul`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
list-style-type: none;
|
||||
`;
|
||||
|
||||
export const Esteka = styled.li<{ aktiboa?: boolean }>`
|
||||
padding: ${rem(size.small)};
|
||||
|
||||
color: var(--color);
|
||||
|
||||
${({ aktiboa }) =>
|
||||
aktiboa
|
||||
? css`
|
||||
border-bottom: 3px solid var(--color);
|
||||
`
|
||||
: css`
|
||||
transition: color 0.4s ease;
|
||||
|
||||
&:hover {
|
||||
color: var(--hover-color);
|
||||
}
|
||||
`}
|
||||
`;
|
||||
@@ -1,8 +0,0 @@
|
||||
import { Link } from 'gatsby';
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const GainburuLink = styled(Link)`
|
||||
&:focus {
|
||||
outline: 3px solid var(--hover-color);
|
||||
}
|
||||
`;
|
||||
216
front/src/components/Gainburua/Gainburua.module.scss
Normal file
216
front/src/components/Gainburua/Gainburua.module.scss
Normal file
@@ -0,0 +1,216 @@
|
||||
@import '../../styles/tools/mediaQueries.scss';
|
||||
@import '../../styles/tools/mixins/font.scss';
|
||||
@import '../../styles/tools/mixins/container.scss';
|
||||
|
||||
.geziaWrapper {
|
||||
display: none;
|
||||
|
||||
@media #{$fromDesktop} {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.geziaLogo {
|
||||
cursor: pointer;
|
||||
path {
|
||||
transition: fill 0.4s ease;
|
||||
fill: var(--color);
|
||||
}
|
||||
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-name: bounce-2;
|
||||
animation-timing-function: ease;
|
||||
|
||||
@keyframes bounce-2 {
|
||||
0% {
|
||||
transform: rotate(90deg) translateX(0);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(90deg) translateX(var(--size-base));
|
||||
}
|
||||
100% {
|
||||
transform: rotate(90deg) translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
path {
|
||||
fill: var(--hover-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nagusia {
|
||||
flex-grow: 1;
|
||||
@include container;
|
||||
}
|
||||
|
||||
.mugikorWrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
padding-top: var(--size-base);
|
||||
|
||||
margin-bottom: var(--size-medium);
|
||||
}
|
||||
|
||||
.menuWrapper {
|
||||
grid-column: 3;
|
||||
grid-row: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.mugikorLogoWrapper {
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
--color: var(--color-zuria);
|
||||
--hover-color: var(--color-gorria);
|
||||
--background-color: var(--color-beltza);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
background-color: var(--background-color);
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
.hasiera {
|
||||
--color: var(--color-zuria);
|
||||
--hover-color: var(--color-horia);
|
||||
--background-color: var(--color-morea);
|
||||
|
||||
@media #{$fromDesktop} {
|
||||
min-height: 100dvh;
|
||||
}
|
||||
}
|
||||
|
||||
.kafetegia {
|
||||
--color: var(--color-beltza);
|
||||
--hover-color: var(--color-gorria);
|
||||
--background-color: var(--color-horia);
|
||||
|
||||
@media #{$fromDesktop} {
|
||||
min-height: 100dvh;
|
||||
}
|
||||
}
|
||||
|
||||
.logoWrapper {
|
||||
width: var(--size-huge);
|
||||
}
|
||||
|
||||
.logo {
|
||||
path {
|
||||
transition: fill 0.4s ease;
|
||||
fill: var(--color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
path {
|
||||
fill: var(--hover-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
path {
|
||||
transition: fill 0.4s ease;
|
||||
fill: var(--color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
path {
|
||||
fill: var(--hover-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gainburuWrapper {
|
||||
padding: var(--size-base);
|
||||
display: flex;
|
||||
align-items: start;
|
||||
justify-content: center;
|
||||
|
||||
@media #{$fromTablet} {
|
||||
padding: var(--size-large);
|
||||
}
|
||||
|
||||
@media #{$fromDesktop} {
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.deskribapena {
|
||||
margin-bottom: var(--size-xlarge);
|
||||
hyphens: auto;
|
||||
|
||||
@include baseFont;
|
||||
|
||||
@media #{$fromTablet} {
|
||||
@include largeFont;
|
||||
}
|
||||
}
|
||||
|
||||
.izenburuWrapper {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
margin-bottom: var(--size-large);
|
||||
}
|
||||
|
||||
.marra {
|
||||
/* altuera erabiliko den letraren berdina da */
|
||||
height: #{toRem(41.83)};
|
||||
flex-grow: 1;
|
||||
box-shadow: inset 0px -3px 0px 0px var(--color);
|
||||
margin-right: var(--size-tiny);
|
||||
}
|
||||
|
||||
.izenburua {
|
||||
text-align: right;
|
||||
vertical-align: bottom;
|
||||
|
||||
&:after {
|
||||
content: '.';
|
||||
}
|
||||
|
||||
@include gargantuanFont;
|
||||
}
|
||||
|
||||
.gainburuLink {
|
||||
&:focus {
|
||||
outline: 3px solid var(--hover-color);
|
||||
}
|
||||
}
|
||||
|
||||
.desktopNavigazioaWrapper {
|
||||
display: none;
|
||||
|
||||
@media #{$fromDesktop} {
|
||||
display: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.mobileNabigazioaWrapper {
|
||||
position: absolute;
|
||||
top: var(--size-base);
|
||||
right: var(--size-base);
|
||||
|
||||
@media #{$fromDesktop} {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.kontaktuDatuakWrapper {
|
||||
display: none;
|
||||
|
||||
@media #{$fromDesktop} {
|
||||
display: initial;
|
||||
}
|
||||
}
|
||||
@@ -1,265 +1,68 @@
|
||||
import React from 'react';
|
||||
|
||||
import { rem } from 'polished';
|
||||
import styled from 'styled-components';
|
||||
import { Container } from '../../components/Container';
|
||||
import { breakpoints, font, media, size } from '../../ui/theme';
|
||||
import LabaLogo from '../../assets/logo.svg';
|
||||
|
||||
import { colors } from '../../ui/theme/colors';
|
||||
import { DesktopNabigazioa } from './DesktopNabigazioa';
|
||||
import { MugikorNabigazioa } from './MugikorNabigazioa';
|
||||
import MediaQuery from 'react-responsive';
|
||||
import { KontaktuDatuak } from './KontaktuDatuak';
|
||||
import Gezia from '../../assets/gezia.svg';
|
||||
import { GainburuLink } from './GainburuLink';
|
||||
|
||||
export type AtalaName = 'hasiera' | 'kafetegia';
|
||||
import { classNames } from '../../utilities/classnames';
|
||||
import Gezia from './assets/gezia.svg';
|
||||
import Logo from './assets/logo.svg';
|
||||
import { AtalaName } from './AtalaName';
|
||||
import { DesktopNabigazioa } from './components/DesktopNabigazioa';
|
||||
import { KontaktuDatuak } from './components/KontaktuDatuak';
|
||||
import { MugikorNabigazioa } from './components/MugikorNabigazioa';
|
||||
import * as styles from './Gainburua.module.scss';
|
||||
|
||||
interface Props {
|
||||
izenburua?: string;
|
||||
deskribapena?: string;
|
||||
atala?: AtalaName;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
const atalaClassname: { [key in AtalaName]: string } = {
|
||||
hasiera: styles.hasiera,
|
||||
kafetegia: styles.kafetegia,
|
||||
};
|
||||
|
||||
export const Gainburua: React.FC<Props> = ({
|
||||
izenburua,
|
||||
deskribapena,
|
||||
atala,
|
||||
}) => {
|
||||
return (
|
||||
<Wrapper atala={atala}>
|
||||
<MediaQuery maxWidth={breakpoints.tablet}>
|
||||
<Container>
|
||||
<MugikorWrapper>
|
||||
<MenuWrapper>
|
||||
<MugikorNabigazioa />
|
||||
</MenuWrapper>
|
||||
<MugikorLogoWrapper>
|
||||
<GainburuLink to="/">
|
||||
<LogoWrapper>
|
||||
<Logo title="Laba gara" atala={atala} />
|
||||
</LogoWrapper>
|
||||
</GainburuLink>
|
||||
</MugikorLogoWrapper>
|
||||
</MugikorWrapper>
|
||||
</Container>
|
||||
</MediaQuery>
|
||||
|
||||
<MediaQuery minWidth={breakpoints.tablet}>
|
||||
<GainburuWrapper>
|
||||
<GainburuLink to="/">
|
||||
<LogoWrapper>
|
||||
<Logo title="Laba gara" atala={atala} />
|
||||
</LogoWrapper>
|
||||
</GainburuLink>
|
||||
<div className={classNames(styles.wrapper, atala && atalaClassname[atala])}>
|
||||
<header className={styles.gainburuWrapper}>
|
||||
<a className={styles.gainburuLink} href="/">
|
||||
<div className={styles.logoWrapper}>
|
||||
<Logo className={styles.logo} title="Laba gara" />
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div className={styles.kontaktuDatuakWrapper}>
|
||||
<KontaktuDatuak />
|
||||
</GainburuWrapper>
|
||||
</MediaQuery>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{deskribapena && (
|
||||
<Nagusia>
|
||||
<Container>
|
||||
<Deskribapena>{deskribapena}</Deskribapena>
|
||||
<main className={styles.nagusia}>
|
||||
<p className={styles.deskribapena}>{deskribapena}</p>
|
||||
|
||||
<IzenburuWrapper>
|
||||
<Marra />
|
||||
<Izenburua>{izenburua}</Izenburua>
|
||||
</IzenburuWrapper>
|
||||
<div className={styles.izenburuWrapper}>
|
||||
<div className={styles.marra} />
|
||||
<h1 className={styles.izenburua}>{izenburua}</h1>
|
||||
</div>
|
||||
|
||||
<GeziaWrapper>
|
||||
<GainburuLink to="#edukia">
|
||||
<GeziaLogo atala={atala} />
|
||||
</GainburuLink>
|
||||
</GeziaWrapper>
|
||||
</Container>
|
||||
</Nagusia>
|
||||
<div className={styles.geziaWrapper}>
|
||||
<a className={styles.gainburuLink} href="#edukia">
|
||||
<Gezia className={styles.geziaLogo} />
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
)}
|
||||
|
||||
<MediaQuery minWidth={breakpoints.tablet}>
|
||||
<div className={styles.desktopNavigazioaWrapper}>
|
||||
<DesktopNabigazioa atala={atala} />
|
||||
</MediaQuery>
|
||||
</Wrapper>
|
||||
</div>
|
||||
|
||||
<div className={styles.mobileNabigazioaWrapper}>
|
||||
<MugikorNabigazioa />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const GeziaWrapper = styled.div`
|
||||
display: none;
|
||||
|
||||
${media.desktop`
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
`}
|
||||
`;
|
||||
|
||||
const GeziaLogo = styled(Gezia)<{ atala: 'hasiera' | 'kafetegia' }>`
|
||||
cursor: pointer;
|
||||
path {
|
||||
transition: fill 0.4s ease;
|
||||
fill: var(--color);
|
||||
}
|
||||
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-name: bounce-2;
|
||||
animation-timing-function: ease;
|
||||
|
||||
@keyframes bounce-2 {
|
||||
0% {
|
||||
transform: rotate(90deg) translateX(0);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(90deg) translateX(-${size.base}px);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(90deg) translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
path {
|
||||
fill: var(--hover-color);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const Nagusia = styled.main`
|
||||
flex-grow: 1;
|
||||
`;
|
||||
|
||||
const MugikorWrapper = styled.div`
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
padding-top: ${rem(size.base)};
|
||||
|
||||
margin-bottom: ${rem(size.medium)};
|
||||
`;
|
||||
|
||||
const MenuWrapper = styled.div`
|
||||
grid-column: 3;
|
||||
grid-row: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
`;
|
||||
|
||||
const MugikorLogoWrapper = styled.div`
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
`;
|
||||
|
||||
const Wrapper = styled.div<{ atala?: AtalaName }>`
|
||||
--color: ${({ atala }) => getAtalaColor(atala)};
|
||||
--hover-color: ${({ atala }) => getAtalaHoverColor(atala)};
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
background-color: ${({ atala }) => getAtalaBackground(atala)};
|
||||
color: var(--color);
|
||||
|
||||
${media.desktop`
|
||||
min-height: ${({ atala }: { atala: 'hasiera' | 'kafetegia' }) =>
|
||||
Boolean(atala) ? '100vh' : '0'};
|
||||
`}
|
||||
`;
|
||||
|
||||
const LogoWrapper = styled.div`
|
||||
width: ${rem(size.huge)};
|
||||
`;
|
||||
|
||||
const Logo = styled(LabaLogo)<{ atala?: AtalaName }>`
|
||||
path {
|
||||
transition: fill 0.4s ease;
|
||||
fill: var(--color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
path {
|
||||
fill: var(--hover-color);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const GainburuWrapper = styled.header`
|
||||
padding: ${rem(size.tiny)};
|
||||
display: flex;
|
||||
align-items: start;
|
||||
justify-content: space-between;
|
||||
|
||||
${media.tablet`
|
||||
padding: ${rem(size.large)};
|
||||
`};
|
||||
`;
|
||||
|
||||
const Deskribapena = styled.p`
|
||||
margin-bottom: ${rem(size.xlarge)};
|
||||
hyphens: auto;
|
||||
|
||||
${font.base()};
|
||||
|
||||
${media.tablet`
|
||||
${font.large()};
|
||||
`};
|
||||
`;
|
||||
|
||||
const IzenburuWrapper = styled.div`
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
margin-bottom: ${rem(size.large)};
|
||||
`;
|
||||
|
||||
const Marra = styled.div`
|
||||
/* altuera erabiliko den letraren berdina da */
|
||||
height: ${rem(41.83)};
|
||||
flex-grow: 1;
|
||||
box-shadow: inset 0px -3px 0px 0px var(--color);
|
||||
margin-right: ${rem(size.tiny)};
|
||||
`;
|
||||
|
||||
const Izenburua = styled.h1`
|
||||
text-align: right;
|
||||
vertical-align: bottom;
|
||||
|
||||
&:after {
|
||||
content: '.';
|
||||
}
|
||||
|
||||
${font.gargantuan()};
|
||||
`;
|
||||
|
||||
function getAtalaBackground(atala?: AtalaName) {
|
||||
if (atala === 'hasiera') {
|
||||
return colors.morea;
|
||||
}
|
||||
|
||||
if (atala === 'kafetegia') {
|
||||
return colors.horia;
|
||||
}
|
||||
|
||||
return colors.beltza;
|
||||
}
|
||||
|
||||
function getAtalaColor(atala?: AtalaName) {
|
||||
if (atala === 'hasiera' ) {
|
||||
return colors.zuria;
|
||||
}
|
||||
|
||||
if (atala === 'kafetegia') {
|
||||
return colors.beltza;
|
||||
}
|
||||
|
||||
return colors.zuria;
|
||||
}
|
||||
|
||||
function getAtalaHoverColor(atala?: AtalaName) {
|
||||
if (atala === 'hasiera') {
|
||||
return colors.horia;
|
||||
}
|
||||
|
||||
return colors.gorria;
|
||||
}
|
||||
|
||||
@@ -1,103 +0,0 @@
|
||||
import { rem } from 'polished';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { font, size } from '../../ui/theme';
|
||||
import InstagramLogo from '../../assets/instagram.svg';
|
||||
import TwitterLogo from '../../assets/twitter.svg';
|
||||
import { GainburuLink } from './GainburuLink';
|
||||
|
||||
/**
|
||||
* ERREPIKATUA
|
||||
* KontaktuDatuak konponentea MugikorNabigazioan errepikatzen da, honek
|
||||
* logoaren fill-erako kokapenaren araberako CSS aldagaia erabiltzen duelako
|
||||
* TODO: Beste estrategia bat bilatu, abstrakzio bakarra izateko
|
||||
*/
|
||||
|
||||
export const KontaktuDatuak: React.FC = () => {
|
||||
return (
|
||||
<Kontaktua>
|
||||
<Helbidea>
|
||||
<p>Gazteluko plaza, 2</p>
|
||||
<p>Iruñea</p>
|
||||
</Helbidea>
|
||||
|
||||
<SareSozialak>
|
||||
<SareSoziala>
|
||||
<GainburuLink
|
||||
tabIndex={0}
|
||||
aria-label="Laba Twitterren"
|
||||
to="https://twitter.com/labasarea/"
|
||||
>
|
||||
<Twitter title="Laba Twitterren" />
|
||||
</GainburuLink>
|
||||
</SareSoziala>
|
||||
|
||||
<SareSoziala>
|
||||
<GainburuLink
|
||||
tabIndex={0}
|
||||
aria-label="Laba Instagramen"
|
||||
to="https://www.instagram.com/labasarea/"
|
||||
>
|
||||
<Instagram role="link" title="Laba Instagramen" />
|
||||
</GainburuLink>
|
||||
</SareSoziala>
|
||||
</SareSozialak>
|
||||
</Kontaktua>
|
||||
);
|
||||
};
|
||||
|
||||
export const Kontaktua = styled.div`
|
||||
display: flex;
|
||||
`;
|
||||
|
||||
export const SareSoziala = styled.li`
|
||||
width: ${rem(size.base)};
|
||||
height: ${rem(size.base)};
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: ${rem(size.small)};
|
||||
}
|
||||
`;
|
||||
|
||||
export const Instagram = styled(InstagramLogo)`
|
||||
width: ${rem(size.base)};
|
||||
height: ${rem(size.base)};
|
||||
path {
|
||||
transition: fill 0.4s ease;
|
||||
fill: var(--color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
path {
|
||||
fill: var(--hover-color);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const Twitter = styled(TwitterLogo)`
|
||||
width: ${rem(size.base)};
|
||||
height: ${rem(size.base)};
|
||||
path {
|
||||
transition: fill 0.4s ease;
|
||||
fill: var(--color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
path {
|
||||
fill: var(--hover-color);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const SareSozialak = styled.ul`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
list-style-type: none;
|
||||
`;
|
||||
|
||||
export const Helbidea = styled.address`
|
||||
border-right: 3px solid var(--color);
|
||||
padding-right: ${rem(size.small)};
|
||||
margin-right: ${rem(size.small)};
|
||||
${font.tiny()};
|
||||
`;
|
||||
@@ -1,192 +0,0 @@
|
||||
import { Link } from 'gatsby';
|
||||
import { rem } from 'polished';
|
||||
import React, { useState } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { font, size } from '../../ui/theme';
|
||||
import { colors } from '../../ui/theme/colors';
|
||||
import HamburgerIcon from './assets/hamburguer.svg';
|
||||
import Itxi from './assets/itxi.svg';
|
||||
import InstagramLogo from '../../assets/instagram.svg';
|
||||
import TwitterLogo from '../../assets/twitter.svg';
|
||||
|
||||
export const MugikorNabigazioa: React.FC = () => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
{isOpen && (
|
||||
<NabigazioaWrapper>
|
||||
<OpenClose onClick={() => setIsOpen(false)}>
|
||||
<Itxi />
|
||||
</OpenClose>
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<Esteka>
|
||||
<Link to="/">Laba gara</Link>
|
||||
</Esteka>
|
||||
<Esteka>
|
||||
<Link to="/kafetegia">Dastatu Laba</Link>
|
||||
</Esteka>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<KontaktuaWrapper>
|
||||
<KontaktuDatuak />
|
||||
</KontaktuaWrapper>
|
||||
</NabigazioaWrapper>
|
||||
)}
|
||||
|
||||
<OpenClose
|
||||
onClick={() => {
|
||||
setIsOpen(true);
|
||||
}}
|
||||
>
|
||||
<Hamburger />
|
||||
</OpenClose>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const KontaktuaWrapper = styled.div`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const Esteka = styled.li`
|
||||
color: ${colors.zuria};
|
||||
${font.large()};
|
||||
text-align: right;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: ${rem(size.base)};
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '.';
|
||||
}
|
||||
`;
|
||||
|
||||
const Hamburger = styled(HamburgerIcon)`
|
||||
path {
|
||||
fill: var(--color);
|
||||
}
|
||||
`;
|
||||
|
||||
const OpenClose = styled.div`
|
||||
cursor: pointer;
|
||||
width: ${rem(size.medium)};
|
||||
margin-bottom: ${rem(size.base)};
|
||||
`;
|
||||
|
||||
const NabigazioaWrapper = styled.div`
|
||||
@keyframes sartu {
|
||||
from {
|
||||
right: -100vw;
|
||||
}
|
||||
to {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
animation-name: sartu;
|
||||
animation-duration: 0.25s;
|
||||
|
||||
/* Containerrak sartzen duen padding berdina */
|
||||
padding: ${rem(size.base)};
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100vw;
|
||||
background-color: ${colors.beltza};
|
||||
color: ${colors.zuria};
|
||||
height: 100vh;
|
||||
`;
|
||||
|
||||
/**
|
||||
* ERREPIKATUA
|
||||
* KontaktuDatuak konponentea errepikatzen da, besteak logoaren fill-erako kokapenaren
|
||||
* araberako CSS aldagaia erabiltzen duelako eta hemen testu eta irudi guztiak zuriak izan
|
||||
* behar direlako
|
||||
* TODO: Beste estrategia bat bilatu, abstrakzio bakarra izateko
|
||||
*/
|
||||
const KontaktuDatuak: React.FC = () => {
|
||||
return (
|
||||
<Kontaktua>
|
||||
<Helbidea>
|
||||
<p>Gazteluko plaza, 2</p>
|
||||
<p>Iruñea</p>
|
||||
</Helbidea>
|
||||
|
||||
<SareSozialak>
|
||||
<SareSoziala>
|
||||
<a
|
||||
tabIndex={0}
|
||||
aria-label="Laba Twitterren"
|
||||
href="https://twitter.com/labasarea/"
|
||||
>
|
||||
<Twitter title="Laba Twitterren" />
|
||||
</a>
|
||||
</SareSoziala>
|
||||
|
||||
<SareSoziala>
|
||||
<a
|
||||
tabIndex={0}
|
||||
aria-label="Laba Instagramen"
|
||||
href="https://www.instagram.com/labasarea/"
|
||||
>
|
||||
<Instagram role="link" title="Laba Instagramen" />
|
||||
</a>
|
||||
</SareSoziala>
|
||||
</SareSozialak>
|
||||
</Kontaktua>
|
||||
);
|
||||
};
|
||||
|
||||
export const Kontaktua = styled.div`
|
||||
display: flex;
|
||||
`;
|
||||
|
||||
export const SareSoziala = styled.li`
|
||||
width: ${rem(size.base)};
|
||||
height: ${rem(size.base)};
|
||||
:not(:last-child) {
|
||||
margin-right: ${rem(size.small)};
|
||||
}
|
||||
`;
|
||||
|
||||
export const Instagram = styled(InstagramLogo)`
|
||||
width: ${rem(size.base)};
|
||||
height: ${rem(size.base)};
|
||||
path {
|
||||
fill: ${colors.zuria};
|
||||
}
|
||||
`;
|
||||
|
||||
export const Twitter = styled(TwitterLogo)`
|
||||
width: ${rem(size.base)};
|
||||
height: ${rem(size.base)};
|
||||
path {
|
||||
fill: ${colors.zuria};
|
||||
}
|
||||
`;
|
||||
|
||||
export const SareSozialak = styled.ul`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
list-style-type: none;
|
||||
`;
|
||||
|
||||
export const Helbidea = styled.address`
|
||||
border-right: 3px solid ${colors.zuria};
|
||||
padding-right: ${rem(size.small)};
|
||||
margin-right: ${rem(size.small)};
|
||||
${font.tiny()};
|
||||
`;
|
||||
5
front/src/components/Gainburua/assets/gezia.svg
Normal file
5
front/src/components/Gainburua/assets/gezia.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<svg width="37" height="31" viewBox="0 0 37 31" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M0.249298 18.36L25.3407 18.36L17.0741 26.58L21.1571 30.64L32.32 19.54L36.3829 15.48L32.32 11.42L21.1571 0.320013L17.0741 4.39001L25.3407 12.61L0.249298 12.61L0.249298 18.36Z"
|
||||
fill="#ffffff" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 324 B |
1
front/src/components/Gainburua/assets/logo.svg
Normal file
1
front/src/components/Gainburua/assets/logo.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 99.87 89.87"><defs><style>.cls-1{fill:#ffffff;}</style></defs><path class="cls-1" d="M3.75,89.87A3.76,3.76,0,0,1,0,86.73,8.61,8.61,0,0,1,0,84.9c.14-2.52.3-5,.46-7.56q.33-5.52.68-11c.14-2.29.27-4.59.41-6.89l.57-9.2c.13-2.28.27-4.56.4-6.83l.57-9.27c.14-2.2.27-4.39.4-6.59q.3-4.78.58-9.57c.14-2.3.27-4.59.41-6.89C4.64,8.52,4.78,6,5,3.44A3.74,3.74,0,0,1,9,0c1.36.13,2.7.37,4,.57L22.39,2l9.29,1.41,9.24,1.39,9.35,1.42L58.6,7.5a7.29,7.29,0,0,1,1.3.33L97.12,21.2a3.8,3.8,0,0,1,2.73,3.34,4.21,4.21,0,0,1-.09,1.27q-2.15,10.71-4.32,21.42T91.1,68.77c-.29,1.46-.59,2.91-.88,4.37a4.07,4.07,0,0,0-.07.85q.21,4.29.44,8.6c0,1,.12,2,.15,3a3.81,3.81,0,0,1-4,4.09C82.34,89.74,6,89.88,3.75,89.87Zm83.17-4c-.06-1.26-.13-2.42-.18-3.57-.14-2.85-.29-5.7-.42-8.54a4.43,4.43,0,0,1,.07-1q1.94-9.69,3.91-19.39Q93,39.92,95.74,26.45c.1-.51.19-1,.29-1.54l-.62-.25L58.66,11.45a4.35,4.35,0,0,0-.71-.18l-5.67-.86-13.34-2L24.82,6.25,10.7,4.1,8.76,3.82Q6.26,45,3.76,86.05Z"/><path class="cls-1" d="M47.26,78.56v1.37H43.32c-.13-.41-.19-19.51,0-20.63h4v6.93a3.17,3.17,0,0,0,.31-.24,5.43,5.43,0,0,1,4.37-1.47,6,6,0,0,1,5.42,4,9.85,9.85,0,0,1,0,7.79,6,6,0,0,1-4.39,3.8,5.63,5.63,0,0,1-5.47-1.44A1.51,1.51,0,0,0,47.26,78.56Zm6.75-6A6.18,6.18,0,0,0,53.6,70a3.16,3.16,0,0,0-3.3-2,3.07,3.07,0,0,0-2.86,2.28,7.31,7.31,0,0,0,0,4.27,3.08,3.08,0,0,0,2.93,2.27,3.15,3.15,0,0,0,3.22-2A5.65,5.65,0,0,0,54,72.53Z"/><path class="cls-1" d="M69.12,78.62A5.53,5.53,0,0,1,66.49,80a7.41,7.41,0,0,1-3.74,0,4.33,4.33,0,0,1-3.16-5.29,4,4,0,0,1,1.94-2.62,9.78,9.78,0,0,1,3.27-1.13l3.42-.65c.16,0,.31-.08.45-.12A1.75,1.75,0,0,0,67.19,68a4.78,4.78,0,0,0-1.51,0A2.06,2.06,0,0,0,64,69.34c-.06.14-.12.29-.21.53L60,69.16a2.58,2.58,0,0,1,.12-.48,6.12,6.12,0,0,1,4.54-4,8.8,8.8,0,0,1,4.47.1,4.55,4.55,0,0,1,3.57,4.53c0,2,0,4.07,0,6.11,0,.18,0,.36,0,.55,0,.68.24.88.93.93l.27,0v2.92A4.39,4.39,0,0,1,69.12,78.62ZM68.72,73l-3,.61a3.33,3.33,0,0,0-.64.16,4.74,4.74,0,0,0-1,.47,1.57,1.57,0,0,0,.28,2.67,3.54,3.54,0,0,0,4-1.06,2.43,2.43,0,0,0,.38-1C68.76,74.29,68.72,73.7,68.72,73Z"/><path class="cls-1" d="M40.9,77a3.07,3.07,0,0,1,.05.38c0,.85,0,1.71,0,2.62-1.82.21-3.54.35-4.82-1.33A5.52,5.52,0,0,1,33.51,80a7.21,7.21,0,0,1-4.09-.16,4.32,4.32,0,0,1-2.78-5.35,4,4,0,0,1,2-2.48,9.63,9.63,0,0,1,3.21-1.1l3.42-.65.45-.11A1.75,1.75,0,0,0,34.2,68a4.78,4.78,0,0,0-1.51,0A2.06,2.06,0,0,0,31,69.34c-.06.14-.12.29-.21.53L27,69.17a3.91,3.91,0,0,1,.12-.49,6.12,6.12,0,0,1,4.54-4,8.68,8.68,0,0,1,4.41.09,4.57,4.57,0,0,1,3.64,4.67c0,2,0,3.91,0,5.86v.43C39.71,76.72,39.88,76.9,40.9,77ZM35.73,73c-1.28.27-2.47.51-3.65.79a2.68,2.68,0,0,0-1,.46,1.57,1.57,0,0,0,.33,2.7,3.59,3.59,0,0,0,3.83-1,2.56,2.56,0,0,0,.45-1.11A14.07,14.07,0,0,0,35.73,73Z"/><path class="cls-1" d="M11.5,59.3h4.18v17h9.49v3.66H11.54C11.41,79.52,11.37,60.16,11.5,59.3Z"/><path class="cls-1" d="M80.59,80H76a3.06,3.06,0,0,1-.07-.4c0-1.42,0-2.85,0-4.27a2.35,2.35,0,0,1,4.69-.07c0,1.48,0,3,0,4.45A1.35,1.35,0,0,1,80.59,80Z"/></svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
@@ -0,0 +1,32 @@
|
||||
.nabigazioa {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-bottom: var(--size-tiny);
|
||||
}
|
||||
|
||||
.estekaZerrenda {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.esteka {
|
||||
padding: var(--size-small);
|
||||
|
||||
color: var(--color);
|
||||
|
||||
transition: color 0.4s ease;
|
||||
|
||||
&:hover {
|
||||
color: var(--hover-color);
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
border-bottom: 3px solid var(--color);
|
||||
}
|
||||
.gainburuLink {
|
||||
&:focus {
|
||||
outline: 3px solid var(--hover-color);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import React from 'react';
|
||||
|
||||
import { Link } from 'gatsby';
|
||||
|
||||
import { classNames } from '../../../../utilities/classnames';
|
||||
import * as styles from './DesktopNabigazioa.module.scss';
|
||||
|
||||
import type { AtalaName } from '../../AtalaName';
|
||||
interface Props {
|
||||
atala?: AtalaName;
|
||||
}
|
||||
|
||||
export const DesktopNabigazioa: React.FC<Props> = ({ atala }) => {
|
||||
return (
|
||||
<nav className={styles.nabigazioa}>
|
||||
<ul className={styles.estekaZerrenda}>
|
||||
<li
|
||||
className={classNames(
|
||||
styles.esteka,
|
||||
atala === 'hasiera' && styles.active,
|
||||
)}
|
||||
>
|
||||
<Link className={styles.gainburuLink} to="/">
|
||||
Laba gara
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li
|
||||
className={classNames(
|
||||
styles.esteka,
|
||||
atala === 'kafetegia' && styles.active,
|
||||
)}
|
||||
>
|
||||
<Link className={styles.gainburuLink} to="/kafetegia">
|
||||
Dastatu Laba
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1 @@
|
||||
export { DesktopNabigazioa } from './DesktopNabigazioa';
|
||||
@@ -0,0 +1,78 @@
|
||||
@import '../../../../styles/tools/mixins/font.scss';
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.sareSozialak {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.sareSoziala {
|
||||
width: var(--size-base);
|
||||
height: var(--size-base);
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: var(--size-small);
|
||||
}
|
||||
}
|
||||
|
||||
.sareSozialLogo {
|
||||
width: var(--size-base);
|
||||
height: var(--size-base);
|
||||
}
|
||||
|
||||
.helbidea {
|
||||
padding-right: var(--size-small);
|
||||
margin-right: var(--size-small);
|
||||
|
||||
@include tinyFont;
|
||||
}
|
||||
|
||||
.themeBorder {
|
||||
border-right: 3px solid var(--color);
|
||||
}
|
||||
|
||||
.zuriBorder {
|
||||
border-right: 3px solid var(--color-zuria);
|
||||
}
|
||||
|
||||
.themeLogo {
|
||||
path {
|
||||
transition: fill 0.4s ease;
|
||||
fill: var(--color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
path {
|
||||
fill: var(--hover-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.zuriLogo {
|
||||
path {
|
||||
transition: fill 0.4s ease;
|
||||
fill: var(--color-zuria);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
path {
|
||||
fill: var(--color-gorria);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.themeLink {
|
||||
&:focus {
|
||||
outline: 3px solid var(--hover-color);
|
||||
}
|
||||
}
|
||||
|
||||
.zuriLink {
|
||||
&:focus {
|
||||
outline: 3px solid var(--color-gorria);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
import React from 'react';
|
||||
|
||||
import InstagramLogo from '../../../../assets/instagram.svg';
|
||||
import TwitterLogo from '../../../../assets/twitter.svg';
|
||||
import { classNames } from '../../../../utilities/classnames';
|
||||
import * as styles from './KontaktuDatuak.module.scss';
|
||||
|
||||
interface Props {
|
||||
kolorea?: KontaktuaColor;
|
||||
}
|
||||
|
||||
type KontaktuaColor = 'theme' | 'zuria';
|
||||
type ColorToStyleDictionary = {
|
||||
[color in KontaktuaColor]: string;
|
||||
};
|
||||
|
||||
const colorToLogoStyle: ColorToStyleDictionary = {
|
||||
theme: styles.themeLogo,
|
||||
zuria: styles.zuriLogo,
|
||||
};
|
||||
|
||||
const colorToBorderStyle: ColorToStyleDictionary = {
|
||||
theme: styles.themeBorder,
|
||||
zuria: styles.zuriBorder,
|
||||
};
|
||||
|
||||
const colorToLinkStyle: ColorToStyleDictionary = {
|
||||
theme: styles.themeLink,
|
||||
zuria: styles.zuriLink,
|
||||
};
|
||||
|
||||
export const KontaktuDatuak: React.FC<Props> = ({ kolorea = 'theme' }) => {
|
||||
return (
|
||||
<div className={styles.wrapper}>
|
||||
<address
|
||||
className={classNames(styles.helbidea, colorToBorderStyle[kolorea])}
|
||||
>
|
||||
<p>Gazteluko plaza, 2</p>
|
||||
<p>Iruñea</p>
|
||||
</address>
|
||||
|
||||
<ul className={styles.sareSozialak}>
|
||||
<li className={styles.sareSoziala}>
|
||||
<a
|
||||
className={colorToLinkStyle[kolorea]}
|
||||
tabIndex={0}
|
||||
aria-label="Laba Twitterren"
|
||||
href="https://twitter.com/labasarea/"
|
||||
>
|
||||
<TwitterLogo
|
||||
className={classNames(
|
||||
styles.sareSozialLogo,
|
||||
colorToLogoStyle[kolorea],
|
||||
)}
|
||||
title="Laba Twitterren"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className={styles.sareSoziala}>
|
||||
<a
|
||||
className={colorToLinkStyle[kolorea]}
|
||||
tabIndex={0}
|
||||
aria-label="Laba Instagramen"
|
||||
href="https://www.instagram.com/labasarea/"
|
||||
>
|
||||
<InstagramLogo
|
||||
className={classNames(
|
||||
styles.sareSozialLogo,
|
||||
colorToLogoStyle[kolorea],
|
||||
)}
|
||||
title="Laba Instagramen"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1 @@
|
||||
export { KontaktuDatuak } from './KontaktuDatuak';
|
||||
@@ -0,0 +1,63 @@
|
||||
@import '../../../../styles/tools/mixins/font.scss';
|
||||
|
||||
.kontaktuaWrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hamburguer {
|
||||
path {
|
||||
fill: var(--color);
|
||||
}
|
||||
}
|
||||
|
||||
.esteka {
|
||||
color: var(--color-zuria);
|
||||
@include largeFont;
|
||||
text-align: right;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: var(--size-base);
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '.';
|
||||
}
|
||||
}
|
||||
|
||||
.openClose {
|
||||
cursor: pointer;
|
||||
width: var(--size-medium);
|
||||
margin-bottom: var(--size-base);
|
||||
}
|
||||
|
||||
.nabigazioaWrapper {
|
||||
@keyframes sartu {
|
||||
from {
|
||||
right: -100vw;
|
||||
}
|
||||
to {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
animation-name: sartu;
|
||||
animation-duration: 0.25s;
|
||||
|
||||
/* Containerrak sartzen duen padding berdina */
|
||||
padding: var(--size-base);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100dvw;
|
||||
background-color: var(--color-beltza);
|
||||
color: var(--color-zuria);
|
||||
height: 100dvh;
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import { Link } from 'gatsby';
|
||||
|
||||
import HamburgerIcon from '../../assets/hamburguer.svg';
|
||||
import Itxi from '../../assets/itxi.svg';
|
||||
import { KontaktuDatuak } from '../KontaktuDatuak';
|
||||
import * as styles from './MugikorNabigazioa.module.scss';
|
||||
|
||||
export const MugikorNabigazioa: React.FC = () => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
{isOpen && (
|
||||
<div className={styles.nabigazioaWrapper}>
|
||||
<div className={styles.openClose} onClick={() => setIsOpen(false)}>
|
||||
<Itxi />
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<li className={styles.esteka}>
|
||||
<Link to="/">Laba gara</Link>
|
||||
</li>
|
||||
<li className={styles.esteka}>
|
||||
<Link to="/kafetegia">Dastatu Laba</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div className={styles.kontaktuaWrapper}>
|
||||
<KontaktuDatuak kolorea="zuria" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div
|
||||
className={styles.openClose}
|
||||
onClick={() => {
|
||||
setIsOpen(true);
|
||||
}}
|
||||
>
|
||||
<HamburgerIcon className={styles.hamburguer} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1 @@
|
||||
export { MugikorNabigazioa } from './MugikorNabigazioa';
|
||||
Reference in New Issue
Block a user