collapsable menu w/saving in admin

Makefile

@@ -50,7 +50,7 @@ test:
 	#php artisan database:create --reset
 	vendor/bin/phpunit --debug --verbose
 
-.PHONY
+.PHONY: sass-watch
 sass-watch:
 	sass --watch public/assets/admin/sass/paper-dashboard.scss:public/assets/admin/css/paper-dashboard.css
 

public/assets/admin/css/paper-dashboard.css

@@ -297,6 +297,13 @@ hr {
         position: absolute;
         right: -1px;
         top: 8px; }
+    .sidebar .nav li > a.menu,
+    .off-canvas-sidebar .nav li > a.menu {
+      padding: 0px;
+      padding-top: 10px; }
+    .sidebar .nav li ul,
+    .off-canvas-sidebar .nav li ul {
+      margin-top: 0px; }
     .sidebar .nav p,
     .off-canvas-sidebar .nav p {
       margin: 0;
@@ -333,23 +340,23 @@ hr {
   .sidebar .logo, .sidebar[data-background-color="white"] .logo,
   .off-canvas-sidebar .logo,
   .off-canvas-sidebar[data-background-color="white"] .logo {
-    border-bottom: 1px solid rgba(102, 97, 91, 0.3); }
+    border-bottom: 1px solid rgba(81, 77, 72, 0.3); }
     .sidebar .logo p, .sidebar[data-background-color="white"] .logo p,
     .off-canvas-sidebar .logo p,
     .off-canvas-sidebar[data-background-color="white"] .logo p {
-      color: #66615B; }
+      color: #514d48; }
     .sidebar .logo .simple-text, .sidebar[data-background-color="white"] .logo .simple-text,
     .off-canvas-sidebar .logo .simple-text,
     .off-canvas-sidebar[data-background-color="white"] .logo .simple-text {
-      color: #66615B; }
+      color: #514d48; }
   .sidebar .nav li:not(.active) > a, .sidebar[data-background-color="white"] .nav li:not(.active) > a,
   .off-canvas-sidebar .nav li:not(.active) > a,
   .off-canvas-sidebar[data-background-color="white"] .nav li:not(.active) > a {
-    color: #b6c3cc; }
+    color: #514d48; }
   .sidebar .nav .divider, .sidebar[data-background-color="white"] .nav .divider,
   .off-canvas-sidebar .nav .divider,
   .off-canvas-sidebar[data-background-color="white"] .nav .divider {
-    background-color: rgba(102, 97, 91, 0.2); }
+    background-color: rgba(81, 77, 72, 0.2); }
   .sidebar[data-background-color="black"]:after, .sidebar[data-background-color="black"]:before,
   .off-canvas-sidebar[data-background-color="black"]:after,
   .off-canvas-sidebar[data-background-color="black"]:before {
@@ -365,7 +372,7 @@ hr {
       color: #FFFFFF; }
   .sidebar[data-background-color="black"] .nav li:not(.active) > a,
   .off-canvas-sidebar[data-background-color="black"] .nav li:not(.active) > a {
-    color: #b6c3cc; }
+    color: #FFFFFF; }
   .sidebar[data-background-color="black"] .nav .divider,
   .off-canvas-sidebar[data-background-color="black"] .nav .divider {
     background-color: rgba(255, 255, 255, 0.2); }
@@ -426,8 +433,8 @@ hr {
   font-size: 14px;
   font-weight: 500;
   padding: 7px 18px;
-  border-color: #66615B;
+  border-color: #514d48;
-  color: #66615B;
+  color: #514d48;
   -webkit-transition: all 150ms linear;
   -moz-transition: all 150ms linear;
   -o-transition: all 150ms linear;
@@ -439,9 +446,9 @@ hr {
   .navbar .navbar-nav > li > a.btn:active,
   .navbar .navbar-nav > li > a.btn.active, .open >
   .navbar .navbar-nav > li > a.btn.dropdown-toggle {
-    background-color: #66615B;
+    background-color: #514d48;
     color: rgba(255, 255, 255, 0.7);
-    border-color: #66615B; }
+    border-color: #514d48; }
     .btn:hover .caret, .btn:focus .caret, .btn:active .caret, .btn.active .caret, .open > .btn.dropdown-toggle .caret,
     .navbar .navbar-nav > li > a.btn:hover .caret,
     .navbar .navbar-nav > li > a.btn:focus .caret,
@@ -475,10 +482,10 @@ hr {
   fieldset[disabled] .navbar .navbar-nav > li > a.btn:active,
   fieldset[disabled] .navbar .navbar-nav > li > a.btn.active {
     background-color: transparent;
-    border-color: #66615B; }
+    border-color: #514d48; }
   .btn.btn-fill, .navbar .navbar-nav > li > a.btn.btn-fill {
     color: #FFFFFF;
-    background-color: #66615B;
+    background-color: #514d48;
     opacity: 1;
     filter: alpha(opacity=100); }
     .btn.btn-fill:hover, .btn.btn-fill:focus, .btn.btn-fill:active, .btn.btn-fill.active, .open > .btn.btn-fill.dropdown-toggle, .navbar .navbar-nav > li > a.btn.btn-fill:hover, .navbar .navbar-nav > li > a.btn.btn-fill:focus, .navbar .navbar-nav > li > a.btn.btn-fill:active, .navbar .navbar-nav > li > a.btn.btn-fill.active, .open > .navbar .navbar-nav > li > a.btn.btn-fill.dropdown-toggle {
@@ -493,7 +500,7 @@ hr {
   .btn.btn-simple .caret, .navbar .navbar-nav > li > a.btn.btn-simple .caret {
     border-top-color: #FFFFFF; }
   .btn .caret, .navbar .navbar-nav > li > a.btn .caret {
-    border-top-color: #66615B; }
+    border-top-color: #514d48; }
   .btn:hover, .btn:focus, .navbar .navbar-nav > li > a.btn:hover, .navbar .navbar-nav > li > a.btn:focus {
     outline: 0 !important; }
   .btn:active, .btn.active, .open > .btn.dropdown-toggle, .navbar .navbar-nav > li > a.btn:active, .navbar .navbar-nav > li > a.btn.active, .open > .navbar .navbar-nav > li > a.btn.dropdown-toggle {
@@ -695,12 +702,12 @@ hr {
   .btn-neutral .caret {
     border-top-color: #FFFFFF; }
   .btn-neutral:hover, .btn-neutral:focus {
-    color: #66615B; }
+    color: #514d48; }
   .btn-neutral:active, .btn-neutral.active, .open > .btn-neutral.dropdown-toggle {
     background-color: #FFFFFF;
-    color: #66615B; }
+    color: #514d48; }
   .btn-neutral.btn-fill {
-    color: #66615B; }
+    color: #514d48; }
   .btn-neutral.btn-fill:hover, .btn-neutral.btn-fill:focus {
     color: #403D39; }
   .btn-neutral.btn-simple:active, .btn-neutral.btn-simple.active {
@@ -1425,7 +1432,7 @@ textarea.form-control {
     border-bottom: 0 none; }
   .dropdown-menu > li > a:hover,
   .dropdown-menu > li > a:focus {
-    background-color: #66615B;
+    background-color: #514d48;
     color: rgba(255, 255, 255, 0.7);
     opacity: 1;
     text-decoration: none; }
@@ -2358,7 +2365,7 @@ textarea.form-control {
       padding: 10px 15px 0; }
       .off-canvas-sidebar .nav > li > a {
         margin: 0px 0px;
-        color: #66615B;
+        color: #514d48;
         text-transform: uppercase;
         font-weight: 600;
         font-size: 12px;

public/assets/admin/sass/paper/_sidebar-and-main-panel.scss

@@ -98,6 +98,15 @@
                     top: 8px;
                 }
             }
+
+            > a.menu {
+                padding: 0px;
+                padding-top: 10px;
+            }
+
+            ul {
+                margin-top: 0px;
+            }
         }
 
         p{

public/assets/admin/sass/paper/_variables.scss

@@ -38,7 +38,7 @@ $success-input-bg:           #ABF3CB !default;
 $other-medium-gray:          #A49E93 !default;
 $transparent-bg:             transparent !default;
 
-$default-color:              #66615B !default;
+$default-color:              #514d48 !default; //#66615B !default;
 $default-bg:                 #66615B !default;
 $default-states-color:       #403D39 !default;
 

public/assets/admin/sass/paper/mixins/_sidebar.scss

@@ -19,7 +19,7 @@
     .nav{
         li:not(.active){
             > a{
-                color: #b6c3cc;
+                color: $font-color;
             }
         }
         .divider{

resources/views/admin/app.blade.php

@@ -119,9 +119,92 @@
 <script src="/js/admin/admin.js"></script>
 
 <script>
-    $(document).ready(function () {
+var getStorage = function(key) {
-        $(".select2").select2();
+    var st = window.localStorage.getItem(key);
+    console.log('storage: ', key, st);
+    if(_.isNil(st)) {
+        return {
+            "menu": [],
+        };
+    }
+
+    return JSON.parse(st);
+};
+
+var saveStorage = function(key, obj) {
+    console.log('save: ', key, obj);
+    window.localStorage.setItem(key, JSON.stringify(obj));
+};
+
+var addItem = function(obj, item) {
+    if (_.isNil(obj)) {
+        obj = [];
+    }
+
+    var index = _.indexOf(obj, item);
+    if(index === -1) {
+        obj.push(item);
+    }
+
+    return obj;
+};
+
+var removeItem = function (obj, item) {
+    if (_.isNil(obj)) {
+        obj = [];
+    }
+    var index = _.indexOf(obj, item);
+    if (index !== -1) {
+        console.log("removing", item);
+        obj.splice(index, 1);
+    }
+
+    return obj;
+};
+
+$(document).ready(function () {
+
+    $(".select2").select2();
+
+
+
+    var storage = getStorage("phpvms.admin");
+
+    // see what menu items should be open
+    for(var idx = 0; idx < storage.menu.length; idx++) {
+        var id = storage.menu[idx];
+        var elem = $(".collapse#" + id);
+        elem.addClass("in").trigger("show.bs.collapse");
+
+        var caret = $("a." + id + " b");
+        caret.addClass("pe-7s-angle-down");
+        caret.removeClass("pe-7s-angle-up");
+    }
+
+    $(".collapse").on("hide.bs.collapse", function () {
+        console.log('hiding');
+        var id = $(this).attr('id');
+        var elem = $("a." + id + " b");
+        elem.removeClass("pe-7s-angle-down");
+        elem.addClass("pe-7s-angle-up");
+
+        removeItem(storage.menu, id);
+        saveStorage("phpvms.admin", storage);
+
     });
+
+    $(".collapse").on("show.bs.collapse", function () {
+        console.log('showing');
+        var id = $(this).attr('id');
+        var caret = $("a." + id + " b");
+        caret.addClass("pe-7s-angle-down");
+        caret.removeClass("pe-7s-angle-up");
+
+        addItem(storage.menu, id);
+        saveStorage("phpvms.admin", storage);
+    });
+
+});
 </script>
 @yield('scripts')
 </html>

resources/views/admin/menu.blade.php

@@ -1,25 +1,53 @@
 
-<li><h5>operations</h5></li>
 <li>
     <a href="{!! url('/admin/dashboard') !!}"><i class="pe-7s-display1"></i>dashboard</a>
 </li>
 
-<li><a href="{!! url('/admin/pireps') !!}"><i class="pe-7s-cloud-upload"></i>pireps
+<li>
-        <span data-toggle="tooltip" title="3 New" class="badge bg-light-blue pull-right">3</span>
+    <a data-toggle="collapse" href="#operations_menu" class="menu operations_menu" aria-expanded="true">
+        <h5>operations&nbsp;<b class="pe-7s-angle-up"></b></h5>
     </a>
+
+    <div class="collapse" id="operations_menu" aria-expanded="true">
+        <ul class="nav">
+            <li><a href="{!! url('/admin/pireps') !!}"><i class="pe-7s-cloud-upload"></i>pireps
+                    <span data-toggle="tooltip" title="3 New"
+                          class="badge bg-light-blue pull-right">3</span>
+                </a>
+            </li>
+            <li><a href="{!! url('/admin/flights') !!}"><i class="pe-7s-vector"></i>flights</a></li>
+            <li><a href="{!! url('/admin/aircraft') !!}"><i class="pe-7s-plane"></i>fleet</a></li>
+            <li><a href="{!! url('/admin/fares') !!}"><i class="pe-7s-graph2"></i>fares</a></li>
+        </ul>
+    </div>
 </li>
-<li><a href="{!! url('/admin/flights') !!}"><i class="pe-7s-vector"></i>flights</a></li>
-<li><a href="{!! url('/admin/aircraft') !!}"><i class="pe-7s-plane"></i>fleet</a></li>
-<li><a href="{!! url('/admin/fares') !!}"><i class="pe-7s-graph2"></i>fares</a></li>
-<li style="padding-bottom: 18px;"></li>
 
-<li><h5>config</h5></li>
+<li>
-<li><a href="{!! url('/admin/airlines') !!}"><i class="pe-7s-paper-plane"></i>airlines</a></li>
+    <a data-toggle="collapse" href="#config_menu" class="menu config_menu" aria-expanded="true">
-<li><a href="{!! url('/admin/airports') !!}"><i class="pe-7s-map-marker"></i>airports</a></li>
+        <h5>config&nbsp;<b class="pe-7s-angle-up"></b></h5>
-<li><a href="{!! url('/admin/users') !!}"><i class="pe-7s-users"></i>users</a></li>
+    </a>
-<li><a href="{!! url('/admin/ranks') !!}"><i class="pe-7s-id"></i>ranks</a></li>
 
-<li style="padding-bottom: 18px;"></li>
+    <div class="collapse" id="config_menu" aria-expanded="true">
-<li><h5>addons</h5></li>
+        <ul class="nav">
-@stack('admin.addons.links')
+            <li><a href="{!! url('/admin/airlines') !!}"><i
+                            class="pe-7s-paper-plane"></i>airlines</a></li>
+            <li><a href="{!! url('/admin/airports') !!}"><i
+                            class="pe-7s-map-marker"></i>airports</a></li>
+            <li><a href="{!! url('/admin/users') !!}"><i class="pe-7s-users"></i>users</a></li>
+            <li><a href="{!! url('/admin/ranks') !!}"><i class="pe-7s-id"></i>ranks</a></li>
+        </ul>
+    </div>
+</li>
+
+<li>
+    <a data-toggle="collapse" href="#addons_menu" class="menu addons_menu" aria-expanded="true">
+        <h5>addons&nbsp;<b class="pe-7s-angle-up"></b></h5>
+    </a>
+
+    <div class="collapse" id="addons_menu" aria-expanded="true">
+        <ul class="nav">
+            @stack('admin.addons.links')
+        </ul>
+    </div>
+</li>
 

resources/views/admin/sidebar.blade.php

@@ -1,4 +1,4 @@
-<div class="sidebar" data-background-color="black" data-active-color="info">
+<div class="sidebar" data-background-color="white" data-active-color="info">
 
     <!--
         Tip 1: you can change the color of the sidebar's background using: data-background-color="white | black"