organize navbar

src/client/styles/scss/_layout_variable.scss

@@ -1,5 +1,3 @@
-$grw-navbar-height: 50px;
-
 /* color variables */
 
 /* green */

src/client/styles/scss/_navbar.scss

@@ -0,0 +1,22 @@
+.grw-navbar {
+  .nav-link,
+  .nav-item.confidential {
+    display: flex;
+    align-items: center;
+    min-height: $grw-navbar-height;
+    padding: 0 1rem;
+  }
+
+  .nav-link {
+    &:hover {
+      background: rgba(0, 0, 0, 0.1);
+    }
+
+    &:focus {
+      background: rgba(0, 0, 0, 0);
+    }
+  }
+  .nav-item.confidential {
+    background: rgba(0, 0, 0, 0.2);
+  }
+}

src/client/styles/scss/_override-bootstrap-variables.scss

@@ -76,3 +76,9 @@ $theme-colors: (
 $nav-link-padding-y:              0.75rem;
 $nav-link-padding-x:              1rem;
 $nav-tabs-border-radius:          0;
+
+
+// Navbar
+$navbar-padding-y:                0;
+$navbar-brand-padding-y:          0;
+$navbar-nav-link-padding-x:       1rem;

src/client/styles/scss/_variables.scss

@@ -1,5 +1,8 @@
 $font-family-monospace-not-strictly: Monaco, Menlo, Consolas, 'Courier New', MeiryoKe_Gothic, monospace;
 
+// Layout
+$grw-navbar-height: 50px;
+
 // fix tab width to 95 pixels
 // see also '_on-edit.scss'
 $grw-nav-main-left-tab-width: 95px;

src/client/styles/scss/style-app.scss

@@ -35,6 +35,7 @@
 @import 'layout_kibela';
 @import 'layout_variable';
 @import 'login';
+@import 'navbar';
 @import 'notification';
 @import 'on-edit';
 @import 'page_list';

src/server/views/layout/layout.html

@@ -75,11 +75,10 @@
 <div id="wrapper">
   <!-- Navigation -->
   {% block layout_head_nav %}
-  <nav class="navbar navbar-default bg-grw-green mb-0 p-0">
-    <div class="navbar-header d-flex w-100">
-
-      <!-- 1 GROWI logo -->
-      <a class="logo d-block top-left-part bg-grw-mos-green my-auto" href="/">
+  <nav class="navbar grw-navbar navbar-expand-lg navbar-dark bg-dark mb-0 p-0">
+    <!-- 1 GROWI logo -->
+    <div class="navbar-brand">
+      <a class="logo d-block top-left-part " href="/">
         <div class="logo-mark d-inline-block">{% include '../widget/logo.html' %}</div>
         <span class="logo-text mx-3">
           {% set appTitle = appService.getAppTitle() %}
@@ -89,76 +88,71 @@
           </text>
         </span>
       </a>
+    </div>
 
+    <ul class="navbar-nav mr-auto">
+      {#
       <!-- 2 side nav open -->
-      <a class="open-close d-none d-md-block mx-3 my-auto waves-effect waves-light">
-        <i class="ti-menu"></i>
-      </a>
-
-      <!-- 3 mobile menu touch icon -->
-      <a class="navbar-toggle d-md-none my-auto mx-3" href="javascript:void(0)" data-toggle="collapse" data-target=".navbar-collapse">
+      <a class="open-close d-none d-md-block mx-3 waves-effect waves-light">
         <i class="ti-menu"></i>
       </a>
-
-      <!-- 4 search nav -->
-      <ul class="nav navbar-top-links d-none d-md-block bg-grw-light-green ml-3 my-auto text-nowrap">
-        {#  disabled temporary -- 2019.05.13 Yuki Takei
-        <li class="nav-item-admin">
-          <a href="/tags">
-            <i class="tag-icon icon-tag"></i><span>{{ t('Tags') }}</span>
-          </a>
-        </li>
-        #}
-        <li>
-          {% if searchConfigured() %}
-          <span class="navbar-form search-top" role="search" id="search-top"></span>
-          {% endif %}
-        </li>
-      </ul>
-
-      <!-- 5 user action -->
-      <ul class="nav navbar-top-links flex-nowrap ml-auto mr-2 my-auto">
-        {% if user and user.admin %}
-        <li class="nav-item-admin mr-2 mr-lg-3 my-auto">
-          <a class="text-white" href="/admin">
-            <i class="icon-settings mr-2"></i>
-            <span class="d-none d-md-inline-block">{{ t('Admin') }}</span>
-          </a>
-        </li>
+      #}
+      {#  disabled temporary -- 2019.05.13 Yuki Takei
+      <li class="nav-item">
+        <a class="nav-link" href="/tags">
+          <i class="tag-icon icon-tag"></i><span>{{ t('Tags') }}</span>
+        </a>
+      </li>
+      #}
+      <form class="form-inline">
+        {% if searchConfigured() %}
+        <span class="navbar-form search-top" role="search" id="search-top"></span>
         {% endif %}
+      </form>
+    </ul>
+
+    <!-- 5 user action -->
+    <ul class="navbar-nav mr-2">
+      {% if user and user.admin %}
+      <li class="nav-item">
+        <a class="nav-link" href="/admin">
+          <i class="icon-settings mr-2"></i>
+          <span class="d-none d-md-inline-block">{{ t('Admin') }}</span>
+        </a>
+      </li>
+      {% endif %}
+
+      {% if user %}
+      <li class="nav-item">
+        <a class="nav-link" href="#" data-target="#create-page" data-toggle="modal">
+          <i class="icon-pencil mr-2"></i>
+          <span class="d-none d-md-inline-block">{{ t('New') }}</span>
+        </a>
+      </li>
+      <li class="nav-item dropdown">
+        <a type="button" class="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>
+      {% else %}
+      <li id="login-user" class="nav-item"><a class="nav-link" href="/login">Login</a></li>
+      {% endif %}
+      {% if getConfig('crowi', 'app:confidential') %}
+      <li class="nav-item confidential text-light">{{ getConfig('crowi', 'app:confidential') }}</li>
+      {% endif %}
+    </ul>
 
-        {% if user %}
-        <li class="nav-item-create-page mr-2 mr-lg-3 my-auto">
-          <a class="text-white" href="#" data-target="#create-page" data-toggle="modal">
-            <i class="icon-pencil mr-2"></i>
-            <span class="d-none d-md-inline-block">{{ t('New') }}</span>
-          </a>
-        </li>
-        <li class="dropdown mr-3">
-          <a class="dropdown-toggle waves-effect waves-light d-inline-flex text-white" 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>
-        {% else %}
-        <li id="login-user"><a href="/login">Login</a></li>
-        {% endif %}
-        {% if getConfig('crowi', 'app:confidential') %}
-        <li class="confidential"><a href="#">{{ getConfig('crowi', 'app:confidential') }}</a></li>
-        {% endif %}
-      </ul>
-
-    </div><!-- /.navbar-header -->
   </nav>
   {% include '../modal/create_page.html' %}
   {% endblock  %} {# layout_head_nav #}