customize in modal

pages/_data/menu.yml

@@ -62,7 +62,8 @@ changelog:
   label: v1.0
 
 customize:
-  url: customize.html
+  url: '#customize'
   title: Customize
   icon: sliders
+  toggle: modal
 

pages/_includes/layout/customize.html

+<form action="#" class="js-layout-form">
+   <div class="form-group">
+      <label class="form-label">Color scheme</label>
+      {% include ui/input-selectgroup.html name="color-scheme" values="light,dark" type="radio" class="w-100p" %}
+   </div>
+   <div class="form-group">
+      <label class="form-label">Nav position</label>
+      {% include ui/input-selectgroup.html name="nav-position" values="top,side" type="radio" class="w-100p" %}
+   </div>
+   <div class="form-group">
+      <label class="form-label">Header color</label>
+      {% include ui/input-selectgroup.html name="header-color" values="light,dark" type="radio" class="w-100p" %}
+   </div>
+   <!--<div class="form-group">-->
+   <!--<label class="form-label">Header fixed</label>-->
+   <!--{% include ui/input-selectgroup.html name="header-fixed" values="fixed,default" type="radio" class="w-100p" %}-->
+   <!--</div>-->
+   <div class="form-group">
+      <label class="form-label">Sidebar position</label>
+      {% include ui/input-selectgroup.html name="sidebar-position" values="left,right" type="radio" class="w-100p" %}
+   </div>
+   <div class="form-group">
+      <label class="form-label">Sidebar size</label>
+      {% include ui/input-selectgroup.html name="sidebar-size" values="default,folded" type="radio" class="w-100p" %}
+   </div>
+   <div class="form-group">
+      <label class="form-label">Sidebar color</label>
+      {% include ui/input-selectgroup.html name="sidebar-color" values="light,dark" type="radio" class="w-100p" %}
+   </div>
+   <div class="form-group">
+      <label class="form-label">Sidebar fixed</label>
+      {% include ui/input-selectgroup.html name="sidebar-fixed" values="fixed,default" type="radio" class="w-100p" %}
+   </div>
+
+
+
+   <!--<div class="form-footer">-->
+   <!--<button type="submit" class="btn btn-primary">Save options</button>-->
+   <!--</div>-->
+</form>

pages/_includes/layout/menu.html

@@ -4,7 +4,7 @@
    {% for level-1 in site.data.menu %}
    {% assign icon = level-1[1].icon %}
    <li class="nav-item">
-      <a class="nav-link{% if level-1[0] == current-page[0] %} active{% endif %}" {% if level-1[1].children or level-1[1].docs %}href="#sidebar-{{ level-1[0] }}" data-toggle="collapse" data-parent="#menu" role="button" aria-expanded="{% if level-1[0] == current-page[0] %}true{% else %}false{% endif %}"{% else %}href="{{ site.base }}/{{ level-1[1].url }}"{% endif %}>
+      <a class="nav-link{% if level-1[0] == current-page[0] %} active{% endif %}" {% if level-1[1].children or level-1[1].docs %}href="#sidebar-{{ level-1[0] }}" data-toggle="collapse" data-parent="#menu" role="button" aria-expanded="{% if level-1[0] == current-page[0] %}true{% else %}false{% endif %}"{% elsif level-1[1].toggle %}href="{{ level-1[1].url }}" data-toggle="{{ level-1[1].toggle }}"{% else %}href="{{ site.base }}/{{ level-1[1].url }}"{% endif %}>
          <span class="nav-icon">
             {% include ui/icon.html icon=icon  %}
          </span>

pages/_includes/layout/modals.html

+<div class="modal fade" id="customize" tabindex="-1" role="dialog" aria-hidden="true">
+   <div class="modal-dialog" role="document">
+      <div class="modal-content">
+         <div class="modal-body">
+            <a class="close" data-dismiss="modal" aria-label="Close">
+               <span aria-hidden="true">&times;</span>
+            </a>
+
+            {% include layout/customize.html %}
+         </div>
+      </div>
+   </div>
+</div>

