Navigation.js

import Logo from "../public/Logo.svg";
import React from "react";
import Link from "next/link";
import ExternalLink from "./ExternalLink";

export default function Navigation() {
  return (
    <>
      <style jsx>
        {`
          .Header {
            grid-area: Header;
            font-size: 0.9rem;
            padding: 0.5rem;
            padding-top: 1rem;
            background: linear-gradient(
              154deg,
              rgb(1, 51, 115) 0%,
              rgb(20, 132, 188) 100%
            );
          }
          nav {
            font-size: 1rem;
            max-width: 60%;
            padding-top: 0.5rem;

            margin: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
          nav ul {
            list-style: none;
            display: flex;
            padding-left: 0px;
            align-items: center;
          }
          nav li {
            padding: 0.5rem;
          }
          .Logo {
            min-width: 280px;
          }
          .menu {
            padding-right: 1rem;
          }
          @media only screen and (max-width: 1000px) {
            .Logo {
              width: 100%;
              min-width: 0;
            }
            .menu {
              display: none;
            }
          }
        `}
      </style>
      <div className={"Header"}>
        <nav role="navigation" aria-label="Main">
          <Link href="/">
            <a>
              <img
                src={Logo}
                className={"Logo"}
                alt="Bye-Bye-Server - Alternatives to Atlassian Server products"
              />
            </a>
          </Link>

          <div className="menu">
            <ul>
              <li>
                <Link href="/blog">
                  <a>Blog</a>
                </Link>
              </li>
              <li>
                <ExternalLink url="https://chat.goodbyeserver.org">
                  Community
                </ExternalLink>
              </li>
              <li style={{ paddingTop: 14 }}>
                <ExternalLink url="https://github.com/realignedtechnologies/bye-bye-server">
                  <svg
                    aria-hidden="true"
                    focusable="false"
                    width="1em"
                    height="1em"
                    preserveAspectRatio="xMidYMid meet"
                    viewBox="0 0 1024 1024"
                  >
                    <path
                      d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5C64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9c26.4 39.1 77.9 32.5 104 26c5.7-23.5 17.9-44.5 34.7-60.8c-140.6-25.2-199.2-111-199.2-213c0-49.5 16.3-95 48.3-131.7c-20.4-60.5 1.9-112.3 4.9-120c58.1-5.2 118.5 41.6 123.2 45.3c33-8.9 70.7-13.6 112.9-13.6c42.4 0 80.2 4.9 113.5 13.9c11.3-8.6 67.3-48.8 121.3-43.9c2.9 7.7 24.7 58.3 5.5 118c32.4 36.8 48.9 82.7 48.9 132.3c0 102.2-59 188.1-200 212.9a127.5 127.5 0 0 1 38.1 91v112.5c.8 9 0 17.9 15 17.9c177.1-59.7 304.6-227 304.6-424.1c0-247.2-200.4-447.3-447.5-447.3z"
                      fill="#ffffff"
                    />
                  </svg>
                </ExternalLink>
              </li>
            </ul>
          </div>
        </nav>
      </div>
    </>
  );
}