From 5ccf46c1cd0e7ca999462be1bc831002f4b60aa7 Mon Sep 17 00:00:00 2001
From: mokaddem <sami.mokaddem@circl.lu>
Date: Thu, 9 Sep 2021 16:27:09 +0200
Subject: [PATCH] chg: [layout:navbar-right] Started implementation

---
 .../layouts/header/header-notifications.php   | 13 +++++++++
 .../element/layouts/header/header-profile.php | 28 ++++++++++++++++++-
 .../element/layouts/header/header-right.php   | 11 ++------
 webroot/css/layout.css                        | 15 +++++++++-
 4 files changed, 56 insertions(+), 11 deletions(-)
 create mode 100644 templates/element/layouts/header/header-notifications.php

diff --git a/templates/element/layouts/header/header-notifications.php b/templates/element/layouts/header/header-notifications.php
new file mode 100644
index 0000000..e3285dd
--- /dev/null
+++ b/templates/element/layouts/header/header-notifications.php
@@ -0,0 +1,13 @@
+<?php
+use Cake\Routing\Router;
+?>
+<div class="btn-group">
+    <a class="nav-link px-2 text-decoration-none profile-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#" data-offset="10,20">
+        <i class="<?= $this->FontAwesome->getClass('bell') ?> fa-lg"></i>
+    </a>
+    <div class="dropdown-menu dropdown-menu-right">
+        <?php if (empty($notifications)): ?>
+            <h6 class="dropdown-header"><?= __('- No notification -') ?></h6>
+        <?php endif; ?>
+    </div>
+</div>
diff --git a/templates/element/layouts/header/header-profile.php b/templates/element/layouts/header/header-profile.php
index 7e4e03f..abcaec5 100644
--- a/templates/element/layouts/header/header-profile.php
+++ b/templates/element/layouts/header/header-profile.php
@@ -1 +1,27 @@
-<i class="<?= $this->FontAwesome->getClass('user-circle') ?> fa-lg"></i>
\ No newline at end of file
+<?php
+use Cake\Routing\Router;
+?>
+<div class="btn-group">
+    <a class="nav-link px-2 text-decoration-none profile-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#" data-offset="10,20">
+        <i class="<?= $this->FontAwesome->getClass('user-circle') ?> fa-lg"></i>
+    </a>
+    <div class="dropdown-menu dropdown-menu-right">
+        <h6 class="dropdown-header"><?= h($this->request->getAttribute('identity')['username']) ?></h6>
+        <a class="dropdown-item" href="<?= Router::url(['controller' => 'users', 'action' => 'view']) ?>">
+            <i class="mr-1 <?= $this->FontAwesome->getClass('user-circle') ?>"></i>
+            <?= __('My Account') ?>
+        </a>
+        <a class="dropdown-item" href="<?= Router::url(['controller' => 'users', 'action' => 'userSettings']) ?>">
+            <i class="mr-1 <?= $this->FontAwesome->getClass('user-cog') ?>"></i>
+            <?= __('Settings') ?>
+        </a>
+        <div class="dropdown-divider"></div>
+        <a class="dropdown-item" href="<?= Router::url(['controller' => 'users', 'action' => 'logout']) ?>">
+            <i class="mr-1 <?= $this->FontAwesome->getClass('sign-out-alt') ?>"></i>
+            <?= __('Logout') ?>
+        </a>
+    </div>
+</div>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/templates/element/layouts/header/header-right.php b/templates/element/layouts/header/header-right.php
index f5ed885..82cbec7 100644
--- a/templates/element/layouts/header/header-right.php
+++ b/templates/element/layouts/header/header-right.php
@@ -4,15 +4,8 @@
         <i class="icon <?= $this->FontAwesome->getClass('search') ?>"></i>
     </div>
     <div class="header-menu d-flex ml-1">
-        <a class="nav-link px-2 text-decoration-none" href="#">
-            <i class="<?= $this->FontAwesome->getClass('bell') ?> fa-lg"></i>
-        </a>
-        <a class="nav-link px-2 text-decoration-none" href="#">
-            <i class="<?= $this->FontAwesome->getClass('cog') ?> fa-lg"></i>
-        </a>
-        <a class="nav-link px-2 text-decoration-none" href="#">
-            <?= $this->element('layouts/header/header-profile') ?>
-        </a>
+        <?= $this->element('layouts/header/header-notifications') ?>
+        <?= $this->element('layouts/header/header-profile') ?>
     </div>
 </div>
 
diff --git a/webroot/css/layout.css b/webroot/css/layout.css
index 355f365..bb86ad4 100644
--- a/webroot/css/layout.css
+++ b/webroot/css/layout.css
@@ -89,8 +89,20 @@ main.content {
     justify-content: end;
     flex: 1 0 auto;
     padding-right: 20px;
+    height: var(--navbar-height);
 }
 
+.right-navbar div.global-search-container {
+    margin: auto 0;
+}
+
+.right-navbar div.header-menu  a.nav-link {
+    margin: auto 0;
+}
+
+.right-navbar .header-menu .dropdown-menu a.dropdown-item > i {
+    min-width: 25px;
+}
 
 
 /* sidebar */
@@ -346,7 +358,7 @@ header.navbar-light.top-navbar .header-breadcrumb .header-breadcrumb-item > a:ho
     margin-right: 0.5rem;
 }
 
-.navbar-dark .right-navbar .header-menu a {
+.navbar-dark .right-navbar .header-menu a.nav-link {
     color: white;
 }
 .navbar-light .right-navbar .header-menu a {
@@ -366,3 +378,4 @@ header.navbar-light.top-navbar .header-breadcrumb .header-breadcrumb-item > a:ho
 .navbar-light .left-navbar .navbar-brand:hover img {
     filter: invert(0) drop-shadow(0px 0px 4px #000);
 }
+