Firq/firq-dev-website
Firq/firq-dev-website
1
0
Fork 0
Code Issues Pull requests Projects Releases 119 Packages Wiki Activity Actions

Dropdown change on mobile

Browse source
This commit is contained in:
Firq 2024-10-30 20:28:45 +01:00
parent d2dddbeb2a
commit f8b400bea7
Signed by: Firq
GPG key ID: 3ACC61C8CEC83C20
6 changed files with 144 additions and 121 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
package-lock.json generated
View file

@ -1,12 +1,12 @@
{
"name": "@firq/fgosite",
"version": "0.2.0-pre.43",
"version": "0.2.0-pre.46",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "@firq/fgosite",
"version": "0.2.0-pre.43",
"version": "0.2.0-pre.46",
"dependencies": {
"@astro-community/astro-embed-youtube": "^0.5.2",
"@astrojs/check": "^0.9.4",

2
package.json
View file

@ -1,7 +1,7 @@
{
"name": "@firq/fgosite",
"type": "module",
"version": "0.2.0-pre.45",
"version": "0.2.0-pre.46",
"private": true,
"scripts": {
"dev": "astro dev",

126
src/components/navbar/navbar.astro
View file

@ -1,34 +1,20 @@
---
import { Image } from 'astro:assets'
import logo from '@assets/logo.svg'
import hamburger from 'iconoir/icons/menu.svg'
const hamburger_src_url = `url("${hamburger.src}")`
import NavbarDesktop from './navbarDesktop.astro'
import NavbarLogo from './navbarLogo.astro'
import NavbarMobile from './navbarMobile.astro'
---
<header>
<a href="/" rel="noopener noreferrer" aria-label="Home" role="button">
<Image src={logo} alt="" loading="eager"/>
<span class="visually-hidden">Logo</span>
</a>
<ul class="desktop">
<NavbarLogo/>
<NavbarDesktop>
<slot name="desktop" />
</ul>
<button
class="mobile"
aria-label="Navigation Button"
tabindex="0"
onclick="this.focus()"
role="button"
>
<ul>
</NavbarDesktop>
<NavbarMobile>
<slot name="mobile" />
</ul>
<div class="placeholder"></div>
<div class="hamburger-menu" role="navigation"></div>
</button>
</NavbarMobile>
</header>
<style define:vars={{ hamburger_src_url }}>
<style>
header {
z-index: 1000;
position: sticky;
@ -41,105 +27,11 @@ const hamburger_src_url = `url("${hamburger.src}")`
line-height: 1.5em;
border-bottom: 2px solid var(--c-accent-1) ;
}
header > a {
margin-left: 16px;
padding-top: 8px;
display: block;
height: 48px;
width: 48px;
}
a > img {
height: 100%;
width: 100%;
object-fit: contain;
}
.desktop {
align-items: center;
justify-content: space-around;
display: none;
flex-wrap: wrap;
flex-direction: row;
height: 64px;
width: 100%;
list-style-type: none;
row-gap: 0.5em;
column-gap: 0.5ch;
margin: 0px;
line-height: 1.5em;
}
.mobile > ul {
background-color: var(--c-primary-background);
align-items: center;
flex-wrap: wrap;
flex-direction: column;
display: flex;
width: 100%;
list-style-type: none;
line-height: 3em;
}
.placeholder {
display: flex;
width: 100%;
}
.mobile {
display: flex;
background-color: var(--c-primary-background);
border: 0px;
width: 100%;
height: 64px;
}
.mobile > ul {
display: none;
padding: 0px;
}
.mobile:focus-within > ul {
display: flex;
}
.mobile:focus-within > .placeholder {
display: none;
}
.mobile:focus-within {
justify-content: top;
height: auto;
}
header:focus-within > a {
display: flex;
justify-self: top;
}
.hamburger-menu {
mask: var(--hamburger_src_url) no-repeat center;
mask-size: cover;
background-color: var(--c-primary-text);
width: 2.25rem;
height: 2.25rem;
position: static;
align-self: flex-start;
margin-right: 1rem;
margin-top: 0.825rem;
}
@media (min-width: 1140px) {
.mobile {
display: none;
}
.desktop {
display: flex;
}
header {
height: 64px;
align-items: center;
}
header > a {
padding-top: 0px;
}
}
</style>

29
src/components/navbar/navbarDesktop.astro Normal file
View file

@ -0,0 +1,29 @@
---
---
<ul>
<slot />
</ul>
<style>
ul {
align-items: center;
justify-content: space-around;
display: none;
flex-wrap: wrap;
flex-direction: row;
height: 64px;
width: 100%;
list-style-type: none;
row-gap: 0.5em;
column-gap: 0.5ch;
margin: 0px;
line-height: 1.5em;
}
@media (min-width: 1140px) {
ul {
display: flex;
}
}
</style>

32
src/components/navbar/navbarLogo.astro Normal file
View file

@ -0,0 +1,32 @@
---
import { Image } from 'astro:assets'
import logo from '@assets/logo.svg'
---
<a href="/" rel="noopener noreferrer" aria-label="Home" role="button">
<Image src={logo} alt="" loading="eager" />
<span class="visually-hidden">Logo</span>
</a>
<style>
a {
margin-left: 16px;
padding-top: 8px;
height: 48px;
width: 48px;
display: flex;
justify-self: top;
align-items: center;
}
a > img {
height: 42px;
width: 42px;
object-fit: contain;
}
@media (min-width: 1140px) {
a {
padding-top: 0px;
}
}
</style>

70
src/components/navbar/navbarMobile.astro Normal file
View file

@ -0,0 +1,70 @@
---
import hamburger from 'iconoir/icons/menu.svg'
const hamburger_src_url = `url("${hamburger.src}")`
---
<div class="dropdown">
<input type="checkbox" id="dropdown" />
<ul class="dropdown-content">
<slot />
</ul>
<label for="dropdown" class="dropdown-btn">
<div class="hamburger-menu" role="navigation"></div>
</label>
</div>
<style define:vars={{ hamburger_src_url }}>
input[type="checkbox"] {
opacity: 0;
position: absolute;
}
input[type="checkbox"]:checked ~ .dropdown-content {
display: flex;
height: auto;
}
.dropdown-content {
display: none;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
background-color: var(--c-primary-background);
width: 100%;
height: 0px;
list-style-type: none;
line-height: 3em;
margin: 0.5rem 0px 0px;
padding: 0;
}
.dropdown-btn {
height: 64px;
display:flex;
align-items: center;
justify-content: center;
}
.dropdown {
display: flex;
justify-content: flex-end;
background-color: var(--c-primary-background);
border: 0px;
width: 100%;
}
.hamburger-menu {
mask: var(--hamburger_src_url) no-repeat center;
mask-size: cover;
background-color: var(--c-primary-text);
width: 2.25rem;
height: 2.25rem;
margin-right: 4px;
}
@media (min-width: 1140px) {
.dropdown {
display: none;
}
}
</style>