Replace logout link by a dropdown menu

ChangeLog

@@ -9,6 +9,7 @@ New features:
 
 Improvements:
 
+* Replace logout link by a dropdown menu
 * Handle notification for group members attached to a project
 * Return the highest role for a project when a user is member of multiple groups
 * Show in user interface the saving state of the task

app/Helper/User.php

@@ -50,22 +50,6 @@ class User extends \Kanboard\Core\Base
         return $this->userSession->getId();
     }
 
-    /**
-     * Get user profile
-     *
-     * @access public
-     * @return string
-     */
-    public function getProfileLink()
-    {
-        return $this->helper->url->link(
-            $this->helper->e($this->getFullname()),
-            'user',
-            'show',
-            array('user_id' => $this->userSession->getId())
-        );
-    }
-
     /**
      * Check if the given user_id is the connected user
      *

app/Template/header.php

@@ -1,6 +1,12 @@
 <header>
     <nav>
-        <h1><?= $this->url->link('K<span>B</span>', 'app', 'index', array(), false, 'logo', t('Dashboard')).' '.$this->e($title) ?>
+        <h1>
+            <span class="logo">
+                <?= $this->url->link('K<span>B</span>', 'app', 'index', array(), false, '', t('Dashboard')) ?>
+            </span>
+            <span class="title">
+                <?= $this->e($title) ?>
+            </span>
             <?php if (! empty($description)): ?>
                 <span class="tooltip" title='<?= $this->e($this->text->markdown($description)) ?>'>
                     <i class="fa fa-info-circle"></i>
@@ -26,11 +32,20 @@
             <?php endif ?>
             <li>
                 <?php if ($this->user->hasNotifications()): ?>
-                    <?= $this->url->link('<i class="fa fa-bell web-notification-icon"></i>', 'app', 'notifications', array('user_id' => $this->user->getId()), false, '', t('Unread notifications')) ?>
+                    <span class="notification">
+                        <?= $this->url->link('<i class="fa fa-bell web-notification-icon"></i>', 'app', 'notifications', array('user_id' => $this->user->getId()), false, '', t('Unread notifications')) ?>
+                    </span>
                 <?php endif ?>
 
-                <?= $this->url->link(t('Logout'), 'auth', 'logout') ?>
+                <span class="dropdown">
-                <span class="username hide-tablet">(<?= $this->user->getProfileLink() ?>)</span>
+                    <a href="#" class="dropdown-menu dropdown-menu-link-icon"><i class="fa fa-user fa-fw"></i><i class="fa fa-caret-down"></i></a>
+                    <ul>
+                        <li class="no-hover"><strong><?= $this->e($this->user->getFullname()) ?></strong></li>
+                        <li><?= $this->url->link(t('My dashboard'), 'app', 'index', array('user_id' => $this->user->getId())) ?></li>
+                        <li><?= $this->url->link(t('My profile'), 'user', 'show', array('user_id' => $this->user->getId())) ?></li>
+                        <li><?= $this->url->link(t('Logout'), 'auth', 'logout') ?></li>
+                    </ul>
+                </span>
             </li>
         </ul>
     </nav>

assets/css/src/dropdown.css

@@ -35,6 +35,10 @@ ul.dropdown-submenu-open {
     cursor: pointer;
 }
 
+.dropdown-submenu-open li.no-hover {
+    cursor: default;
+}
+
 .textarea-dropdown li:last-child,
 .dropdown-submenu-open li:last-child {
     border: none;
@@ -42,7 +46,7 @@ ul.dropdown-submenu-open {
 
 .textarea-dropdown .active,
 .textarea-dropdown li:hover,
-.dropdown-submenu-open li:hover {
+.dropdown-submenu-open li:not(.no-hover):hover {
     background: #4078C0;
     color: #fff;
 }

assets/css/src/header.css

@@ -35,19 +35,9 @@ nav .active a {
     font-weight: bold;
 }
 
-/* username */
-.username a {
-    color: #000;
-}
-
-.username a:hover {
-    color: #DF5353;
-    text-decoration: underline;
-}
-
 /* logo */
-.logo {
+.logo a {
-    opacity: 0.3;
+    opacity: 0.5;
     color: #d40000;
 }
 
@@ -55,12 +45,13 @@ nav .active a {
     color: #333;
 }
 
-.logo:hover {
+.logo a:hover {
     opacity: 0.8;
+    color: #333;
 }
 
-.logo:focus span,
+.logo a:focus span,
-.logo:hover span {
+.logo a:hover span {
     color: #d40000;
 }
 
@@ -105,7 +96,6 @@ nav .active a {
 }
 
 @media only screen and (max-width: 640px) {
-
     .page-header-mobile li {
         display: block;
         margin-bottom: 5px;

assets/css/src/responsive.css

@@ -11,11 +11,6 @@
 
 @media only screen and (max-width: 1024px) {
 
-    li.hide-tablet,
-    .hide-tablet {
-        display: none;
-    }
-
     body {
         font-size: 0.85em;
     }