From fc624a406f398225a6a0d72b12ba96a19a8b43d7 Mon Sep 17 00:00:00 2001
From: Peter Wolfersberger <peter@The-Library-Code.de>
Date: Tue, 27 Sep 2022 15:19:00 +0200
Subject: [PATCH] Workaround missing navbar @768px for dspace and custom
 templates

The treatment of the breakpoints is inconsistent. md is defined as
768px<=md<992px.
The statement
@media screen and (max-width: map-get($grid-breakpoints, md)) {}
,which is in some instances used at the moment for referencing break intervals BELOW md includes the lower md border which should be excluded.
The sass mixin
@include media-breakpoint-down($name) {}
or function
breakpoint-max($name)
for some unknown reason don't work, so this is a workaround.
---
 src/app/navbar/navbar.component.scss               | 4 ++--
 src/themes/dspace/app/navbar/navbar.component.scss | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/navbar/navbar.component.scss b/src/app/navbar/navbar.component.scss
index d131bf95bf..3a9a302b06 100644
--- a/src/app/navbar/navbar.component.scss
+++ b/src/app/navbar/navbar.component.scss
@@ -4,7 +4,7 @@ nav.navbar {
 }
 
 /** Mobile menu styling **/
-@media screen and (max-width: map-get($grid-breakpoints, md)) {
+@media screen and (max-width: map-get($grid-breakpoints, md)-0.02) {
     .navbar {
         width: 100vw;
         background-color: var(--bs-white);
@@ -26,7 +26,7 @@ nav.navbar {
 
 /* TODO remove when https://github.com/twbs/bootstrap/issues/24726 is fixed */
 .navbar-expand-md.navbar-container {
-    @media screen and (max-width: map-get($grid-breakpoints, md)) {
+    @media screen and (max-width: map-get($grid-breakpoints, md)-0.02) {
         > .container {
             padding: 0 var(--bs-spacer);
         }
diff --git a/src/themes/dspace/app/navbar/navbar.component.scss b/src/themes/dspace/app/navbar/navbar.component.scss
index 210847c1d9..1ad95cb8aa 100644
--- a/src/themes/dspace/app/navbar/navbar.component.scss
+++ b/src/themes/dspace/app/navbar/navbar.component.scss
@@ -6,7 +6,7 @@ nav.navbar {
 }
 
 /** Mobile menu styling **/
-@media screen and (max-width: map-get($grid-breakpoints, md)) {
+@media screen and (max-width: map-get($grid-breakpoints, md)-0.02) {
   .navbar {
     width: 100%;
     background-color: var(--bs-white);
@@ -28,7 +28,7 @@ nav.navbar {
 
 /* TODO remove when https://github.com/twbs/bootstrap/issues/24726 is fixed */
 .navbar-expand-md.navbar-container {
-  @media screen and (max-width: map-get($grid-breakpoints, md)) {
+  @media screen and (max-width: map-get($grid-breakpoints, md)-0.02) {
     > .container {
       padding: 0 var(--bs-spacer);
       a.navbar-brand {