navbar layout refactor

pages/_includes/layout/menu.html

@@ -6,7 +6,7 @@
    {% assign icon = level-1[1].icon %}
 
    {% assign has-children = false %}
-   {% if level-1[1].children or level-1[1].docs %}
+   {% if level-1[1].children %}
       {% assign has-children = true %}
    {% endif %}
 
@@ -31,23 +31,6 @@
 
       {% if has-children %}
       <div class="dropdown-menu">
-         {% if level-1[1].docs %}
-         {% for d in site.data.docs %}
-         {% assign doc = site.docs | where: "slug", d.page | first %}
-         {% if doc %}
-         <a class="dropdown-item{% if current-page[0] == 'docs' and current-page[1] == doc.slug %} active{% endif %}{% if level-1[1].children %} dropdown{% endif %}">
-            <span class="nav-text">
-               {{ doc.title }}
-
-               {% if doc.new %}
-               <span class="badge bg-primary text-white ml-auto text-uppercase">new</span>
-               {% endif %}
-            </span>
-         </a>
-         {% endif %}
-         {% endfor %}
-         {% endif %}
-
          {% for level-2 in level-1[1].children %}
          <a class="dropdown-item" {% if level-2[1].children %}href="#sidebar-{{ level-2[0] }}" data-toggle="dropdown" role="button" aria-expanded="false" {% else %}href="{{ site.base }}/{{ level-2[1].url }}" {% endif %}>
             <span class="nav-text">

pages/_includes/layout/topmenu.html

@@ -1,6 +1,7 @@
-<div class="layout-area-menu navbar navbar-expand-lg {% if include.dark %}navbar-dark{% else %}navbar-light{% endif %}">
-   <div class="container">
-      {% include layout/menu.html top=true %}
+<header class="topnav">
+   <div class="navbar navbar-expand-lg {% if include.dark %}navbar-dark{% else %}navbar-light{% endif %}">
+      <div class="container{% if include.fluid %}-fluid{% endif %}">
+         {% include layout/menu.html top=true %}
+      </div>
    </div>
-</div>
-<div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+</header>

pages/_includes/layout/topnav.html

@@ -1,6 +1,9 @@
-<header class="layout-area-topnav navbar navbar-expand-lg {% if include.dark %}navbar-dark bg-dark text-white{% else %}navbar-light{% endif %}{% if include.sticky %} navbar-sticky{% endif %}">
-   <div class="container{% if include.fluid %} container-fluid{% endif %}">
-      {% include parts/navbar.html logo=true search=true user-menu=1 person-id=1 dark=include.dark notifications=true %}
+<header class="topnav">
+   <div class="container{% if include.fluid %}-fluid{% endif %}">
+      <div class="navbar navbar-expand-lg {% if include.dark %}navbar-dark bg-dark text-white{% else %}navbar-light{% endif %}{% if include.sticky %} navbar-sticky{% endif %}">
+         {% include_cached parts/navbar.html search=true %}
+      </div>
    </div>
 </header>
 
+

pages/_includes/parts/navbar-search.html

@@ -0,0 +1,10 @@
+<div class="navbar-search">
+   <form action="" method="get">
+      <div class="input-group">
+         <input type="text" name="q" class="form-control" placeholder="Search...">
+         <div class="input-group-append">
+            <button class="btn btn-secondary" type="submit">{% include_cached ui/icon.html icon="search" %}</button>
+         </div>
+      </div>
+   </form>
+</div>

pages/_includes/parts/navbar.html

@@ -1,48 +1,22 @@
 {% assign person-id = include.person-id | default: 12 | minus: 1 %}
 {% assign person = site.data.people[person-id] %}
 
-<a class="layout-toggler" data-toggle="menubar">
-   <span class="layout-toggler-icon"></span>
-</a>
-
 <a href="{{ site.base }}" class="navbar-brand text-reset mr-md-3">
