Skip to content

Commit

Permalink
feat: add burger menu, hide footer picture on mobile
Browse files Browse the repository at this point in the history
  • Loading branch information
@hellagirrl
hellagirrl committed Jan 16, 2024
1 parent 9af306d commit a3c82ac
Show file tree
Hide file tree
Showing 4 changed files with 212 additions and 9 deletions.
13 changes: 12 additions & 1 deletion frontend/src/scss/layout/_footer.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,13 @@
margin-top: 60px;
}

&__pic {
margin-right: 30px;
}

&__contacts {
color: $inverse-primary-txt-color;
margin: 0 30px;
margin: 0;
display: flex;
flex-direction: column;
align-items: baseline;
Expand All @@ -53,10 +57,17 @@
.contacts-info {
&__item {
font-size: 1.125em;

&:not(:last-child) {
margin-bottom: 20px;
}
}
}
}

@media (width <= 1024px) {
.page-footer__pic {
display: none;
}
}
}
101 changes: 97 additions & 4 deletions frontend/src/scss/layout/_header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,10 @@
justify-content: space-between;
}

&__donate {
margin-left: 78px;
}

.logo {
color: $accent-txt-color;
font-weight: 900;
Expand All @@ -28,6 +32,7 @@
.page-menu {
display: flex;
gap: 40px;
margin-left: auto;
list-style: none;
align-items: baseline;

Expand All @@ -36,11 +41,10 @@
text-decoration: none;
font-size: 0.875em;
transition: 0.5s;
}

// TODO: get from mixin or create @media: hover (check after Rustam's PR approval)
&__link:hover {
color: $accent-txt-color;
@include activeHover {
color: $accent-txt-color;
}
}
}

Expand All @@ -51,4 +55,93 @@
opacity: 0.1;
border-width: 0;
}

.burger {
position: relative;
outline: none;
border: none;
background: none;
height: 32px;
width: 32px;
display: flex;
flex-direction: column;
z-index: 2;
cursor: pointer;
padding: 0;
justify-content: center;
}

.burger__dash {
--height: 3px;
--margin: 6px;
--translate-y: calc(var(--margin) / 3 + var(--height));

position: absolute;
width: 100%;
height: var(--height);
background-color: $primary-bg-color;
transition: 0.3s;
}

.burger__dash:nth-child(2) {
top: 50%;
left: 50%;

transform: translate(-50%, -50%);
}

.burger__dash:first-child {
top: 0;
}

.burger__dash:last-child {
bottom: 0;
}

.burger--opened .burger__dash:nth-child(2) {
transform: translate(-50%, -50%) scaleX(0);
}

.burger--opened .burger__dash:first-child {
transform: translateY(var(--translate-y)) rotate(45deg);
top: 30%;
}

.burger--opened .burger__dash:last-child {
transform: translateY(var(--translate-y)) rotate(-45deg);
top: 30%;
}

@media (width >= 1025px) {
.burger {
display: none;
}
}

@media (width <= 1024px) {
.page-menu, .page-header__donate {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background-color: var(--color-bg-secondary);
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
transform: translateX(-100%);
transition: transform 0.5s;
}

.page-menu--opened {
transform: translateX(0);
}

.page-menu__link {
display: block;
padding: 2rem 1rem;
font-size: 2rem;
}
}
}
96 changes: 94 additions & 2 deletions frontend/src/static/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -510,6 +510,9 @@ template {
height: 90px;
}
}
.page-header__donate {
margin-left: 78px;
}
.page-header .logo {
color: #00a9a6;
font-weight: 900;
Expand All @@ -518,6 +521,7 @@ template {
.page-header .page-menu {
display: flex;
gap: 40px;
margin-left: auto;
list-style: none;
align-items: baseline;
}
Expand All @@ -527,7 +531,12 @@ template {
font-size: 0.875em;
transition: 0.5s;
}
.page-header .page-menu__link:hover {
@media (hover: hover) {
.page-header .page-menu__link:hover {
color: #00a9a6;
}
}
.page-header .page-menu__link:active {
color: #00a9a6;
}
.page-header hr {
Expand All @@ -537,6 +546,81 @@ template {
opacity: 0.1;
border-width: 0;
}
.page-header .burger {
position: relative;
outline: none;
border: none;
background: none;
height: 32px;
width: 32px;
display: flex;
flex-direction: column;
z-index: 2;
cursor: pointer;
padding: 0;
justify-content: center;
}
.page-header .burger__dash {
--height: 3px;
--margin: 6px;
--translate-y: calc(var(--margin) / 3 + var(--height));
position: absolute;
width: 100%;
height: var(--height);
background-color: #f6f6f6;
transition: 0.3s;
}
.page-header .burger__dash:nth-child(2) {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.page-header .burger__dash:first-child {
top: 0;
}
.page-header .burger__dash:last-child {
bottom: 0;
}
.page-header .burger--opened .burger__dash:nth-child(2) {
transform: translate(-50%, -50%) scaleX(0);
}
.page-header .burger--opened .burger__dash:first-child {
transform: translateY(var(--translate-y)) rotate(45deg);
top: 30%;
}
.page-header .burger--opened .burger__dash:last-child {
transform: translateY(var(--translate-y)) rotate(-45deg);
top: 30%;
}
@media (width >= 1025px) {
.page-header .burger {
display: none;
}
}
@media (width <= 1024px) {
.page-header .page-menu, .page-header .page-header__donate {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background-color: var(--color-bg-secondary);
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
transform: translateX(-100%);
transition: transform 0.5s;
}
.page-header .page-menu--opened {
transform: translateX(0);
}
.page-header .page-menu__link {
display: block;
padding: 2rem 1rem;
font-size: 2rem;
}
}

/* =========================
Colors
Expand Down Expand Up @@ -592,9 +676,12 @@ template {
display: flex;
margin-top: 60px;
}
.page-footer__pic {
margin-right: 30px;
}
.page-footer__contacts {
color: #fff;
margin: 0 30px;
margin: 0;
display: flex;
flex-direction: column;
align-items: baseline;
Expand All @@ -612,6 +699,11 @@ template {
.page-footer__contacts .contacts-info__item:not(:last-child) {
margin-bottom: 20px;
}
@media (width <= 1024px) {
.page-footer .page-footer__pic {
display: none;
}
}

/* =========================
Colors
Expand Down
11 changes: 9 additions & 2 deletions frontend/src/templates/general/header.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,22 @@
<header class="page-header">
<div class="page-header__in">
<p class="logo">{{ header_databag.shelter_name }}</p>

<ul class="page-menu">
{% for item in header_databag.menu_items %}
<li class="page-menu__item">
<a class="page-menu__link" href="{{ item.link }}">{{ item.title }}</a>
</li>
{% endfor %}
{# TODO: add button (after Rustam's PR approval) #}
<button class="button button--size-s" type="button">Donate</button>
</ul>

<button class="button button--size-s page-header__donate" type="button">Donate</button>

<button class="burger">
<span class="burger__dash"></span>
<span class="burger__dash"></span>
<span class="burger__dash"></span>
</button>
</div>
<hr>
</header>

0 comments on commit a3c82ac

Please sign in to comment.