Changed: Alignment of user in navbar

CHANGELOG.md

@@ -4,7 +4,7 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
-## [1.1.0 - 2024-12-20]
+## [1.1.0 - 2024-12-23]
 ### Added
 - Dockerfile
 - Single Spa
@@ -87,3 +87,4 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - Rename accept and reject bridgehead state buttons (authorize/revoke)
 - Rename reject project bridgehead user state as block
 - Copy query to clipboard always active, as long as it has a value
+- Alignment of user in navbar

src/components/NavBar.vue

@@ -1,10 +1,14 @@
 <template>
   <div>
-    <nav class="navbar navbar-dark bg-dark" style="display:flex; align-content: flex-start; justify-content: space-between; padding-left:5%">
-      <router-link style="margin-right:3%" class="navbar-brand" to="/">Data Science Orchestrator</router-link>
-<!--      <button @click="toggleSidebar" class="btn btn-dark" style="padding-right:2%"><i class="bi bi-chat-right-text-fill"></i></button>-->
-      <span class="white-text">{{keycloak.getFirstName() + " " + keycloak.getLastName()}}</span>
-      <div style="padding-right:2%">
+    <nav class="navbar navbar-dark bg-dark custom-navbar">
+      <router-link class="navbar-brand" to="/">Data Science Orchestrator</router-link>
+      <div class="user-logout-container">
+        <!-- User information -->
+        <span class="user-info">
+          <i class="bi bi-person-fill user-icon"></i>
+          {{ keycloak.getFirstName() + " " + keycloak.getLastName() }}
+        </span>
+        <!-- Logout button -->
         <button @click="logout" class="btn btn-outline-danger">
           <i class="bi bi-box-arrow-right"></i> logout
         </button>
@@ -35,8 +39,27 @@ export default {
 </script>
 
 <style scoped>
-.white-text {
+.custom-navbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-left: 5%;
+}
+
+.user-logout-container {
+  display: flex;
+  align-items: center;
+  padding-right: 2%;
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  margin-right: 10px;
   color: white;
+}
 
+.user-icon {
+  margin-right: 5px;
 }
 </style>