Skip to content

Commit

Permalink
* Improve header
Browse files Browse the repository at this point in the history
  • Loading branch information
@limptwiglet
limptwiglet committed Jan 15, 2024
1 parent 90041bb commit 6bd9a74
Show file tree
Hide file tree
Showing 5 changed files with 169 additions and 135 deletions.
261 changes: 131 additions & 130 deletions _docs_theme/partials/header.html
View file
Original file line number Diff line number Diff line change
@@ -1,144 +1,145 @@

<header class="md-header" data-md-component="header">
<div class="masthead">
{% if staticPage is not defined %}
<!-- Button to open drawer -->
<label class="md-header__button md-icon" for="__drawer">
{% set icon = config.theme.icon.menu or "material/menu" %}
{% include ".icons/" ~ icon ~ ".svg" %}
</label>

<nav class="masthead__nav md-header__inner md-grid">
{% if staticPage is not defined %}
<!-- Button to open drawer -->
<label class="md-header__button md-icon" for="__drawer">
{% set icon = config.theme.icon.menu or "material/menu" %}
{% include ".icons/" ~ icon ~ ".svg" %}
</label>

<!-- Logo -->
<label class="md-nav__title" for="__drawer">
<a
href="{{ config.extra.homepage | d(nav.homepage.url, true) | url }}"
title="{{ config.site_name | e }}"
class="md-nav__button md-logo"
aria-label="{{ config.site_name }}"
data-md-component="logo"
>
{% include "partials/logo.html" %}
</a>
</label>
{% endif %}

<!-- Logo -->
<label class="md-nav__title" for="__drawer">
<a
href="{{ config.extra.homepage | d(nav.homepage.url, true) | url }}"
title="{{ config.site_name | e }}"
class="md-nav__button md-logo"
aria-label="{{ config.site_name }}"
data-md-component="logo"
>
{% include "partials/logo.html" %}
</a>
</label>
{% endif %}

<a href="{{ config.site_url }}.." class="masthead__logo">
<svg xmlns="http://www.w3.org/2000/svg" width="254" height="30" viewBox="0 0 254 30" fill="none">
<path d="M174.761 30C183.971 30 190.65 23.3195 190.65 14.8963C190.691 6.59751 183.971 0 174.761 0C165.552 0 158.831 6.51452 158.831 14.8963C158.831 23.195 165.552 30 174.761 30ZM168.373 14.8963C168.373 11.0373 171.235 8.13278 174.761 8.13278C178.246 8.13278 181.108 10.9959 181.108 14.8963C181.15 18.8382 178.287 21.8672 174.761 21.8672C171.235 21.8672 168.373 18.8382 168.373 14.8963Z"
fill="#FF9505"/>
<path d="M207.83 29.917C215.422 29.917 219.57 25.7261 220.815 23.195L214.675 19.0041C214.011 20.2075 212.518 22.2407 208.287 22.2407C204.595 22.2407 201.442 19.4606 201.442 15.0622C201.442 10.5809 204.719 7.67635 208.37 7.71784C211.813 7.75933 213.555 9.46058 214.468 10.8299L220.815 6.22406C218.907 3.15353 214.509 0.124482 207.83 0.124482C199.202 0.124482 191.9 6.0166 191.9 15.0622C191.9 24.1909 199.077 29.917 207.83 29.917Z"
fill="#FF9505"/>
<path d="M223.095 0.456431V29.5021H232.636V21.7427L235.374 19.0041L242.634 29.5021H254L242.094 12.2822L253.834 0.456431H241.845L232.636 9.70954V0.456431H223.095Z"
fill="#FF9505"/>
<path d="M153.826 0.404052L145.169 0.404051L140.258 15.9091L135.384 0.40405L126.727 0.40405L117.561 29.5021H126.182L131.056 14.0801L135.93 29.5021H144.587L149.497 14.0801L154.371 29.5021H162.992L153.826 0.404052Z"
fill="#FF9505"/>
<path d="M56.904 0.456553H47.3627V29.5022H56.904V0.456553Z" fill="#0FB2EF"/>
<path d="M60.8596 29.5022H70.401V21.7429H72.4752L77.6608 29.5022H88.4467L82.2655 20.2491C85.5428 18.4234 87.3681 15.0624 87.3681 11.1205C87.3266 5.18684 83.1782 0.456553 76.0429 0.456553H60.8596V29.5022ZM75.4206 8.04991C77.3289 8.04991 78.283 9.58518 78.283 11.1205C78.283 12.6142 77.3289 14.1495 75.4206 14.1495H70.401V8.04991H75.4206Z"
fill="#0FB2EF"/>
<path d="M90.5191 0.456553V29.5022H114.539V22.0333H100.061V18.5893H112.506V11.3694H100.061V7.92543H114.539V0.456553H90.5191Z"
fill="#0FB2EF"/>
<path d="M9.1661 29.5022H17.823L22.7334 13.9971L27.6074 29.5022H36.2643L45.4304 0.404175H36.8099L31.9358 15.8261L27.0618 0.404175H18.4049L13.4945 15.8261L8.62049 0.404175H0L9.1661 29.5022Z"
fill="#0FB2EF"/>
</svg>
</a>

