@axeptio/design-system/src/_components/AppHeader.jsx

Design System for Axeptio

import React, { useContext } from 'react';
import { MenuContext } from '../_contexts/menuContext';
import styled from 'styled-components';
import Logo from '../Core/Logo/index';
import Link from 'next/link';

const Root = styled.header`
  z-index: 10000;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(12px);

  .logo-wrapper {
    position: relative;
    top: 3px;
    margin-left: 3px;
    cursor: pointer;

    div:first-child {
      display: none;

      @media (min-width: ${props => props.theme.breakpoints.large}px) {
        display: block;
      }
    }

    div:last-child {
      @media (min-width: ${props => props.theme.breakpoints.large}px) {
        display: none;
      }
    }
  }

  button {
    padding: 0 4px;
    font-weight: 600;

    @media (min-width: ${props => props.theme.breakpoints.large}px) {
      display: none;
    }
  }

  a {
    position: relative;
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    text-decoration: none;
    color: ${props => props.theme.colors.secondary};

    display: none;

    @media (min-width: ${props => props.theme.breakpoints.large}px) {
      display: inline;
    }

    &::before {
      content: '';
      position: absolute;
      width: 0%;
      left: 0;
      bottom: -2px;
      height: 1.5px;
      background-color: ${props => props.theme.colors.secondary};
      transition: all 0.3s ease;
    }

    &:hover {
      &::before {
        width: 100%;
      }
    }
  }
`;

export default function AppHeader() {
  const { active, setActive } = useContext(MenuContext);

  const toggleMenu = () => {
    setActive(!active);
  };

  return (
    <Root>
      <Link href="/">
        <span className="logo-wrapper">
          <Logo width={150} />
          <Logo theHand width={40} />
        </span>
      </Link>
      <div>
        <a href="https://storybook.axept.io" target="_blank" rel="noreferrer">
          Storybook
        </a>
        <button onClick={toggleMenu}>menu</button>
      </div>
    </Root>
  );
}