From c1f485399c133620ca637d438b295676ce3fa599 Mon Sep 17 00:00:00 2001
From: Laury GvR <laury@gaslightmedia.com>
Date: Wed, 16 Aug 2017 16:29:31 -0400
Subject: [PATCH] Right menu drops left. Members only in offcanvas on small

In small view the members only now goes into the off-canvas instead
of outright disappaering.
The right main nav menu has drop-left instead of drop-right submenus.
---
 css/app.css                      | 35 ++++++++++++++++++++++++--------
 glm-members-only-template.php    |  4 ++--
 parts/members-sidebar.php        |  2 +-
 parts/off-canvas-menu.php        |  6 ++++++
 scss/_topbar.scss                |  4 ++++
 scss/plugins/_glm-member-db.scss | 34 +++++++++++++++++++++++--------
 6 files changed, 64 insertions(+), 21 deletions(-)

diff --git a/css/app.css b/css/app.css
index 2bd07db..518182a 100644
--- a/css/app.css
+++ b/css/app.css
@@ -6881,6 +6881,10 @@ video {
 @media only screen and (min-width: 40em) {
   .top-bar-section li:not(.has-form) a:not(.button) {
     padding: 0 11px; }
+
+  #menu-main-navigation-right .has-dropdown.not-click:hover > .dropdown {
+    right: 0;
+    left: auto; }
  }
 
 .top-bar-section {
@@ -7658,7 +7662,7 @@ body .glm-member-db-list {
   font-family: "ingram-wide-2"; }
   body .glm-member-db-list h1, body .glm-member-db-list h2, body .glm-member-db-list h3, body .glm-member-db-list h4, body .glm-member-db-list h5, body .glm-member-db-list h6 {
     font-family: "ingram-wide-2"; }
-body #menu-side, body #side-links, body .glm-button, body .glm-member-db-list .glm-member-list-active-info {
+body .menu-side, body #members-only-sidebar, body .glm-button, body .glm-member-db-list .glm-member-list-active-info {
   font-family: "ingram-wide-2"; }
 body .glm-member-db-list-view #glm-member-list-map-toggle {
   background-color: #434343; }
@@ -7758,33 +7762,46 @@ body #glm-member-detail-container #glm-package-detail-member-name h3 {
 body #glm-member-detail-container #glm-package-detail-member-name a:hover {
   color: white;
   text-decoration: underline; }
-body main.members-only-template #menu-side h2 a {
+body #members-only-sidebar-off-canvas {
+  background-color: #434343;
+  border-radius: 5px;
+  list-style: outside none none;
+  padding: 10px;
+  margin: 10px;
+  max-width: 230px; }
+  body #members-only-sidebar-off-canvas h2 {
+    color: #FFFFFF; }
+  body #members-only-sidebar-off-canvas .menu-side .glm-button {
+    background: transparent;
+    text-decoration: underline;
+    color: white; }
+body main.members-only-template .menu-side h2 a {
   color: white;
   font-size: 1.875rem;
   font-family: "ingram-wide-2"; }
-  body main.members-only-template #menu-side h2 a:hover {
+  body main.members-only-template .menu-side h2 a:hover {
     border-bottom: 1px solid white; }
-body main.members-only-template #side-links {
+body main.members-only-template #members-only-sidebar {
   background-color: #434343;
   border-radius: 5px;
   list-style: outside none none;
   padding: 20px; }
-body main.members-only-template #menu-side .glm-button {
+body main.members-only-template .menu-side .glm-button {
   background: transparent;
   text-decoration: underline;
   color: white; }
 body main.members-only-template #menu-members-only-menu {
   list-style: outside none none; }
-body main.members-only-template #side-links h2 {
+body main.members-only-template #members-only-sidebar h2 {
   color: #FFFFFF; }
-body main.members-only-template #side-links li {
+body main.members-only-template #members-only-sidebar li {
   line-height: 1;
   margin-bottom: 10px; }
-body main.members-only-template #side-links li a {
+body main.members-only-template #members-only-sidebar li a {
   color: #FFFFFF;
   text-decoration: none;
   font-size: 18px; }
