Skip to content

Commit

Permalink
Improve mobile menu.
Browse files Browse the repository at this point in the history
  • Loading branch information
@Chralu
Chralu committed May 26, 2024
1 parent 479bd0b commit ec608ac
Show file tree
Hide file tree
Showing 2 changed files with 118 additions and 93 deletions.
42 changes: 17 additions & 25 deletions _includes/header.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,22 @@
<a href="/">{%- picture /assets/global/img/logo_fundit.png --alt 'Logo FundIt' -%}</a>
</div>

<label for="nav-trigger">
<span class="menu-icon">
<svg viewBox="0 0 18 15" width="18px" height="15px">
<path
d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z">
</path>
</svg>
</span>
<input type="checkbox" id="menu-toggle" class="menu-toggle">
<label class="menu-button-container" for="menu-toggle">
<div class="menu-button"></div>
</label>
<nav class="site-nav">
<input type="checkbox" id="nav-trigger" class="nav-trigger">
<ul class="trigger">
{%- for site_page in site.pages -%}
{%- if site_page.hide != true -%}
{%- if site_page.url != "/" -%}
{%- if site_page.title -%}
<li><a class="navigation-link page-link {% if page.path == site_page.path %}current{% endif %}"
href="{% if page.path == site_page.path %}#{% else %}{{ site_page.url | relative_url }}{% endif %}">{{
site_page.title | escape }}</a></li>
{%- endif -%}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
<li><a class="navigation-link page-link--outlined" href="/profile">My profile</a></li>
</ul>
</nav>
<ul class="menu">
{%- for site_page in site.pages -%}
{%- if site_page.hide != true -%}
{%- if site_page.url != "/" -%}
{%- if site_page.title -%}
<li><a class="navigation-link page-link {% if page.path == site_page.path %}current{% endif %}"
href="{% if page.path == site_page.path %}#{% else %}{{ site_page.url | relative_url }}{% endif %}">{{
site_page.title | escape }}</a></li>
{%- endif -%}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
<li><a class="navigation-link page-link--outlined" href="/profile">My profile</a></li>
</ul>
</header>
169 changes: 101 additions & 68 deletions _sass/_header.sass
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,85 +31,118 @@ header
opacity: 1

@media screen and (max-width: $breakpoint-small)
label[for="nav-trigger"]
padding: 16pt
position: relative
right: -16pt
// align-content: center
.site-nav
.menu-button-container
position: absolute
top: 20pt
right: 20pt
display: flex
height: 30px
width: 30px
cursor: pointer
flex-direction: column
justify-content: center
align-items: center

.menu
position: absolute
top: 55pt
z-index: 2
background-color: $card-color
border-top: 5pt solid $text-color
font: 400 $font-size-regular $font-inter
padding: 12pt 0
box-shadow: 0pt 8pt 12pt
top: 0
margin-top: 85px
left: 0
right: 0

.trigger
background-color: $card-color
border-top: 5pt solid $text-color
font: 400 $font-size-regular $font-inter
padding: 12pt 0
box-shadow: 0pt 8pt 12pt

input:checked
~
.trigger
display: flex
flex-flow: column
justify-content: right
gap: 0
animation: slide-in 0.3s both
input
~
.trigger
display: none
animation: slide-out 0.3s both
#menu-toggle:checked
~
.menu
display: flex
flex-flow: column
justify-content: right
gap: 0
animation: slide-in 0.3s both

#menu-toggle
~
.menu
display: none
animation: slide-out 0.3s both

@media screen and (min-width: $breakpoint-small)
label[for="nav-trigger"]
.menu-button-container
display: none
.site-nav
.menu
background-color: transparent
font: 400 $font-size-small $font-inter

.trigger
background-color: transparent
font: 400 $font-size-small $font-inter

.nav-trigger
#menu-toggle
display: none

.site-nav
z-index: 2
.trigger
display: flex
flex-flow: row
gap: 8pt
list-style: none
.menu
display: flex
flex-flow: row
gap: 8pt
list-style: none

.page-link
color: black

.page-link.current
font-weight: 700

@media screen and (max-width: $breakpoint-small)
.page-link
width: 100%
padding: 8pt 12pt

@media screen and (max-width: $breakpoint-small)
.page-link--outlined
width: 100%
color: black

.page-link.current
font-weight: 700

@media screen and (max-width: $breakpoint-small)
.page-link
width: 100%
padding: 8pt 12pt

@media screen and (max-width: $breakpoint-small)
.page-link--outlined
width: 100%
color: black

@media screen and (min-width: $breakpoint-small)
.page-link--outlined
color: white
background-color: $text-color
text-decoration: none
display: block
border: 0
border-radius: 20pt
text-align: center
padding: 6pt 12pt
opacity: 1
margin-top: 2pt
margin-bottom: 2pt
@media screen and (min-width: $breakpoint-small)
.page-link--outlined
color: white
background-color: $text-color
text-decoration: none
display: block
border: 0
border-radius: 20pt
text-align: center
padding: 6pt 12pt
opacity: 1
margin-top: 2pt
margin-bottom: 2pt

.menu-button,
.menu-button::before,
.menu-button::after
display: block
background-color: $text-color
position: absolute
height: 4px
width: 30px
transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1)
border-radius: 2px

.menu-button::before
content: ''
margin-top: -8px

.menu-button::after
content: ''
margin-top: 8px

#menu-toggle:checked + .menu-button-container .menu-button::before
margin-top: 0px
transform: rotate(405deg)

#menu-toggle:checked + .menu-button-container .menu-button
background: rgba(255, 255, 255, 0)

#menu-toggle:checked + .menu-button-container .menu-button::after
margin-top: 0px
transform: rotate(-405deg)

0 comments on commit ec608ac

Please sign in to comment.