side nav prototype

client/views/common/layout.html

@@ -1,7 +1,7 @@
 <template name="layout">
 
 {{> UI.dynamic template=css}}
-  <div class="outer-wrapper {{currentPage}}">
+  <div class="outer-wrapper {{currentPage}} {{navLayout}}">
     {{> UI.dynamic template=mobile_nav}}
     <div class="inner-wrapper template-{{pageName}}">
       {{> UI.dynamic template=nav}}

client/views/common/layout.js

@@ -5,6 +5,9 @@ Template[getTemplate('layout')].helpers({
   nav: function () {
     return getTemplate('nav');
   },
+  navLayout: function () {
+    return getSetting('navLayout', 'top-nav');
+  },
   messages: function () {
     return getTemplate('messages');
   },

client/views/nav/logo.html

@@ -0,0 +1,11 @@
+<template name="logo">
+  {{#if logo_url}}
+    <h1 class="logo logo-image header-module">
+      <a href="/">
+        <img src="{{logo_url}}" alt="{{site_title}}"/>
+      </a>
+    </h1>
+  {{else}}
+    <h1 class="logo header-module"><a href="/">{{site_title}}</a></h1>
+  {{/if}}
+</template>

client/views/nav/logo.js

@@ -0,0 +1,8 @@
+Template[getTemplate('logo')].helpers({
+  site_title: function(){
+    return getSetting('title', "Telescope");
+  },
+  logo_url: function(){
+    return getSetting('logoUrl');
+  }
+});

client/views/nav/mobile_nav.html

@@ -1,7 +1,7 @@
 <template name="mobile_nav">
   <div class="mobile-nav">
     <div class="mobile-nav-inner">
-
+      {{> UI.dynamic template=logoTemplate}}
       <ul class="mobile-menu">
         {{#each primaryNav}}
           <li>

client/views/nav/mobile_nav.js

@@ -5,6 +5,9 @@ Template[getTemplate('mobile_nav')].helpers({
   secondaryNav: function () {
     return secondaryNav;
   },
+  logoTemplate: function () {
+    return getTemplate('logo');
+  },
   getTemplate: function () {
     return getTemplate(this.template);
   }

client/views/nav/nav.html

@@ -5,15 +5,7 @@
       <svg height="24px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path class="hamburger" d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z"/></svg>
     </a>
 
-    {{#if logo_url}}
-      <h1 class="logo logo-image header-module">
-        <a href="/">
-          <img src="{{logo_url}}" alt="{{site_title}}"/>
-        </a>
-      </h1>
-    {{else}}
-      <h1 class="logo header-module"><a href="/">{{site_title}}</a></h1>
-    {{/if}}
+    {{> UI.dynamic template=logoTemplate}}
 
     {{#if hasPrimaryNav}}
       <ul class="nav primary-nav desktop-nav {{dropdownClass}} header-module desktop-only">

client/views/nav/nav.js

@@ -14,15 +14,12 @@ Template[getTemplate('nav')].helpers({
   dropdownClass: function () {
     return getThemeSetting('useDropdowns', true) ? 'has-dropdown' : 'no-dropdown';
   },
+  logoTemplate: function () {
+    return getTemplate('logo');
+  },
   getTemplate: function () {
     return getTemplate(this.template);
   },
-  site_title: function(){
-    return getSetting('title', "Telescope");
-  },
-  logo_url: function(){
-    return getSetting('logoUrl');
-  },
   headerClass: function () {
     var color = getSetting('headerColor');
     return (color == 'white' || color == '#fff' || color == '#ffffff') ? "white-background" : '';

collections/settings.js

@@ -30,6 +30,18 @@ settingsSchemaObject = {
       instructions: 'A short description used for SEO purposes.'
     }
   },
+  navLayout: {
+    type: String,
+    optional: true,
+    autoform: {
+      group: 'general',
+      instructions: 'The layout used for the main menu',
+      options: [
+        {value: 'top-nav', label: 'Top'},
+        {value: 'side-nav', label: 'Side'}
+      ]
+    }
+  },
   requireViewInvite: {
     type: Boolean,
     optional: true,

packages/telescope-theme-base/lib/client/scss/specific/_header.scss

@@ -23,6 +23,11 @@ $mobile-header-height: 50px;
       }
     }
   }
+  .side-nav &{
+    @include medium-large{
+      display: none;
+    }
+  }
 }
 .header-module, .header-submodule{
   display: inline-block;
@@ -33,10 +38,10 @@ $mobile-header-height: 50px;
     margin-right: 0px;
   }
 }
+
 .logo{
   vertical-align: middle;
   line-height: 1;
-  padding: 0 60px; // leave space for nav button on mobile
   @include small{
     margin-right: 0;
     a{
@@ -53,6 +58,19 @@ $mobile-header-height: 50px;
       margin-right: 0;
     }
   }
+  .header &{
+    padding: 0 60px; // leave space for nav button on mobile
+  }
+  .mobile-nav &{
+    padding: 20px;
+    font-size: 30px;
+    &, a{
+      color: white;
+    }
+    @include small{
+      display: none;
+    }
+  }
 }
 .logo-image{
   a, img{

packages/telescope-theme-base/lib/client/scss/specific/_layout.scss

@@ -17,12 +17,21 @@ body{
 
 .outer-wrapper{
   position:relative;
+  &.side-nav{
+    @include medium-large{
+      margin-left: 200px;
+    }
+  }
 }
 .content-wrapper{
-  padding-bottom:20px;
+  padding:0 10px 20px 10px;
+  .side-nav &{
+    @include medium-large{
+      padding-top: 20px;
+    }
+  }
 }
 .content-wrapper{
-  padding: 0 10px;
   max-width: 1000px;
   margin: 0 auto;
   @include small{

packages/telescope-theme-base/lib/client/scss/specific/_mobile_nav.scss

@@ -14,17 +14,24 @@ $mobile-nav-width: 200px;
 .mobile-nav{
   position:fixed;
   overflow:auto;
-  left: -$mobile-nav-width;
-  left: calc((100% - 60px) * -1);
-  width: $mobile-nav-width;
-  width: calc(100% - 60px);
   height: 100%;
   top: 0px;
   bottom: 0px;
   background:#444;
   color:white;
   box-shadow: inset -3px 0px 7px black(0.5);
   z-index: 100;
+
+  left: -$mobile-nav-width;
+  left: calc((100% - 60px) * -1);
+  width: $mobile-nav-width;
+  width: calc(100% - 60px);
+  .side-nav &{
+    @include medium-large{
+      left: 0px;
+      width: 200px;
+    }
+  }
 }
 
 .mobile-nav, .inner-wrapper{

packages/telescope-theme-hubble/lib/client/scss/partials/_grid.scss

@@ -33,7 +33,6 @@ $medium-break: 50em;
 }
 
 .content-wrapper{
-	padding: 0 10px;
   @include small{
     overflow-x: hidden;
   }