User icon added to navigation bar

ProjectSourceCode/src/resources/css/navigation-bar/scoreboard-header/scoreboard.css

@@ -15,6 +15,4 @@
     display: none;
 }
 
-.league-container {
+
-    display: inline-block; /* Change display property to inline-block to prevent stretching */
-}

ProjectSourceCode/src/views/partials/navigation-bar/nav.hbs

@@ -1,12 +1,11 @@
 <nav class="navbar navbar-expand-lg navbar-dark" id="navigation-bar-container">
 
-  <div class="container-fluid"> <!-- Added container-fluid for full-width -->
+  <div class="container-fluid d-flex justify-content-between align-items-center"> <!-- Added container-fluid for full-width -->
 
-    <div class="d-flex align-items-center"> <!-- Added d-flex and align-items-center --> 
+    <div> <!-- Wrapped navbar brand and toggler in a div -->
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation" style="margin-right: 20px;">
         <span class="navbar-toggler-icon"></span>
       </button>
-
       <a class="navbar-brand" href="#">ScoreSpot</a>
     </div>
 
@@ -40,5 +39,18 @@
 
       </ul>
     </div>
+
+    <!-- Right-aligned image outside collapsing area -->
+    <div id="user" class="d-sm-flex">
+      <img src="img/navigation-bar/user.png" alt="Your Image" class="img-fluid" style="width: 30px;">
+    </div>
+
+    <style>
+      /* CSS to hide the user icon when navbar toggler is expanded */
+      .navbar-toggler:(.collapsed) + .collapse #user {
+        display: none;
+      }
+    </style>
+    
   </div>
 </nav>