offset.js

.eslintrc.js

@@ -38,7 +38,7 @@ module.exports = {
       'optionalDependencies': ['test/unit/index.js']
     }],
     // allow debugger during development
-    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
     'linebreak-style': 0,
   }
 }

package.json

@@ -17,6 +17,7 @@
     "bootstrap-vue": "^2.0.0-rc.19",
     "chosen-js": "^1.8.7",
     "jquery": "^3.4.0",
+    "offside-js": "^1.4.0",
     "popper.js": "^1.15.0",
     "vue": "^2.5.2",
     "vue-analytics": "^5.16.4",

src/components/BeerList.vue

@@ -1,14 +1,27 @@
 <template>
 <div class="beer-list">
+  <!-- Off-canvas element  -->
+  <nav id="my-menu">
+    <ul>
+      <li><a href="#">Home</a></li>
+      <li><a href="#">About</a></li>
+      <li><a href="#">Projects</a></li>
+      <li><a href="#">Contact</a></li>
+    </ul>
+  </nav>
+
+<div class="my-content-container">
   <div class="header">
     <div class="container-fluid container-header">
       <nav class="navbar navbar-expand-md navbar">
+        <button type="button" id="my-button">Offside toggle</button>
         <router-link class="navbar-brand navbar-logo" to="/">
           <span class="particletext bubbles">
             <img class="brand-logo" src="/static/svg/hsv-beer-logo.svg" alt="hsv.beer">
           </span>
         </router-link>
       </nav>
+
       <p class="text-intro lead text-center">Find draft beer in Huntsville</p>
       <div id="search" class="search-container" v-bind:class="{active: search_active}">
         <div class="search-icon-container">
@@ -22,9 +35,9 @@
           </div>
         </div>
 
-        <input v-model="query" type="text" 
-               class="form-control search" 
-               placeholder="Search beers, brewers, or styles" 
+        <input v-model="query" type="text"
+               class="form-control search"
+               placeholder="Search beers, brewers, or styles"
                aria-label="Search beers, brewers, or styles"
                @focus="search_active = true"
                @keyup.enter="onQueryEnter">
@@ -35,9 +48,9 @@
     </div>
 
     <div class="taphouse-select-container">
-      <vue-chosen v-model="selected_venue_id" 
-                  :options="venues" 
-                  label="name" 
+      <vue-chosen v-model="selected_venue_id"
+                  :options="venues"
+                  label="name"
                   placeholder="Select a taphouse">
       </vue-chosen>
     </div>
@@ -48,7 +61,7 @@
   <div class="container-fluid">
     <div class="results-header">
       <h2 class="results-number">
-        <span class="beer-total">{{ beerCount }}</span> <span class="d-none">matching</span> beers on tap 
+        <span class="beer-total">{{ beerCount }}</span> <span class="d-none">matching</span> beers on tap
         <span v-if="selected_venue"> at <a class="header-venue" href="#" data-toggle="modal" data-target="#venueModal">{{ selected_venue.name }}</a></span>
       </h2>
       <div class="sort">
@@ -65,7 +78,7 @@
     </div>
     <div class="container-list">
       <ul id="beer-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy">
-        <beer-item v-for="beer in beers" v-bind:key="beer.id" v-bind:beer="beer"></beer-item>         
+        <beer-item v-for="beer in beers" v-bind:key="beer.id" v-bind:beer="beer"></beer-item>
       </ul>
     </div>
   </div>
@@ -82,13 +95,17 @@
 
 <venue-modal :venue="selected_venue"></venue-modal>
 
+</div>
 </div>
 </template>
 
 <script>
 import $ from 'jquery';
 import axios from 'axios';
 
+import 'offside-js/dist/offside.css';
+import offside from 'offside-js';
+
 import { getVenues, getBeers, getVenueBeers, searchBeers } from '@/services/venues';
 
 import BeerItem from './BeerItem';
@@ -145,6 +162,11 @@ export default {
     }
     bubbles();
 
+    offside('#my-menu', {
+      slidingElementsSelector: '#my-content-container',
+      buttonsSelector: '#my-button, .another-button',
+    });
+
     getVenues().then((response) => {
       this.venues.push(...response.data.results);
     });
@@ -356,7 +378,7 @@ strong, b {
 }
 
 .link-solo {
-  
+
 }
 
 .container-fluid {
@@ -954,7 +976,7 @@ body .particletext.bubbles > .particle {
 
 @keyframes bubbles {
   0% {
-    opacity: 0;   
+    opacity: 0;
   }
   20% {
     opacity: 0.3;
@@ -1000,7 +1022,7 @@ body .particletext.bubbles > .particle {
 }
 
 .search-icon.small {
-  font-size:3px; 
+  font-size:3px;
 }
 
 /* ALL THE BORDERS */
@@ -1115,7 +1137,7 @@ body .particletext.bubbles > .particle {
   border-width:2px;
   border-left:0;
   height:2.75em;
-  transition: height .2s ease-out .2s, border-width 0s ease-out .2s, transform .2s ease-out;  
+  transition: height .2s ease-out .2s, border-width 0s ease-out .2s, transform .2s ease-out;
 }
 
 .active .search-icon .mug-sides {
@@ -1488,29 +1510,29 @@ This file is generated by `grunt build`, do not edit it by hand.
 }
 
 @media (min-width:880px) {
-  
+
   .navbar-logo {
     padding-top:1.25rem;
   }
-  
+
   .text-intro {
     padding-bottom:1.25rem;
   }
-  
+
   .search-container {
     flex:0 0 50%;
     padding-right:.5rem;
   }
-  
+
   .taphouse-select-container {
     flex:0 0 50%;
     padding-left:.5rem;
   }
-  
+
   .taphouse-select-container:before {
     background-position: 90% 50%;
   }
-  
+
   .beer-info {
     display:flex;
     flex-direction: column;
@@ -1530,7 +1552,7 @@ This file is generated by `grunt build`, do not edit it by hand.
 
   .beer-brewer {
     padding-right: 2.5rem;
-    margin-bottom: .25rem;  
+    margin-bottom: .25rem;
   }
 }
-</style>
+</style>

yarn.lock

@@ -4737,6 +4737,11 @@ object.pick@^1.3.0:
   dependencies:
     isobject "^3.0.1"
 
+offside-js@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/offside-js/-/offside-js-1.4.0.tgz#2d2d37b0b7e8ea625df183de42f34be63ff3c3b2"
+  integrity sha512-1Kap949+bPENx4Jxxw+ww4QqacoxDOhQZsM9PFQDLbl/JxeMKzpZ0FUJ830TstpTHFi4IDp0XDh3fxO6TeFvvw==
+
 on-finished@~2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"