155. Adding page header (#21 Section 22: User Page - Display User Info)

support-portal-frontend/src/app/component/user/user.component.html

@@ -1 +1,32 @@
-<p>user works!</p>
+<div class="container">
+  <div class="row mb-2 mt-2 text-center">
+    <div class="col-md-4">
+    </div>
+    <div class="col-md-4">
+      <h5>User Management Portal</h5>
+      <small></small>
+    </div>
+    <div class="col-md-4">
+    </div>
+  </div>
+
+  <!-- nav bar -->
+  <nav class="navbar navbar-expand-md breadcrumb">
+    <div class="collapse navbar-collapse" id="navbarCollapse">
+      <div class="nav nav-pills">
+        <a class="nav-item nav-link active ml-1" data-toggle="tab" href="#users">
+          <i class="fa fa-users"></i>
+          Users
+        </a>
+        <a class="nav-item nav-link ml-3" data-toggle="tab" href="#reset-password">
+          <i class="fa fa-cogs"></i>
+          Settings
+        </a>
+        <a class="nav-item nav-link move-right mr-3" data-toggle="tab" href="#profile">
+          Welcome,
+          <i class="fa fa-user"></i>
+        </a>
+      </div>
+    </div>
+  </nav>
+</div>

support-portal-frontend/src/styles.css

@@ -2,3 +2,38 @@
 @import 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css';
 @import 'https://pro.fontawesome.com/releases/v5.10.0/css/all.css';
 @import "~angular-notifier/styles";
+
+td {
+  cursor: pointer;
+}
+
+.move-right {
+  position: absolute;
+  right: 0;
+}
+
+.move-left {
+  position: absolute;
+  left: 0;
+}
+
+.btn-file {
+  position: relative;
+  overflow: hidden;
+}
+
+.btn-file input[type=file] {
+  position: absolute;
+  top: 0;
+  right: 0;
+  min-width: 100%;
+  min-height: 100%;
+  font-size: 100px;
+  text-align: right;
+  filter: alpha(opacity=0);
+  opacity: 0;
+  outline: none;
+  background: white;
+  cursor: inherit;
+  display: block;
+}