Styled the navbar; allowed collapsing it to give the user more screen space

Gruntfile.js

@@ -19,6 +19,21 @@ module.exports = function(grunt) {
       }
     },
 
+    coffee: {
+      options: {
+        sourceMap: true,
+        style: 'compressed'
+      },
+      files: {
+        expand: true,
+        flatten: true,
+        cwd: 'assets/coffee',
+        src: ['*.coffee'],
+        dest: 'public/js',
+        ext: '.js'
+      }
+    },
+
     watch: {
       css: {
         files: ['assets/styles/**/*.scss'],
@@ -27,15 +42,24 @@ module.exports = function(grunt) {
           atBegin: true,
           spawn: false
         }
+      },
+      js: {
+        files: ['assets/coffee/*.coffee'],
+        tasks: ['coffee'],
+        options: {
+          atBegin: true,
+          spawn: false
+        }
       }
     }
   });
 
   // Load plugins.
-  grunt.loadNpmTasks('grunt-contrib-watch');
   grunt.loadNpmTasks('grunt-contrib-sass');
+  grunt.loadNpmTasks('grunt-contrib-coffee');
+  grunt.loadNpmTasks('grunt-contrib-watch');
 
-  // CLI tasks.
+  // Default task(s).
-  grunt.registerTask('default', ['sass']);
+  grunt.registerTask('default', ['sass', 'coffee']);
 
 };

assets/coffee/gargoyle.coffee

@@ -0,0 +1,12 @@
+$(document).ready( ->
+
+  $('#nav-toggle').on('click', toggleNav)
+
+)
+
+toggleNav = () ->
+  bodyElem = $('body')
+  if bodyElem.hasClass('collapsed')
+    bodyElem.removeClass('collapsed')
+  else
+    bodyElem.addClass('collapsed')

assets/styles/kraken.scss

@@ -6,6 +6,7 @@ $box-shadow-2: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
 body{
   background: lightgrey;
   padding-left: $nav-width;
+  transition: padding-left 230ms ease-in-out;
 }
 
 .card{
@@ -26,9 +27,21 @@ body{
   color: white;
   box-shadow: $box-shadow-1;
   box-sizing: border-box;
+  transition: left 230ms ease-in-out;
 
   h3{
-    text-align: center;
+    padding-left: 15px;
+    text-align: left;
+
+    i{
+      position: absolute;
+      right: 22px;
+      margin-top: 5px;
+      font-size: 3rem;
+      &:hover{
+        cursor: pointer;
+      }
+    }
   }
 
   ul{
@@ -41,6 +54,13 @@ body{
       &:first-child{
         border-top: 1px solid #999;
       }
+
+      i{
+        position: absolute;
+        right: 18px;
+        margin-top: 5px;
+        font-size: 3rem;
+      }
     }
 
     a{
@@ -60,6 +80,13 @@ body{
   }
 }
 
+body.collapsed{
+  padding-left: 64px;
+}
+body.collapsed #main-nav{
+  left: calc($nav-width * -1 + 64px);
+}
+
 #main-actions{
   width: 100%;
   max-width: 100%;

package-lock.json

@@ -11,6 +11,7 @@
       "devDependencies": {
         "grunt": "^1.5.3",
         "grunt-cli": "^1.4.3",
+        "grunt-contrib-coffee": "^2.1.0",
         "grunt-contrib-sass": "^2.0.0",
         "grunt-contrib-watch": "^1.1.0",
         "sass": "^1.55.0"
@@ -192,6 +193,19 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/coffeescript": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/coffeescript/-/coffeescript-2.7.0.tgz",
+      "integrity": "sha512-hzWp6TUE2d/jCcN67LrW1eh5b/rSDKQK6oD6VMLlggYVUUFexgTH9z3dNYihzX4RMhze5FTUsUmOXViJKFQR/A==",
+      "dev": true,
+      "bin": {
+        "cake": "bin/cake",
+        "coffee": "bin/coffee"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -640,6 +654,24 @@
         "nopt": "bin/nopt.js"
       }
     },
+    "node_modules/grunt-contrib-coffee": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/grunt-contrib-coffee/-/grunt-contrib-coffee-2.1.0.tgz",
+      "integrity": "sha512-lgP+pPY3mHl+gqAU0T+7BcocBWu0FyeeJnAG/iIp2I0GPa5LvZJ7Wqga6QwKQtQCTs+1gPEa12nuap9Lj08lhw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "coffeescript": "^2.3.2",
+        "lodash": "^4.17.11",
+        "uri-path": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "peerDependencies": {
+        "grunt": ">=0.4.5"
+      }
+    },
     "node_modules/grunt-contrib-sass": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/grunt-contrib-sass/-/grunt-contrib-sass-2.0.0.tgz",
@@ -1679,6 +1711,15 @@
       "integrity": "sha512-VE0SOVEHCk7Qc8ulkWw3ntAzXuqf7S2lvwQaDLRnUeIEaKNQJzV6BwmLKhOqT61aGhfUMrXeaBk+oDGCzvhcug==",
       "dev": true
     },
