luisgulo/BookStack
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Header: Fixed mobile menu falling out of header

Browse source 
Changed button to be within-DOM rather than absolute positioned.
Also improves RTL handling by showing menu on the right side.

Fixes #4841
This commit is contained in:
Dan Brown 2024-02-13 14:00:34 +00:00
parent ff8daad22b
commit 12daa1c2b9
No known key found for this signature in database
GPG key ID: 46D9F943C24A2EF9
2 changed files with 9 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
resources/sass/_header.scss
View file

@ -205,9 +205,6 @@ header .search-box.search-active:focus-within {
border: 2px solid rgba(255, 255, 255, 0.8); border: 2px solid rgba(255, 255, 255, 0.8);
border-radius: 4px; border-radius: 4px;
padding: 0 $-xs; padding: 0 $-xs;
position: absolute;
right: $-m;
top: 13px;
line-height: 1; line-height: 1;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
@ -215,20 +212,15 @@ header .search-box.search-active:focus-within {
margin: 0; margin: 0;
bottom: -2px; bottom: -2px;
} }
@include rtl() {
left: $-m;
right: auto;
}
} }
@include smaller-than($l) { @include smaller-than($l) {
header .header-links { header .header-links {
@include lightDark(background-color, #fff, #333); @include lightDark(background-color, #fff, #333);
display: none; display: none;
z-index: 10; z-index: 10;
right: $-m; inset-inline-end: $-m;
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;

14
resources/views/layouts/parts/header.blade.php
View file

@ -1,11 +1,13 @@
<header id="header" component="header-mobile-toggle" class="primary-background px-xl grid print-hidden"> <header id="header" component="header-mobile-toggle" class="primary-background px-xl grid print-hidden">
<div> <div class="flex-container-row justify-space-between gap-s items-center">
@include('layouts.parts.header-logo') @include('layouts.parts.header-logo')
<button type="button" <div class="hide-over-l py-s">
refs="header-mobile-toggle@toggle" <button type="button"
title="{{ trans('common.header_menu_expand') }}" refs="header-mobile-toggle@toggle"
aria-expanded="false" title="{{ trans('common.header_menu_expand') }}"
class="mobile-menu-toggle hide-over-l">@icon('more')</button> aria-expanded="false"
class="mobile-menu-toggle">@icon('more')</button>
</div>
</div> </div>
<div class="flex-container-column items-center justify-center hide-under-l"> <div class="flex-container-column items-center justify-center hide-under-l">