-body main.members-only-template #side-links li a:hover {
+body main.members-only-template #members-only-sidebar li a:hover {
   color: #ffc742;
   border-bottom: 1px solid #ffc742; }
 body main.members-only-template .blocks .block {
diff --git a/glm-members-only-template.php b/glm-members-only-template.php
index d7d1ebc..f874624 100644
--- a/glm-members-only-template.php
+++ b/glm-members-only-template.php
@@ -19,10 +19,10 @@ Template Name: GLM Members Only Template
             ?>
         </div>-->
         <div class="row">
-            <div id="side-links" class="show-for-medium-up left medium-3 columns">
+            <div id="members-only-sidebar" class="show-for-large-up left large-3 columns">
                 <?php get_template_part('parts/members-sidebar');?>
             </div>
-            <div id="main-content" class="small-12 medium-9 columns">
+            <div id="main-content" class="small-12 large-9 columns">
 
                 <?php if (current_user_can("glm_members_member")) { ?>
                     <!-- If user is logged in as a member, display top bar, bread crumbs, & content -->
diff --git a/parts/members-sidebar.php b/parts/members-sidebar.php
index c79c3f8..3af8a0d 100644
--- a/parts/members-sidebar.php
+++ b/parts/members-sidebar.php
@@ -1,4 +1,4 @@
-<div id="menu-side" class="row collapse">
+<div class="menu-side" class="row collapse">
         <h2>Members Only</h2>
         <?php // glm_side_menu(); ?>
         <?php if (current_user_can("glm_members_member")) { ?>
diff --git a/parts/off-canvas-menu.php b/parts/off-canvas-menu.php
index d16818e..ecc69dd 100644
--- a/parts/off-canvas-menu.php
+++ b/parts/off-canvas-menu.php
@@ -2,6 +2,12 @@
     <?php //glm_offcanvas_menu(); ?>
     <?php truenorthgolf_mobile_off_canvas( 'top-bar-left' ); ?>
     <?php truenorthgolf_mobile_off_canvas( 'top-bar-right' ); ?>
+    <?php if (current_user_can("glm_members_member")) { ?>
+        <div id="members-only-sidebar-off-canvas" class="show-for-small-only small-12 columns">
+        <?php get_template_part('parts/members-sidebar');?>
+        </div>
+        <br>
+    <?php } ?>
     <br>
     <?php get_template_part('parts/client-info-offcanvas');?>
 </aside>
diff --git a/scss/_topbar.scss b/scss/_topbar.scss
index fe45a74..4ec86bb 100644
--- a/scss/_topbar.scss
+++ b/scss/_topbar.scss
@@ -28,6 +28,10 @@
     .top-bar-section li:not(.has-form) a:not(.button) {
         padding: 0 11px;
     }
+    #menu-main-navigation-right .has-dropdown.not-click:hover > .dropdown {
+        right: 0;
+        left: auto;
+    }
 }
 .top-bar-section {
     background: transparent;
diff --git a/scss/plugins/_glm-member-db.scss b/scss/plugins/_glm-member-db.scss
index 641ab2a..a9f6b95 100644
--- a/scss/plugins/_glm-member-db.scss
+++ b/scss/plugins/_glm-member-db.scss
@@ -46,8 +46,8 @@ body {
         font-family: "ingram-wide-2";
     }
 }
-#menu-side,
-#side-links,
+.menu-side,
+#members-only-sidebar,
 .glm-button,
 .glm-member-db-list .glm-member-list-active-info {
     font-family: "ingram-wide-2";
@@ -212,8 +212,24 @@ body {
         text-decoration: underline;
     }
 }
+#members-only-sidebar-off-canvas {
+    background-color: #434343;
+    border-radius: 5px;
+    list-style: outside none none;
+    padding: 10px;
+    margin: 10px;
+    max-width: 230px;
+    h2 {
+        color: $white;
+    }
+    .menu-side .glm-button {
+        background: transparent;
+        text-decoration: underline;
+        color: white;
+    }
+}
 main.members-only-template {
-    #menu-side h2 a {
+    .menu-side h2 a {
         color: white;
         font-size: 1.875rem;
         font-family: "ingram-wide-2";
@@ -221,13 +237,13 @@ main.members-only-template {
             border-bottom: 1px solid white;
         }
     }
-    #side-links {
+    #members-only-sidebar {
         background-color: #434343;
         border-radius: 5px;
         list-style: outside none none;
         padding: 20px;
     }
-    #menu-side .glm-button {
+    .menu-side .glm-button {
         background: transparent;
         text-decoration: underline;
         color: white;
@@ -235,19 +251,19 @@ main.members-only-template {
     #menu-members-only-menu {
         list-style: outside none none;
     }
-    #side-links h2 {
+    #members-only-sidebar h2 {
         color: $white;
     }
-    #side-links li {
+    #members-only-sidebar li {
         line-height: 1;
         margin-bottom: 10px;
     }
-    #side-links li a {
+    #members-only-sidebar li a {
         color: $white;
         text-decoration: none;
         font-size: 18px;
     }
-    #side-links li a:hover {
+    #members-only-sidebar li a:hover {
         color: $gold;
         border-bottom: 1px solid $gold;
     }
-- 
2.17.1