<a href="{{ config.site_url }}.." class="masthead__logo">
<svg xmlns="http://www.w3.org/2000/svg" width="254" height="30" viewBox="0 0 254 30" fill="none">
<path d="M174.761 30C183.971 30 190.65 23.3195 190.65 14.8963C190.691 6.59751 183.971 0 174.761 0C165.552 0 158.831 6.51452 158.831 14.8963C158.831 23.195 165.552 30 174.761 30ZM168.373 14.8963C168.373 11.0373 171.235 8.13278 174.761 8.13278C178.246 8.13278 181.108 10.9959 181.108 14.8963C181.15 18.8382 178.287 21.8672 174.761 21.8672C171.235 21.8672 168.373 18.8382 168.373 14.8963Z"
fill="#FF9505"/>
<path d="M207.83 29.917C215.422 29.917 219.57 25.7261 220.815 23.195L214.675 19.0041C214.011 20.2075 212.518 22.2407 208.287 22.2407C204.595 22.2407 201.442 19.4606 201.442 15.0622C201.442 10.5809 204.719 7.67635 208.37 7.71784C211.813 7.75933 213.555 9.46058 214.468 10.8299L220.815 6.22406C218.907 3.15353 214.509 0.124482 207.83 0.124482C199.202 0.124482 191.9 6.0166 191.9 15.0622C191.9 24.1909 199.077 29.917 207.83 29.917Z"
fill="#FF9505"/>
<path d="M223.095 0.456431V29.5021H232.636V21.7427L235.374 19.0041L242.634 29.5021H254L242.094 12.2822L253.834 0.456431H241.845L232.636 9.70954V0.456431H223.095Z"
fill="#FF9505"/>
<path d="M153.826 0.404052L145.169 0.404051L140.258 15.9091L135.384 0.40405L126.727 0.40405L117.561 29.5021H126.182L131.056 14.0801L135.93 29.5021H144.587L149.497 14.0801L154.371 29.5021H162.992L153.826 0.404052Z"
fill="#FF9505"/>
<path d="M56.904 0.456553H47.3627V29.5022H56.904V0.456553Z" fill="#0FB2EF"/>
<path d="M60.8596 29.5022H70.401V21.7429H72.4752L77.6608 29.5022H88.4467L82.2655 20.2491C85.5428 18.4234 87.3681 15.0624 87.3681 11.1205C87.3266 5.18684 83.1782 0.456553 76.0429 0.456553H60.8596V29.5022ZM75.4206 8.04991C77.3289 8.04991 78.283 9.58518 78.283 11.1205C78.283 12.6142 77.3289 14.1495 75.4206 14.1495H70.401V8.04991H75.4206Z"
fill="#0FB2EF"/>
<path d="M90.5191 0.456553V29.5022H114.539V22.0333H100.061V18.5893H112.506V11.3694H100.061V7.92543H114.539V0.456553H90.5191Z"
fill="#0FB2EF"/>
<path d="M9.1661 29.5022H17.823L22.7334 13.9971L27.6074 29.5022H36.2643L45.4304 0.404175H36.8099L31.9358 15.8261L27.0618 0.404175H18.4049L13.4945 15.8261L8.62049 0.404175H0L9.1661 29.5022Z"
fill="#0FB2EF"/>
</svg>
</a>
<nav id="site-nav" class="masthead__nav">
<ul class="visible-links">
<li class="masthead__menu-item">
<span class="navlink">
<a href="{{ config.site_url }}"> Docs </a>
<div class="divSubNav">
<div class="divSubNav__inner">
<!-- General link --> <a href="{{ config.site_url }}docs"> WireMock </a>
<a href="{{ config.site_url }}docs/mock-api-templates"> Mock API Templates </a>
<a href="https://docs.wiremock.io/getting-started/?utm_source=wiremock.org&utm_medium=masthead_doc-links&utm_campaign=2022_baseline"> WireMock Cloud </a>
<!-- General link -->
<a href="https://wiremock.org/external-resources"> External Resources </a>
<!-- Show the preview link -->
<a href="{{ config.site_2x_url }}docs/"> WireMock 2.x (Archive) </a>
</div>
</div>
</span>
</li>
<li class="masthead__menu-item">
<span class="navlink">
<a href="{{ config.site_url }}resources/community-support"> Need Help? </a>
<div class="divSubNav">
<div class="divSubNav__inner">
<a href="{{ config.site_url }}community/slack"> Q&A on Slack </a>
<a href="https://stackoverflow.com/questions/tagged/wiremock"> StackOverflow </a>
<a href="{{ config.site_url }}resources/community-support"> Community Support </a>
<a href="{{ config.site_url }}resources/commercial-support"> Commercial Options </a>
</div>
</div>
</span>
</li>
<li class="masthead__menu-item">
<span class="navlink">
<a href="{{ config.site_url }}/participate"> Participate </a>
<div class="divSubNav">
<div class="divSubNav__inner">
<!-- General link --> <a href="{{ config.site_url }}community/slack"> Community Slack </a>
<a href="{{ config.site_url }}community/contributing/README.md"> Contributor Guide </a>
<a href="https://github.com/wiremock/"> Our GitHub org</a>
<a href="https://github.com/wiremock/wiremock.org"> This Website repo </a> <!-- General link -->
<a href="{{ config.site_url }}dotgithub/CODE_OF_CONDUCT"> Code of Conduct </a>
</div>
</div>
</span>
</li>
<li class="masthead__menu-item">
<span class="navlink">
<a href="{{ config.site_url }}resources/"> Resources </a>
<div class="divSubNav">
<div class="divSubNav__inner">
<a href="https://library.wiremock.org/"> Mock API Templates Library </a>
<a href="https://github.com/wiremock/ecosystem"> WireMock Ecosystem </a>
<a href="https://twitter.com/wiremockorg"> Twitter </a>
<a href="https://fosstodon.org/@wiremock"> Mastodon </a>
<a href="https://community.wiremock.io/"> Slack Archive </a>
<a href="{{ config.site_url }}resources/external"> External Resources </a>
</div>
</div>
</span>
</li>
</ul>
</nav>

