From 4c95f4d631f6ac13eb5c3e78da0b63af7e4563c1 Mon Sep 17 00:00:00 2001
From: Gang Li <ligangty@users.noreply.github.com>
Date: Thu, 23 Nov 2023 17:18:08 +0800
Subject: [PATCH] Align the user info section to upper right

---
 .../src/app/components/nav/NavHeader.jsx      | 24 ++++++++++---------
 .../src/app/components/nav/NavHeader.test.jsx |  2 +-
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/main/webui/src/app/components/nav/NavHeader.jsx b/src/main/webui/src/app/components/nav/NavHeader.jsx
index 7a1749c..eaf5696 100644
--- a/src/main/webui/src/app/components/nav/NavHeader.jsx
+++ b/src/main/webui/src/app/components/nav/NavHeader.jsx
@@ -30,7 +30,7 @@ export default function NavHeader(){
     <nav className="navbar fixed-top navbar-expand-lg navbar-light bg-light" role="navigation">
       <Link className="navbar-brand" to="">Indy</Link>
       <div className="collapse navbar-collapse" id="navbarSupportedContent">
-        <ul className="navbar-nav mr-auto">
+        <ul className="navbar-nav me-auto">
           {
             [
               {type: "remote", desc: "Remote Repositories"},
@@ -52,7 +52,7 @@ export default function NavHeader(){
           <Button href="/q/swagger-ui/" variant="secondary" className="mx-1">REST API</Button>
           <Dropdown data-bs-theme="dark" className="mx-1">
             <Dropdown.Toggle id={`dropdown-button-dark-addons`} variant="secondary">
-              more
+              More
             </Dropdown.Toggle>
             <Dropdown.Menu>
               <LinkContainer to="/nfc">
@@ -63,16 +63,18 @@ export default function NavHeader(){
               </LinkContainer>
             </Dropdown.Menu>
           </Dropdown>
-          { isUserloggedIn && <Dropdown data-bs-theme="dark" className="mx-1">
-              <Dropdown.Toggle id={`dropdown-button-dark-addons`} variant="link">
-                {username}
-              </Dropdown.Toggle>
-              <Dropdown.Menu>
-                <Dropdown.Item href="/logout" variant="link">Log Out</Dropdown.Item>
-              </Dropdown.Menu>
-            </Dropdown>
+          </ul>
+          { isUserloggedIn && <ul className="navbar-nav ms-auto">
+              <Dropdown data-bs-theme="dark" className="mx-1">
+                <Dropdown.Toggle id={`dropdown-button-dark-addons`} variant="link">
+                  {username}
+                </Dropdown.Toggle>
+                <Dropdown.Menu>
+                  <Dropdown.Item href="/logout" variant="link">Log Out</Dropdown.Item>
+                </Dropdown.Menu>
+              </Dropdown>
+            </ul>
           }
-        </ul>
       </div>
     </nav>
   );
diff --git a/src/main/webui/src/app/components/nav/NavHeader.test.jsx b/src/main/webui/src/app/components/nav/NavHeader.test.jsx
index 492b7fc..06f9291 100644
--- a/src/main/webui/src/app/components/nav/NavHeader.test.jsx
+++ b/src/main/webui/src/app/components/nav/NavHeader.test.jsx
@@ -37,7 +37,7 @@ describe('Header tests', () => {
     const groupsButton = screen.getByRole("button", {name: "Groups"});
     expect(groupsButton).toBeInTheDocument();
     expect(screen.getByRole("button", {name: "REST API"})).toBeInTheDocument();
-    const addonsButton = screen.getByRole("button", {name: "more"});
+    const addonsButton = screen.getByRole("button", {name: "More"});
     expect(addonsButton).toBeInTheDocument();
     // TODO: test the user login elements later when implemented