angestoepselt/homepage
5
0
Fork 0
mirror of https://codeberg.org/angestoepselt/homepage.git synced 2025-05-24 14:46:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Use details elements for the mobile navigation

Browse source
This commit is contained in:
Yannik Rödel 2021-07-08 16:28:24 +02:00
parent 8b78fe1690
commit 5c1826eea2
3 changed files with 93 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
_includes/layouts/base.njk
View file

@ -13,13 +13,11 @@
<link rel="alternate" href="{{ metadata.jsonfeed.path | url }}" type="application/json" title="{{ metadata.title }}"> <link rel="alternate" href="{{ metadata.jsonfeed.path | url }}" type="application/json" title="{{ metadata.title }}">
</head> </head>
<body> <body>
<header> <header class="site-header">
<header id="navigation" class="site-header"> <a class="site-logo" href="{{ '/' | url }}">{{ metadata.title }}</a>
<a class="site-logo" href="{{ '/' | url }}">{{ metadata.title }}</a>
<a class="navigation-toggle show" href="#navigation">Menü</a>
<a class="navigation-toggle hide" href="#">Schließen</a>
<details class="site-mobile-navigation">
<summary>Menü</summary>
<nav class="site-navigation"> <nav class="site-navigation">
<ul> <ul>
{% for entry in collections.topNavigation | eleventyNavigation %} {% for entry in collections.topNavigation | eleventyNavigation %}
@ -31,7 +29,19 @@
{% endfor %} {% endfor %}
</ul> </ul>
</nav> </nav>
</header> </details>
<nav class="site-navigation horizontal">
<ul>
{% for entry in collections.topNavigation | eleventyNavigation %}
<li{% if entry.url == page.url %} class="active"{% endif %}>
<a href="{{ entry.url }}">
{{ entry.title }}
</a>
</li>
{% endfor %}
</ul>
</nav>
</header> </header>
<main id="content" {% if templateClass %} class="{{ templateClass }}"{% endif %}> <main id="content" {% if templateClass %} class="{{ templateClass }}"{% endif %}>

7
second.md Normal file
View file

@ -0,0 +1,7 @@
---
layout: layouts/page.njk
eleventyNavigation:
key: Zweite Seite
order: 2
---
## Das ist die zweite Seite

135
styles/_components.scss
View file

@ -6,50 +6,9 @@
// Site-wide components // Site-wide components
// -------------------- // --------------------
// CSS-Only navigation toggle. This works by hiding the navigation on small @mixin header-item {
// screens and only revealing it when the link has been clicked (and the URL padding: 0 layout.$normal-gap;
// hash points to #navigation). On larger screens, it is always shown and the line-height: 3rem;
// toggle is hidden. This should probably be switched to a <details> element.
#navigation {
.site-navigation {
display: none;
}
&:target {
.navigation-toggle {
&.show {
display: none;
}
&.hide {
display: block;
}
}
.site-navigation {
display: block;
}
}
@media (screen and min-width: layout.$breakpoint) {
.site-navigation {
flex: 0;
display: block;
ul {
display: flex;
margin-bottom: 0;
a {
display: inline-block;
}
}
}
.navigation-toggle {
display: none;
}
}
} }
// The site logo text. More specific styles for this element are also present // The site logo text. More specific styles for this element are also present
@ -63,9 +22,19 @@
// the footer. The former also has some specific styles (see .site-header // the footer. The former also has some specific styles (see .site-header
// below). // below).
.site-navigation { .site-navigation {
flex-basis: 100%; &.horizontal {
> ul {
display: flex;
margin-bottom: 0;
}
ul { a {
display: inline-block;
@include header-item;
}
}
> ul {
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
@ -73,6 +42,7 @@
a { a {
display: block; display: block;
padding: layout.$small-gap;
font-size: typography.$large-size; font-size: typography.$large-size;
font-weight: typography.$emphasized-weight; font-weight: typography.$emphasized-weight;
text-align: center; text-align: center;
@ -81,40 +51,73 @@
} }
} }
.site-mobile-navigation {
cursor: pointer;
> summary {
display: block;
@include header-item;
}
&[open] {
flex-basis: 100%;
> summary {
// The positioning requires that the header component has relative
// positioning.
position: absolute;
top: 0;
right: 0;
color: colors.$blue-800;
}
}
// This is the next site navigation block (the one that's visible on desktop),
// while...
+ .site-navigation {
display: none;
}
// ... this here is the one inside the mobile-only <details> block.
> .site-navigation {
&::before {
content: '';
display: block;
margin: 0 auto;
width: calc(100% - #{2 * layout.$normal-gap});
height: 1px;
background-color: colors.$gray-300;
}
}
@media screen and (min-width: layout.$breakpoint) {
display: none;
+ .site-navigation {
display: block;
}
}
}
.site-header { .site-header {
display: flex; display: flex;
// This container needs to wrap because when the navigation is open on small // This container needs to wrap because when the navigation is open on small
// screens, we want it to overflow into its own line. // screens, we want it to overflow into its own line.
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
// Relative positioning is required here so that we can fake the menu button's
// location on mobile.
position: relative; position: relative;
z-index: 10; z-index: 10;
background-color: colors.$main-background; background-color: colors.$main-background;
@include colors.block-shadow; @include colors.block-shadow;
a { > .site-logo {
padding: 0 layout.$normal-gap;
line-height: 3rem;
}
.site-logo {
flex-grow: 1; flex-grow: 1;
padding: 0; margin: 0;
font-size: typography.$large-size; font-size: typography.$large-size;
text-decoration: none; text-decoration: none;
} @include header-item;
.site-navigation ul {
margin: 0 0 layout.$small-gap 0;
}
.navigation-toggle {
display: block;
padding: 0 layout.$normal-gap;
&.hide {
display: none;
}
} }
} }