<nav id="site-nav">
<ul class="visible-links">
<li class="masthead__menu-item">
<span class="navlink">
<a href="{{ config.site_url }}"> Docs </a>
<div class="divSubNav">
<div class="divSubNav__inner">
<!-- General link --> <a href="{{ config.site_url }}docs"> WireMock </a>
<a href="{{ config.site_url }}docs/mock-api-templates"> Mock API Templates </a>
<a href="https://docs.wiremock.io/getting-started/?utm_source=wiremock.org&utm_medium=masthead_doc-links&utm_campaign=2022_baseline"> WireMock Cloud </a>
<!-- General link -->
<a href="https://wiremock.org/external-resources"> External Resources </a>
<!-- Show the preview link -->
<a href="{{ config.site_2x_url }}docs/"> WireMock 2.x (Archive) </a>
</div>
</div>
</span>
</li>
<li class="masthead__menu-item">
<span class="navlink">
<a href="{{ config.site_url }}resources/community-support"> Need Help? </a>
<div class="divSubNav">
<div class="divSubNav__inner">
<a href="{{ config.site_url }}community/slack"> Q&A on Slack </a>
<a href="https://stackoverflow.com/questions/tagged/wiremock"> StackOverflow </a>
<a href="{{ config.site_url }}resources/community-support"> Community Support </a>
<a href="{{ config.site_url }}resources/commercial-support"> Commercial Options </a>
</div>
</div>
</span>
</li>
<li class="masthead__menu-item">
<span class="navlink">
<a href="{{ config.site_url }}/participate"> Participate </a>
<div class="divSubNav">
<div class="divSubNav__inner">
<!-- General link --> <a href="{{ config.site_url }}community/slack"> Community Slack </a>
<a href="{{ config.site_url }}community/contributing/README.md"> Contributor Guide </a>
<a href="https://github.com/wiremock/"> Our GitHub org</a>
<a href="https://github.com/wiremock/wiremock.org"> This Website repo </a> <!-- General link -->
<a href="{{ config.site_url }}dotgithub/CODE_OF_CONDUCT"> Code of Conduct </a>
</div>
</div>
</span>
</li>
<li class="masthead__menu-item">
<span class="navlink">
<a href="{{ config.site_url }}resources/"> Resources </a>
<div class="divSubNav">
<div class="divSubNav__inner">
<a href="https://library.wiremock.org/"> Mock API Templates Library </a>
<a href="https://github.com/wiremock/ecosystem"> WireMock Ecosystem </a>
<a href="https://twitter.com/wiremockorg"> Twitter </a>
<a href="https://fosstodon.org/@wiremock"> Mastodon </a>
<a href="https://community.wiremock.io/"> Slack Archive </a>
<a href="{{ config.site_url }}resources/external"> External Resources </a>
</div>
</div>
</span>
</li>
</ul>
</nav>
{% if ("material/search" in config.plugins) and (staticPage is not defined) %}
<label class="md-header__button md-icon" for="__search">
{% set icon = config.theme.icon.search or "material/magnify" %}
{% include ".icons/" ~ icon ~ ".svg" %}
</label>

