re-impl PersonalDropdown

src/client/js/components/Navbar/PersonalDropdown.jsx

@@ -27,18 +27,18 @@ const PersonalDropdown = (props) => {
 
   return (
     <>
-      <a className="dropdown-toggle waves-effect waves-light" data-toggle="dropdown">
+      <a className="nav-link dropdown-toggle waves-effect waves-light" data-toggle="dropdown">
         <UserPicture user={user} withoutLink />&nbsp;{user.name}
       </a>
-      <ul className="dropdown-menu dropdown-menu-right">
-        <li><a href={`/user/${user.username}`}><i className="icon-fw icon-home"></i>{ t('Home') }</a></li>
-        <li><a href="/me"><i className="icon-fw icon-wrench"></i>{ t('User Settings') }</a></li>
-        <li role="separator" className="divider"></li>
-        <li><a href={`/user/${user.username}#user-draft-list`}><i className="icon-fw icon-docs"></i>{ t('List Drafts') }</a></li>
-        <li><a href="/trash"><i className="icon-fw icon-trash"></i>{ t('Deleted Pages') }</a></li>
-        <li role="separator" className="divider"></li>
-        <li><a role="button" onClick={logoutHandler}><i className="icon-fw icon-power"></i>{ t('Sign out') }</a></li>
-      </ul>
+      <div className="dropdown-menu dropdown-menu-right">
+        <a className="dropdown-item" href={`/user/${user.username}`}><i className="icon-fw icon-home"></i>{ t('Home') }</a>
+        <a className="dropdown-item" href="/me"><i className="icon-fw icon-wrench"></i>{ t('User Settings') }</a>
+        <div className="dropdown-divider"></div>
+        <a className="dropdown-item" href={`/user/${user.username}#user-draft-list`}><i className="icon-fw icon-docs"></i>{ t('List Drafts') }</a>
+        <a className="dropdown-item" href="/trash"><i className="icon-fw icon-trash"></i>{ t('Deleted Pages') }</a>
+        <div className="dropdown-divider"></div>
+        <a className="dropdown-item" type="button" onClick={logoutHandler}><i className="icon-fw icon-power"></i>{ t('Sign out') }</a>
+      </div>
     </>
   );
 

src/server/views/layout/layout.html

@@ -151,22 +151,7 @@
           <i class="icon-question mr-2"></i><span class="d-none d-md-inline-block mr-2">{{ t('Help') }}</span><span class="text-muted small"><i class="icon-share-alt"></i></span>
         </a>
       </li>
-      <li class="nav-item dropdown personal-dropdown">
-        <a class="btn nav-link dropdown-toggle waves-effect waves-light" data-toggle="dropdown">
-          <img src="{{ user|picture }}" class="picture rounded-circle" width="25" />
-          <span class="user-name text-wrap ml-2">{{ user.name }}</span>
-        </a>
-        <div class="dropdown-menu dropdown-menu-right">
-          <a class="dropdown-item" href="/user/{{ user.username }}"><i class="icon-fw icon-home"></i>{{ t('Home') }}</a>
-          <a class="dropdown-item" href="/me"><i class="icon-fw icon-wrench"></i>{{ t('User Settings') }}</a>
-          <div class="dropdown-divider"></div>
-          <a class="dropdown-item" href="/user/{{ user.username }}#user-draft-list"><i class="icon-fw icon-docs"></i>{{ t('List Drafts') }}</a>
-          <a class="dropdown-item" href="/trash"><i class="icon-fw icon-trash"></i>{{ t('Deleted Pages') }}</a>
-          <div class="dropdown-divider"></div>
-          <a class="dropdown-item" href="/logout"><i class="icon-fw icon-power"></i>{{ t('Sign out') }}</a>
-        </div>
-        <!-- /.dropdown-messages -->
-      </li>
+      <li id="personal-dropdown" class="nav-item dropdown"></li>
       {% else %}
       <li id="login-user" class="nav-item"><a class="nav-link" href="/login">Login</a></li>
       {% endif %}