Add back button to user submenu on mobile

This commit is contained in:
Joachim 2022-12-23 20:17:35 +01:00
parent 7f3b208927
commit 91d67b44fd
2 changed files with 40 additions and 0 deletions

View file

@ -1,3 +1,7 @@
.summary-on-open {
display: none;
}
@media only screen and (max-width: 768px) {
.navbar-menu {
text-align: right;
@ -6,6 +10,38 @@
.tags {
justify-content: flex-end;
}
#navbar-dropdown {
&[open] {
.summary-on-open {
display: initial;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 3rem;
z-index: 31;
background-color: $dropdown-content-background-color;
padding: 1rem 1.75rem;
line-height: 1;
}
}
.dropdown-menu {
padding-top: 0;
top: 3rem;
}
.dropdown-content {
padding-top: 0;
box-shadow: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.navbar-item {
// see ../components/_details.scss :: Navbar details
padding-right: 1.75rem;
font-size: 1rem;
}
}
}
}

View file

@ -13,6 +13,10 @@
<span class="ml-2">{{ request.user.display_name }}</span>
</span>
<span class="icon icon-arrow-down is-hidden-mobile" aria-hidden="true"></span>
<span class="summary-on-open">
<span class="icon icon-arrow-left is-small" aria-hidden="true"></span>
{% trans "Back" %}
</span>
</summary>
<div class="dropdown-menu">