Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update style, add menu and change chart unit #26

Merged
merged 3 commits into from
Nov 17, 2023
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions components/header/component.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import React from 'react';
import './style.scss';
import HeaderMenu from './menu';

const Header = () => {
return (
<header>
<div className="header">
<div className="header__logo">
<img
className="logo"
src={`${process.env.BASE_PATH ?? ''}/images/mongabay-logo-white.png`}
alt="Mongabay"
/>
</div>
<div className="header__content">
<p>supply chain Tool</p>
<HeaderMenu />
</div>
</div>
</header>
);
};

export default Header;
44 changes: 44 additions & 0 deletions components/header/constants.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
export const COLORS = ['#03755E', '#184B95', '#A01200', '#7E56D8'];

export const TOOLS = [
{
id: 'satellite',
title: 'Satellite',
description:
'Create images of maps using a wide set of basemaps, contextual layers and data layers or explore the map presets that provide information about topics like conservation.',
color: COLORS[1],
image: '/images/satellite-tool.png',
name: 'Satellite Tool',
url: 'https://maps.mongabay.com',
},
{
id: 'fire',
title: 'Fire Drought',
description:
'Explore and report temporal interactions between annual precipitation and fire occurrences at national and subnational scales.',
color: COLORS[2],
image: '/images/fire-tool.png',
name: 'Fire Drought',
url: 'https://charts.mongabay.com',
},
{
id: 'reforestation',
title: 'Reforestation App',
description:
'Mongabay’s global directory of reforestation and tree-planting projects is a starting point for people wanting to support reforestation.',
color: COLORS[0],
image: '/images/reforestation-tool.png',
name: 'Reforestation App',
url: 'https://reforestation.app',
},
{
id: 'supply',
title: 'Supply Chain',
description:
'Create images of maps with flows representing the exchange of a variety of commodities across the world.',
color: COLORS[3],
image: '/images/supply-tool.png',
name: 'Supply Chain',
url: 'https://chains.mongabay.com',
},
];
1 change: 1 addition & 0 deletions components/header/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from './component';
78 changes: 78 additions & 0 deletions components/header/menu/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
import React, { useState } from 'react';

import { TOOLS } from '../constants';
import cx from 'classnames';
import Icon from 'components/icon';

const HeaderMenu = () => {
clementprdhomme marked this conversation as resolved.
Show resolved Hide resolved
const [isOpen, setIsOpen] = useState(false);

return (
<div className="header__menu">
<button
type="button"
className="--transparent btn btn-light p-0"
onClick={() => setIsOpen(true)}
>
<span className="sr-only">open navigation menu</span>
<Icon name="menu" className="header__menu__icon" />
</button>
<div
className={cx('header__menu__mask', {
'--open': isOpen,
'--close': !isOpen,
})}
onClick={() => setIsOpen(false)}
></div>
<div
className={cx('header__menu__content', {
'--open': isOpen,
'--close': !isOpen,
})}
inert={isOpen ? false : ''}
>
<div className="header__menu__content__wrap">
<button
type="button"
className="--transparent header__menu__content__wrap__close-btn btn btn-light p-0"
onClick={() => setIsOpen(false)}
>
<span className="sr-only">close navigation menu</span>
<Icon name="menu-close" className="header__menu__content__wrap__close-btn__icon" />
</button>
<p className="header__menu__content__wrap__title">Mongabay Chart Tools</p>
<ul className="space-y-6">
{TOOLS.map(({ name, url, id, color }) => (
<li key={name}>
<a target="_blank" rel="noopener noreferrer" href={url}>
clementprdhomme marked this conversation as resolved.
Show resolved Hide resolved
<div
style={{
backgroundColor: color,
}}
>
<Icon className={cx(id === 'supply' ? '--lg' : '--md')} name={id} />
</div>
{name}
</a>
</li>
))}
</ul>
<div className="header__menu__content__wrap__buttons">
{/* TODO: add lights */}
<button type="button" className="btn btn-dark text-white bg-dark-gray shadow-none">
Get in touch
</button>
<button
type="button"
className="btn btn-light text-dark-gray border border-gray-dark shadow-none"
>
Find out more
</button>
</div>
</div>
</div>
</div>
);
};

export default HeaderMenu;
164 changes: 164 additions & 0 deletions components/header/style.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,164 @@
@import 'css/settings';

.header {
background-color: $primary;
padding-inline: 3rem;
height: $header-height;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
&__logo {
img {
width: 136px;
height: 20.176px;
}
}
&__content {
display: flex;
align-items: center;
gap: 36px;
> p {
margin-bottom: 0;
color: white;
font-family: $font-family-1;
font-size: $font-size-xs;
font-weight: $font-weight-strong;
letter-spacing: 0.96px;
text-transform: uppercase;
}
}
&__menu {
flex-shrink: 0;
&__icon {
width: 29px;
height: 29px;
}
&__content {
position: fixed;
padding-block: 10px;
top: 0;
right: 0;
height: 100%;
z-index: 3;
transition: all 300ms ease-in-out;
background-color: white;
display: flex;
align-items: center;

&.--open {
transform: translateX(0);
}
&.--close {
transform: translateX(100%);
}
&__wrap {
min-width: 543px;
width: 100%;
min-height: 50%;
display: flex;
flex-direction: column;
align-items: flex-start;
padding-inline: 88px;
gap: 60px;

&__close-btn {
position: absolute;
right: 2rem;
top: 10px;
&__icon.c-icon {
stroke: $text-color-1;
width: 51px;
height: 51px;
stroke-width: 0px;
}
}
&__title {
font: $font-weight-bold $font-size-l $font-family-2;
}
ul {
display: flex;
gap: 28px;
flex-direction: column;
padding: 0;
li {
list-style: none;
a {
display: flex;
align-items: center;
gap: 16px;
font: $font-weight-strong $font-size-m $font-family-1;
text-transform: uppercase;
color: $text-color-1;
border-radius: 22px;
&:hover {
text-decoration: underline;
}
&:focus-visible {
outline: $primary auto 1px;
outline-offset: 8px;
}
div {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
.c-icon {
width: 22px;
height: 22px;
&.--lg {
width: 24px;
height: 24px;
}
}
}
}
}
}
&__buttons {
padding-top: 42px;
display: flex;
align-items: flex-end;
gap: 12px;
font: $font-weight-strong $font-size-s $font-family-1;
}
}
}
&__mask {
position: fixed;
top: 0;
right: 0;
transition: opacity 300ms ease-in-out;
&.--open {
width: 100%;
height: 100%;
position: fixed;
background-color: $text-color-1;
z-index: 2;
opacity: 0.3;
}
&.--close {
opacity: 0;
z-index: -10;
}
}
}
.--transparent.btn.btn-light {
border: none;
background-color: transparent;
box-shadow: none;
border-radius: 50%;
&:active {
background-color: transparent;
box-shadow: none;
}
}
.btn {
&:focus-visible {
outline: $primary auto 1px;
outline-offset: 2px;
}
}
}
Loading