From 95d13c57b3a74ce96c9c99b06c83377e07a618dd Mon Sep 17 00:00:00 2001
From: Art <d.art.shishkin@gmail.com>
Date: Mon, 20 Sep 2021 16:09:35 +0300
Subject: [PATCH] 155. Adding page header (#21 Section 22: User Page - Display
 User Info)

---
 .../app/component/user/user.component.html    | 33 ++++++++++++++++-
 support-portal-frontend/src/styles.css        | 35 +++++++++++++++++++
 2 files changed, 67 insertions(+), 1 deletion(-)

diff --git a/support-portal-frontend/src/app/component/user/user.component.html b/support-portal-frontend/src/app/component/user/user.component.html
index d039bb7..1dce686 100644
--- a/support-portal-frontend/src/app/component/user/user.component.html
+++ b/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>
diff --git a/support-portal-frontend/src/styles.css b/support-portal-frontend/src/styles.css
index a42e12d..a66c76e 100644
--- a/support-portal-frontend/src/styles.css
+++ b/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;
+}