pages/_layouts/default.html

@@ -21,3 +21,5 @@ layout: base
       </main>
    </div>
 </div>
+
+{% include layout/modals.html %}

pages/customize.html

----
-title: Layout manager
----
-
-<div class="card">
-   <div class="card-header">
-      Layout manager
-   </div>
-   <div class="card-body">
-      <form action="" class="js-layout-form">
-         <div class="row">
-            <div class="col-4">
-               <div class="form-group">
-                  <label class="form-label">Color scheme</label>
-                  {% include ui/input-selectgroup.html name="color-scheme" values="light,dark" type="radio" class="w-100p" %}
-               </div>
-               <div class="form-group">
-                  <label class="form-label">Nav position</label>
-                  {% include ui/input-selectgroup.html name="nav-position" values="top,side" type="radio" class="w-100p" %}
-               </div>
-               <div class="form-group">
-                  <label class="form-label">Header color</label>
-                  {% include ui/input-selectgroup.html name="header-color" values="light,dark" type="radio" class="w-100p" %}
-               </div>
-               <!--<div class="form-group">-->
-                  <!--<label class="form-label">Header fixed</label>-->
-                  <!--{% include ui/input-selectgroup.html name="header-fixed" values="fixed,default" type="radio" class="w-100p" %}-->
-               <!--</div>-->
-               <div class="form-group">
-                  <label class="form-label">Sidebar position</label>
-                  {% include ui/input-selectgroup.html name="sidebar-position" values="left,right" type="radio" class="w-100p" %}
-               </div>
-               <div class="form-group">
-                  <label class="form-label">Sidebar size</label>
-                  {% include ui/input-selectgroup.html name="sidebar-size" values="default,folded" type="radio" class="w-100p" %}
-               </div>
-               <div class="form-group">
-                  <label class="form-label">Sidebar color</label>
-                  {% include ui/input-selectgroup.html name="sidebar-color" values="light,dark" type="radio" class="w-100p" %}
-               </div>
-               <div class="form-group">
-                  <label class="form-label">Sidebar fixed</label>
-                  {% include ui/input-selectgroup.html name="sidebar-fixed" values="fixed,default" type="radio" class="w-100p" %}
-               </div>
-
-
-
-               <!--<div class="form-footer">-->
-                  <!--<button type="submit" class="btn btn-primary">Save options</button>-->
-               <!--</div>-->
-            </div>
-         </div>
-      </form>
-   </div>
-</div>

scss/layout/_navbar.scss

@@ -231,28 +231,32 @@ Responsive utils
     @include media-breakpoint-up(xl) {
       display: flex;
 
-      & ~ .layout-main {
-        margin-left: $sidenav-width;
-      }
+      &.navbar-fixed {
+        & ~ .layout-main {
+          margin-left: $sidenav-width;
+        }
 
-      &.navbar-right ~ .layout-main {
-        margin-left: 0;
-        margin-right: $sidenav-width;
+        &.navbar-right ~ .layout-main {
+          margin-left: 0;
+          margin-right: $sidenav-width;
+        }
       }
     }
 
     &.navbar-folded {
       display: flex;
 
-      @include media-breakpoint-up(lg) {
+      &.navbar-fixed {
+        @include media-breakpoint-up(lg) {
 
-        & ~ .layout-main {
-          margin-left: $sidenav-folded-width;
-        }
+          & ~ .layout-main {
+            margin-left: $sidenav-folded-width;
+          }
 
-        &.navbar-right ~ .layout-main {
-          margin-left: 0;
-          margin-right: $sidenav-folded-width;
+          &.navbar-right ~ .layout-main {
+            margin-left: 0;
+            margin-right: $sidenav-folded-width;
+          }
         }
       }
     }