github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-11-25 08:53:55 +08:00
Code Issues Actions Packages Projects Releases 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-radius: 4px;
padding: 0 $-xs;
position: absolute;
right: $-m;
top: 13px;
line-height: 1;
cursor: pointer;
user-select: none;
@ -215,20 +212,15 @@ header .search-box.search-active:focus-within {
margin: 0;
bottom: -2px;
}
@include rtl() {
left: $-m;
right: auto;
}
}
@include smaller-than($l) {
header .header-links {
@include lightDark(background-color, #fff, #333);
display: none;
z-index: 10;
right: $-m;
inset-inline-end: $-m;
border-radius: 4px;
overflow: hidden;
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">
<div>
<div class="flex-container-row justify-space-between gap-s items-center">
@include('layouts.parts.header-logo')
<button type="button"
refs="header-mobile-toggle@toggle"
title="{{ trans('common.header_menu_expand') }}"
aria-expanded="false"
class="mobile-menu-toggle hide-over-l">@icon('more')</button>
<div class="hide-over-l py-s">
<button type="button"
refs="header-mobile-toggle@toggle"
title="{{ trans('common.header_menu_expand') }}"
aria-expanded="false"
class="mobile-menu-toggle">@icon('more')</button>
</div>
</div>
<div class="flex-container-column items-center justify-center hide-under-l">