Make account dropdown visible in mobile menu.

themes/bootstrap5/scss/bootstrap.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 $fa-font-path: "../../bootstrap5/css/vendor/font-awesome/webfonts";
 
 // Include Font Awesome
@@ -476,27 +478,30 @@ ul.list-group {
 }
 
 // Reduce the gap between the text and dropdown button:
-#account-home-nav.with-dropdown > a {
-  padding-right: calc(var(--bs-navbar-nav-link-padding-x) / 2);
+#account-home-nav.dropdown {
+  > .nav-link:not(.account-dropdown-toggle) {
+    padding-right: calc(var(--bs-navbar-nav-link-padding-x) / 2);
 
-  body.rtl & {
-    padding-left: calc(var(--bs-navbar-nav-link-padding-x) / 2);
-    padding-right: inherit;
+    body.rtl & {
+      padding-left: calc(var(--bs-navbar-nav-link-padding-x) / 2);
+      padding-right: inherit;
+    }
   }
-}
-#login-dropdown > a {
-  padding-left: calc(var(--bs-navbar-nav-link-padding-x) / 2);
-  padding-right: calc(var(--bs-navbar-nav-link-padding-x) / 2);
-  margin-right: .5rem;
 
-  body.rtl & {
-    margin-left: .5rem;
-    margin-right: inherit;
+  > a.nav-link.account-dropdown-toggle {
+    padding-left: calc(var(--bs-navbar-nav-link-padding-x) / 2);
+    padding-right: calc(var(--bs-navbar-nav-link-padding-x) / 2);
+    margin-right: .5rem;
+
+    body.rtl & {
+      margin-left: .5rem;
+      margin-right: inherit;
+    }
   }
 }
 
-#login-dropdown .dropdown-menu {
-  width: 250px;
+#account-home-nav .dropdown-menu {
+  width: 300px;
   padding: 0 0.5rem 0.5rem 0.5rem;
 
   .account-menu {
@@ -506,9 +511,11 @@ ul.list-group {
   h3 {
     margin-left: 0.5rem;
   }
+
+  @media (max-width: #{300px + 4 * $navbar-padding-x}) {
+    width: calc(100vw - #{4 * $navbar-padding-x});
+  }
 }
-#login-dropdown
-#login-dropdown .dropdown-menu .account-menu { display: block; }
 .login-tokens-table {
   margin-bottom: 0.5rem;
   tbody > tr > td {

themes/bootstrap5/templates/header.phtml

@@ -31,20 +31,18 @@
           <?php endif; ?>
           <?php if (is_object($account) && $account->loginEnabled()): // hide login/logout if unavailable ?>
             <?php if ($account->getIdentity()): ?>
-              <li id="account-home-nav" class="nav-item logoutOptions<?php if ($account->dropdownEnabled()): ?> with-dropdown<?php endif ?>">
+              <li id="account-home-nav" class="nav-item logoutOptions<?php if ($account->dropdownEnabled()): ?> dropdown<?php endif ?>">
                 <a href="<?=$this->url('myresearch-home', [], ['query' => ['redirect' => 0]])?>" class="nav-link icon-link">
                   <span id="account-icon" class="icon-link__icon" role="link"><?=$this->icon('my-account') ?></span>
                   <span class="icon-link__label"><?=$this->transEsc('Your Account')?></span>
                 </a>
-              </li>
-              <?php if ($account->dropdownEnabled()): ?>
-                <li id="login-dropdown" class="nav-item dropdown hidden-xs">
-                  <a class="nav-link" href="#" data-bs-toggle="dropdown"><?=$this->icon('dropdown-caret') ?></a>
+                <?php if ($account->dropdownEnabled()): ?>
+                  <a class="nav-link account-dropdown-toggle" href="#" data-bs-toggle="dropdown"><?=$this->icon('dropdown-caret') ?></a>
                   <div class="dropdown-menu">
                     <?=$this->accountMenu()->render('', 'header_')?>
                   </div>
-                </li>
-              <?php endif; ?>
+                <?php endif; ?>
+              </li>
               <li class="nav-item logoutOptions">
                 <a href="<?=$this->url('myresearch-logout')?>" class="nav-link logout icon-link">
                   <?=$this->icon('sign-out', 'icon-link__icon') ?>