+    "node_modules/uri-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/uri-path/-/uri-path-1.0.0.tgz",
+      "integrity": "sha512-8pMuAn4KacYdGMkFaoQARicp4HSw24/DHOVKWqVRJ8LhhAwPPFpdGvdL9184JVmUwe7vz7Z9n6IqI6t5n2ELdg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -1881,6 +1922,12 @@
         "readdirp": "~3.6.0"
       }
     },
+    "coffeescript": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/coffeescript/-/coffeescript-2.7.0.tgz",
+      "integrity": "sha512-hzWp6TUE2d/jCcN67LrW1eh5b/rSDKQK6oD6VMLlggYVUUFexgTH9z3dNYihzX4RMhze5FTUsUmOXViJKFQR/A==",
+      "dev": true
+    },
     "color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -2229,6 +2276,18 @@
         }
       }
     },
+    "grunt-contrib-coffee": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/grunt-contrib-coffee/-/grunt-contrib-coffee-2.1.0.tgz",
+      "integrity": "sha512-lgP+pPY3mHl+gqAU0T+7BcocBWu0FyeeJnAG/iIp2I0GPa5LvZJ7Wqga6QwKQtQCTs+1gPEa12nuap9Lj08lhw==",
+      "dev": true,
+      "requires": {
+        "chalk": "^2.4.2",
+        "coffeescript": "^2.3.2",
+        "lodash": "^4.17.11",
+        "uri-path": "^1.0.0"
+      }
+    },
     "grunt-contrib-sass": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/grunt-contrib-sass/-/grunt-contrib-sass-2.0.0.tgz",
@@ -3013,6 +3072,12 @@
         }
       }
     },
+    "uri-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/uri-path/-/uri-path-1.0.0.tgz",
+      "integrity": "sha512-8pMuAn4KacYdGMkFaoQARicp4HSw24/DHOVKWqVRJ8LhhAwPPFpdGvdL9184JVmUwe7vz7Z9n6IqI6t5n2ELdg==",
+      "dev": true
+    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",

package.json

@@ -26,6 +26,7 @@
   "devDependencies": {
     "grunt": "^1.5.3",
     "grunt-cli": "^1.4.3",
+    "grunt-contrib-coffee": "^2.1.0",
     "grunt-contrib-sass": "^2.0.0",
     "grunt-contrib-watch": "^1.1.0",
     "sass": "^1.55.0"

views/layout.erb

@@ -8,6 +8,7 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
   <link rel="stylesheet" href="/css/kraken.css">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
+  <script src="/js/gargoyle.js"></script>
 </head>
 <body>
   <!-- Main navigation -->

views/layout/navbar.erb

@@ -1,8 +1,8 @@
 <nav id="main-nav">
-  <h3>Raven</h3>
+  <h3>Raven <i id="nav-toggle" class="fa-solid fa-bars"></i></h3>
   <ul>
-    <li><a href="/">Dashboard</a></li>
+    <li><a href="/">Dashboard <i class="fa-solid fa-gauge"></i></a></li>
-    <li><a href="/item/list">Items</a></li>
+    <li><a href="/item/list">Items <i class="fa-solid fa-desktop"></i></a></li>
-    <li><a href="/license/list">Licenses</a></li>
+    <li><a href="/license/list">Licenses <i class="fa-solid fa-floppy-disk"></i></a></li>
   </ul>
 </nav>