-   {% if include.icon %}<span class="text-green">{% include_cached ui/icon.html icon=include.icon %}</span>{% endif %}
-   {% if include.stamp %}<span class="stamp bg-primary text-white">UI</span>{% endif %}
-   {% if include.logo %}
-      <img src="{{ site.base }}/img/logo{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="d-none d-md-block navbar-brand-logo">
-      <img src="{{ site.base }}/img/logo-small{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="d-md-none navbar-brand-logo">
-   {% endif %}
-   {% if include.title %}<span class="d-inline">{{ include.title }}</span>{% endif %}
+   <img src="{{ site.base }}/img/logo{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="d-none d-md-block navbar-brand-logo">
+   <img src="{{ site.base }}/img/logo-small{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="d-md-none navbar-brand-logo">
 </a>
 
-<ul class="nav navbar-menu align-items-center order-1 order-lg-2">
-
-   {% if include.notifications %}
-   <li class="nav-item dropdown mr-3">
-      <a class="nav-link text-reset px-2" data-toggle="dropdown">
-         {% include_cached ui/icon.html icon="bell" %}
-         <span class="badge badge-pill badge-up bg-primary">4</span>
-      </a>
-      <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
-         <div class="scrollable">
-            <div class="list list-row">
-            </div>
-         </div>
-         <div class="d-flex px-3 py-2 b-t">
-            <div class="flex">
-               <span>6 Notifications</span>
-            </div>
-            <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-         </div>
-      </div>
-   </li>
-   {% endif %}
+{% comment %}
+{% if include.search %}
+   {% include parts/navbar-search.html %}
+{% endif %}
+{% endcomment %}
 
+<ul class="nav navbar-menu align-items-center ml-auto">
    <li class="nav-item d-none d-lg-flex mr-3">
       <a href="{{ site.github_url }}" class="btn btn-sm btn-success" target="_blank">Source code</a>
    </li>
 
-   {% if include.user-menu %}
    <li class="nav-item dropdown">
       <a href="#" data-toggle="dropdown"
          class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
@@ -75,42 +49,4 @@
          </a>
       </div>
    </li>
-   {% endif %}
-
-   {% if include.manage %}
-   <li class="nav-item">
-      <a href="#" class="btn btn-secondary">Manage Widgets</a>
-   </li>
-   {% endif %}
-
-   {% if include.register %}
-   <li class="nav-item ">
-      <a href="#" class="nav-link">
-         Sign in
-      </a>
-   </li>
-   <li class="d-flex align-items-center">
-      <a href="#" class="btn btn-pill btn-sm btn-primary d-none d-lg-block">
-         Register
-      </a>
-   </li>
-   {% endif %}
-
-   {% if include.plus %}
-   <li class="nav-item">
-      <a href="#" class="btn btn-primary btn-icon">{% include_cached ui/icon.html icon="plus" %}</a>
-   </li>
-   {% endif %}
-
-   {% if include.premium %}
-   <li class="nav-item">
-      <a href="#" class="btn btn-success">Go Premium</a>
-   </li>
-   {% endif %}
-
-   {% if include.sync %}
-   <li class="nav-item">
-      <a href="#" class="btn btn-secondary">{% include_cached ui/icon.html icon="rotate-cw" class="mr-2" %}Sync</a>
-   </li>
-   {% endif %}
 </ul>

pages/_layouts/default.html

@@ -7,9 +7,9 @@ layout: base
    {% include layout/topnav.html dark=page.header-dark sticky=page.header-sticky %}
    {% include layout/topmenu.html %}
 
-   <div class="layout-area-main">
+   <div class="">
 
-      <main class="container{% if page.container-size %} container-{{ page.container-size }}{% endif %}{% if page.fluid %}-fluid{% endif %} my-4 flex-fill">
+      <main class="container-{% if page.container-size %}{{ page.container-size }}{% else %}xl{% endif %}{% if page.fluid %}-fluid{% endif %} my-4 flex-fill">
          {% include layout/page-title.html %}
 
          {{ content }}