{% if ("material/search" in config.plugins) and (staticPage is not defined) %}
<label class="md-header__button md-icon" for="__search">
{% set icon = config.theme.icon.search or "material/magnify" %}
{% include ".icons/" ~ icon ~ ".svg" %}
</label>
<!-- Search interface -->
{% include "partials/search.html" %}
{% endif %}

<!-- Search interface -->
{% include "partials/search.html" %}
{% endif %}
{% if staticPage is defined %}
<button class="hamburgerMenuIcon"> <img id="hamburgerMenuIcon" src="/images/hamburgerMenuIcon.svg"> </button>
{% endif %}

<div class="masthead__cta">
<a
href="https://wiremock.io/product?utm_source=wiremock.org&utm_medium=masthead&utm_campaign=homepage_2022_baseline"
title="WireMock Cloud" class="btn t-6">Go to WM Cloud</a>
<span class="masthead__cta-note">Free forever. No credit card needed</span>
</div>
<div id="overlay-menu" class="overlay-menu"></div>
<div class="mobile-menu-wrapper">
<img id="closeMenuIcon" class="closeMenuIcon" src="{{ config.site_url }}/images/closeMenuIcon.svg"/>
<ul>
<li>
<a href="https://wiremock.io?utm_source=wiremock.org&utm_medium=masthead&utm_campaign=homepage_2022_baseline"
title="WireMock Cloud" class="btn t-5"> Go to WM Cloud </a>
</li>
<li><a href="{{ config.site_url }}"> Docs </a></li>
<li><a href="{{ config.site_url }}resources/community-support"> Need Help? </a></li>
<li><a href="{{ config.site_url }}participate"> Participate </a></li>
<li><a href="{{ config.site_url }}resources/external"> Resources </a></li>
</ul>
</div>
</nav>
<div class="masthead__cta">
<a
href="https://wiremock.io/product?utm_source=wiremock.org&utm_medium=masthead&utm_campaign=homepage_2022_baseline"
title="WireMock Cloud" class="btn t-6">Go to WM Cloud</a>
<span class="masthead__cta-note">Free forever. No credit card needed</span>
</div>
<div id="overlay-menu" class="overlay-menu"></div>
<div class="mobile-menu-wrapper">
<img id="closeMenuIcon" class="closeMenuIcon" src="{{ config.site_url }}/images/closeMenuIcon.svg"/>
<ul>
<li>
<a href="https://wiremock.io?utm_source=wiremock.org&utm_medium=masthead&utm_campaign=homepage_2022_baseline"
title="WireMock Cloud" class="btn t-5"> Go to WM Cloud </a>
</li>
<li><a href="{{ config.site_url }}docs"> Docs </a></li>
<li><a href="{{ config.site_url }}resources/community-support"> Need Help? </a></li>
<li><a href="{{ config.site_url }}participate"> Participate </a></li>
<li><a href="{{ config.site_url }}resources/external"> Resources </a></li>
</ul>
</div>
</div>
</header>
25 changes: 25 additions & 0 deletions _site/js/mobile-navbar.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
const hamburgerMenuIcon = document.getElementById("hamburgerMenuIcon");
const closeMenuIcon = document.getElementById("closeMenuIcon");
const overlayMenuClick = document.getElementById("overlay-menu");
const overlayMenu = document.getElementsByClassName("overlay-menu");
const mobileMenuWrapper = document.getElementsByClassName(
"mobile-menu-wrapper"
);

closeMenuIcon.addEventListener("click", () => {
closeMenu();
});

overlayMenuClick.addEventListener("click", () => {
closeMenu();
});

hamburgerMenuIcon.addEventListener("click", () => {
overlayMenu[0].classList.add("active-overlay");
mobileMenuWrapper[0].classList.add("active-menu");
});

function closeMenu() {
overlayMenu[0].classList.remove("active-overlay");
mobileMenuWrapper[0].classList.remove("active-menu");
}
12 changes: 8 additions & 4 deletions extra_sass/_masthead.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,14 +47,13 @@

.masthead__logo {
display: flex;
margin-left: 12px;

svg {
max-width: 60vw;
}

@include breakpoint($medium-wide) {
margin-left: 12px;

svg {
width: auto;
}
Expand Down Expand Up @@ -174,11 +173,16 @@
.overlay-menu {
display: none;
}


#site-nav {
margin-right: 24px;
}

@media (max-width: 1279px) {
#site-nav,
.social-links {
display: none;
margin-right: 24px;
}

.hamburgerMenuIcon {
Expand All @@ -199,7 +203,7 @@
display: block;
background-color: #fff;
position: fixed;
right: -50vw;
right: -65vw;
top: 0;
height: 100%;
width: 50vw;
Expand Down
Loading

0 comments on commit 6bd9a74

Please sign in to comment.