From 3914a52f0e4b0a85c6e49855210ba37ff596ae0c Mon Sep 17 00:00:00 2001
From: cavdy <cavdyofficials@gmail.com>
Date: Mon, 15 Apr 2019 22:08:57 +0100
Subject: [PATCH] feature(create user profile page): create user profile page
 [Finishes #165361606]

---
 ui/activate.html  |   2 +-
 ui/adduser.html   |   2 +-
 ui/credit.html    |   2 +-
 ui/css/style.css  |   1 +
 ui/dashboard.html |   2 +-
 ui/js/app.js      | 132 +++++++++++++++++++++++-----------------------
 ui/staffs.html    |   2 +-
 ui/users.html     |   2 +-
 8 files changed, 73 insertions(+), 72 deletions(-)

diff --git a/ui/activate.html b/ui/activate.html
index e702957..99eede7 100644
--- a/ui/activate.html
+++ b/ui/activate.html
@@ -98,7 +98,7 @@ <h1 class="logo">Banka</h1>
 
               <div class="user-nav-user-pop">
                 <ul class="list">
-                  <li class="item"><a href="#" class="link">
+                  <li class="item"><a href="./profile.html" class="link">
                       <svg class="user-nav-link-icon">
                         <use xlink:href="./svg/sprite.svg#icon-user"></use>
                       </svg>Profile</a>
diff --git a/ui/adduser.html b/ui/adduser.html
index cccf01e..0e0deb2 100644
--- a/ui/adduser.html
+++ b/ui/adduser.html
@@ -97,7 +97,7 @@ <h1 class="logo">Banka</h1>
 
               <div class="user-nav-user-pop">
                 <ul class="list">
-                  <li class="item"><a href="#" class="link">
+                  <li class="item"><a href="./profile.html" class="link">
                       <svg class="user-nav-link-icon">
                         <use xlink:href="./svg/sprite.svg#icon-user"></use>
                       </svg>Profile</a>
diff --git a/ui/credit.html b/ui/credit.html
index 6fee434..ddf70a9 100644
--- a/ui/credit.html
+++ b/ui/credit.html
@@ -97,7 +97,7 @@ <h1 class="logo">Banka</h1>
 
               <div class="user-nav-user-pop">
                 <ul class="list">
-                  <li class="item"><a href="#" class="link">
+                  <li class="item"><a href="./profile.html" class="link">
                       <svg class="user-nav-link-icon">
                         <use xlink:href="./svg/sprite.svg#icon-user"></use>
                       </svg>Profile</a>
diff --git a/ui/css/style.css b/ui/css/style.css
index 906b441..716faad 100644
--- a/ui/css/style.css
+++ b/ui/css/style.css
@@ -303,6 +303,7 @@ body,
 .header .user-nav-user-pop,
 .header .user-nav-notification-pop {
   background-color: var(--color-white-2);
+  box-shadow: .3rem .3rem 1rem var(--color-black);
   position: absolute;
   top: var(--hundred-percent);
   display: none;
diff --git a/ui/dashboard.html b/ui/dashboard.html
index f2f5a98..c2da0cf 100644
--- a/ui/dashboard.html
+++ b/ui/dashboard.html
@@ -96,7 +96,7 @@ <h1 class="logo">Banka</h1>
 
               <div class="user-nav-user-pop">
                 <ul class="list">
-                  <li class="item"><a href="#" class="link">
+                  <li class="item"><a href="./profile.html" class="link">
                       <svg class="user-nav-link-icon">
                         <use xlink:href="./svg/sprite.svg#icon-user"></use>
                       </svg>Profile</a>
diff --git a/ui/js/app.js b/ui/js/app.js
index 0403b61..f82547a 100644
--- a/ui/js/app.js
+++ b/ui/js/app.js
@@ -1,66 +1,66 @@
-// Sidebar Toggle 
-const sidebar = document.querySelector('.sidebar');
-
-window.addEventListener('resize', () => {
-    if (window.matchMedia('(min-width: 900px)').matches) {
-        sidebar.classList.remove('sidebar-hide');
-    } else {
-        sidebar.classList.add('sidebar-hide');
-    }
-});
-
-if (window.innerWidth <= 600) {
-    sidebar.classList.add('sidebar-hide');
-}
-
-document.querySelector('#toggle-sidebar').addEventListener('click', () => {
-    sidebar.classList.toggle('sidebar-hide');
-    if (window.innerWidth <= 600) {
-        document.querySelector('.user-nav-icon-box').toggleClass('user-nav-icon-box-active');
-    }
-});
-
-// Pop box
-const userNavUserPop = document.querySelector('.user-nav-user-pop');
-const userNavNotificationPop = document.querySelector('.user-nav-notification-pop');
-
-const notificationPop = (element, removeClass, removeElement, toggleClass, toggleElement) => {
-    document.querySelector(element).addEventListener('click', () => {
-        removeClass.classList.remove(removeElement);
-        toggleClass.classList.toggle(toggleElement);
-    });
-}
-
-notificationPop('.user-nav-icon-box', userNavUserPop, 'user-nav-user-pop-active', userNavNotificationPop, 'user-nav-notification-pop-active');
-notificationPop('.user-nav-user', userNavNotificationPop, 'user-nav-notification-pop-active', userNavUserPop, 'user-nav-user-pop-active');
-
-// dismiss alert
-const close = document.querySelector('#close');
-if (close !== null) {
-    close.addEventListener('click', () => {
-        document.querySelector('.alert').remove();
-    });
-}
-
-// modal
-const showModal = document.querySelectorAll('#show-modal');
-
-if (showModal) {
-    const mModal = document.querySelector('.modal');
-
-    showModal.forEach((modal) => {
-        modal.addEventListener('click', () => {
-                mModal.style.visibility = 'visible';
-                mModal.style.opacity = '1';
-        });
-    });
-}
-
-window.addEventListener('click', (e) => {
-    const modal = document.querySelector('#modal');
-    const cModal = document.querySelector('.modal');
-    if (e.target === modal) {
-        cModal.style.visibility = 'hidden';
-        cModal.style.opacity = '0';
-    }
-});
\ No newline at end of file
+// Sidebar Toggle 
+const sidebar = document.querySelector('.sidebar');
+
+window.addEventListener('resize', () => {
+  if (window.matchMedia('(min-width: 900px)').matches) {
+    sidebar.classList.remove('sidebar-hide');
+  } else {
+    sidebar.classList.add('sidebar-hide');
+  }
+});
+
+if (window.innerWidth <= 600) {
+  sidebar.classList.add('sidebar-hide');
+}
+
+document.querySelector('#toggle-sidebar').addEventListener('click', () => {
+  sidebar.classList.toggle('sidebar-hide');
+  if (window.innerWidth <= 600) {
+    document.querySelector('.user-nav-icon-box').toggleClass('user-nav-icon-box-active');
+  }
+});
+
+// Pop box
+const userNavUserPop = document.querySelector('.user-nav-user-pop');
+const userNavNotificationPop = document.querySelector('.user-nav-notification-pop');
+
+const notificationPop = (element, removeClass, removeElement, toggleClass, toggleElement) => {
+  document.querySelector(element).addEventListener('click', () => {
+    removeClass.classList.remove(removeElement);
+    toggleClass.classList.toggle(toggleElement);
+  });
+}
+
+notificationPop('.user-nav-icon-box', userNavUserPop, 'user-nav-user-pop-active', userNavNotificationPop, 'user-nav-notification-pop-active');
+notificationPop('.user-nav-user', userNavNotificationPop, 'user-nav-notification-pop-active', userNavUserPop, 'user-nav-user-pop-active');
+
+// dismiss alert
+const close = document.querySelector('#close');
+if (close !== null) {
+  close.addEventListener('click', () => {
+    document.querySelector('.alert').remove();
+  });
+}
+
+// modal
+const showModal = document.querySelectorAll('#show-modal');
+
+if (showModal) {
+  const mModal = document.querySelector('.modal');
+
+  showModal.forEach((modal) => {
+    modal.addEventListener('click', () => {
+      mModal.style.visibility = 'visible';
+      mModal.style.opacity = '1';
+    });
+  });
+}
+
+window.addEventListener('click', (e) => {
+  const modal = document.querySelector('#modal');
+  const cModal = document.querySelector('.modal');
+  if (e.target === modal) {
+    cModal.style.visibility = 'hidden';
+    cModal.style.opacity = '0';
+  }
+});
diff --git a/ui/staffs.html b/ui/staffs.html
index 6a00dc4..34c8292 100644
--- a/ui/staffs.html
+++ b/ui/staffs.html
@@ -97,7 +97,7 @@ <h1 class="logo">Banka</h1>
 
               <div class="user-nav-user-pop">
                 <ul class="list">
-                  <li class="item"><a href="#" class="link">
+                  <li class="item"><a href="./profile.html" class="link">
                       <svg class="user-nav-link-icon">
                         <use xlink:href="./svg/sprite.svg#icon-user"></use>
                       </svg>Profile</a>
diff --git a/ui/users.html b/ui/users.html
index 5ee49d5..ab5db41 100644
--- a/ui/users.html
+++ b/ui/users.html
@@ -97,7 +97,7 @@ <h1 class="logo">Banka</h1>
 
               <div class="user-nav-user-pop">
                 <ul class="list">
-                  <li class="item"><a href="#" class="link">
+                  <li class="item"><a href="./profile.html" class="link">
                       <svg class="user-nav-link-icon">
                         <use xlink:href="./svg/sprite.svg#icon-user"></use>
                       </svg>Profile</a>