LP1975390 Mobile opac user login status concealed

It isn't immediately apparent if a mobile user in the Bootstrap opac is
logged in.  This patch displays 'Login to My Account' or 'Logout' outside
of the collapsible section of the menu so that these links display
next to the collapsed hamburger button.  If the menu is collapsed, these
options are also suppressed from the expanded menu.

To test:
1. Resize the opac screen until the menu collapses and notice that you
have to expand the menu to login.
2. Login and notice that in mobile screen that the only way to know that
you are logged in is to expand the collapsed menu.
3. Apply patch.
4. Now either 'Login to My Account' or 'Logout' is displayed next to
the collapse button, and these options no longer appear in the expanded menu.
5. Resize the screen and notice that either 'Login to My Account' or 'Logout'
appear in the menu bar.

Signed-off-by: Garry Collum <gcollum@gmail.com>

diff --git a/Open-ILS/src/templates-bootstrap/opac/parts/topnav_links.tt2 b/Open-ILS/src/templates-bootstrap/opac/parts/topnav_links.tt2
index 7d6d510..9948b2e 100755 (executable)
--- a/Open-ILS/src/templates-bootstrap/opac/parts/topnav_links.tt2
+++ b/Open-ILS/src/templates-bootstrap/opac/parts/topnav_links.tt2
@@ -1,9 +1,29 @@
 <nav class="navbar navbar-expand-lg navbar-dark ">
 <!--Home-->
   [% INCLUDE "opac/parts/topnav_logo.tt2" %]
+
+  <div class="d-flex flex-row">
+  <ul class="navbar-nav d-block d-lg-none px-3">
+    [% IF !ctx.user %]
+        <li class="nav-item">
+           [% IF ctx.page != 'login' %]
+           <a href="#loginModal" data-toggle="modal" data-target="#loginModal" class="nav-link login">
+           [% ELSE %] <a href="/eg/opac/login" class="nav-link login">
+            [% END %] [% l('Login to My Account') %] </a>
+        </li>
+    [% ELSE %]
+      <!--User is signed in-->
+        <!--Logout-->
+        <li class="nav-item">
+        <a class="nav-link" href="[% mkurl(ctx.opac_root _ '/logout', {}, 1) %]" id="logout_link">[% l('Logout') %]</a>
+        </li>
+    [% END %]
+  </ul>
+
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
   </button>
+  </div>
   <div class="collapse navbar-collapse" id="navbarNav">
   <!--Left Links-->
 
@@ -30,11 +50,11 @@
     <ul class="navbar-nav ml-auto nav-fr px-3">
       <!--If not signed in, show sign in button-->
     [% IF !ctx.user %]
-        <li class="nav-item">
+        <li class="nav-item d-none d-lg-block">
            [% IF ctx.page != 'login' %]
            <a href="#loginModal" data-toggle="modal" data-target="#loginModal" class="nav-link login">
            [% ELSE %] <a href="/eg/opac/login" class="nav-link login">
-            [% END %] [% l('My Account') %] </a>
+            [% END %] [% l('Login to My Account') %] </a>
         </li>
       <!--User is signed in-->
     [% ELSE %]
@@ -64,7 +84,7 @@
         <a class="nav-link" href="[% mkurl(ctx.opac_root _ '/myopac/lists', {}, ['single', 'message_id']) %]">[% l('My Lists') %]</a>
         </li>
         <!--Logout-->
-        <li class="nav-item">
+        <li class="nav-item d-none d-lg-block">
         <a class="nav-link" href="[% mkurl(ctx.opac_root _ '/logout', {}, 1) %]" id="logout_link">[% l('Logout') %]</a>
         </li>
       [% END %]