From 0382a06182bbd7d41d11205d49ec6685f9619c5b Mon Sep 17 00:00:00 2001
From: Alan Orth <alan.orth@gmail.com>
Date: Wed, 27 Dec 2023 15:51:36 +0300
Subject: [PATCH] src/themes/cgspace: fix navbar on mobile

This is uglier than I am comfortable with, but we have no choice...

The code is a mix of that from the dspace theme and the main app's
navbar component SCSS, and the whitespace is horrible. But it fixes
the navbar menus on mobile...
---
 .../cgspace/app/navbar/navbar.component.scss  | 66 ++++++++++++++++++-
 1 file changed, 65 insertions(+), 1 deletion(-)

diff --git a/src/themes/cgspace/app/navbar/navbar.component.scss b/src/themes/cgspace/app/navbar/navbar.component.scss
index b2634545716..ffb068bae8b 100644
--- a/src/themes/cgspace/app/navbar/navbar.component.scss
+++ b/src/themes/cgspace/app/navbar/navbar.component.scss
@@ -1 +1,65 @@
-@import '../../../dspace/app/navbar/navbar.component';
+nav.navbar {
+  background-color: var(--ds-navbar-bg);
+  align-items: baseline;
+}
+
+/** Mobile menu styling **/
+@media screen and (max-width: map-get($grid-breakpoints, md)-0.02) {
+  .navbar {
+    width: 100vw;
+    background-color: var(--bs-white);
+    position: absolute;
+    overflow: hidden;
+    height: 0;
+    z-index: var(--ds-nav-z-index);
+
+    &.open {
+      height: auto;
+      min-height: 100vh;
+      border-bottom: 5px var(--ds-header-navbar-border-bottom-color) solid;
+    }
+  }
+}
+
+@media screen and (min-width: map-get($grid-breakpoints, md)) {
+  .reset-padding-md {
+    margin-left: calc(var(--bs-spacer) / -2);
+    margin-right: calc(var(--bs-spacer) / -2);
+  }
+}
+
+/* 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)-0.02) {
+    >.navbar-inner-container {
+      padding: 0 var(--bs-spacer);
+
+      a.navbar-brand {
+        display: none;
+      }
+
+      .navbar-collapsed {
+        display: none;
+      }
+    }
+
+    padding: 0;
+  }
+
+  height: 80px;
+}
+
+a.navbar-brand img {
+  max-height: var(--ds-header-logo-height);
+}
+
+.navbar-nav {
+  ::ng-deep a.nav-link {
+    color: var(--ds-navbar-link-color);
+
+    &:hover,
+    &:focus {
+      color: var(--ds-navbar-link-color-hover);
+    }
+  }
+}