Sidebar basic structure

home/templates/tags/side_menu.html

@@ -0,0 +1,40 @@
+{% load side_menu wagtailcore_tags static %}
+
+<div class="mobile-sidemenu">
+  <a href= "#">
+    <div class="mobile-sidemenu__program-title">
+      <h1 class="mobile-sidemenu__program-title__title">INTERNATIONAL SECURITY</h1>
+    </div>
+  </a>
+  <button class="mobile-sidemenu__toggle">Menu</button>
+</div>
+
+
+
+<div class="sidemenu" >
+  <a href= "#">
+    <div class="sidemenu__program-title">
+      <h1 class="sidemenu__program-title__title">INTERNATIONAL SECURITY</h1>
+    </div>
+  </a>
+  <div class="sidemenu__link-group">
+    <ul class="menu vertical sidemenu__link-group__content" id="example-menu">
+      <li class="menu-text sidemenu__link-group__title">Initiatives & Projects</li>
+      <li class="sidemenu__link-group__link"><a href="#">Future of War</a></li>
+      <li class="sidemenu__link-group__link"><a href="#">Cybersecurity Initiative</a></li>
+      <li class="sidemenu__link-group__link"><a href="#">World of Drones</a></li>
+
+      <li class="menu-text sidemenu__link-group__title">Events</li>
+      <li class="sidemenu__link-group__link"><a href="#">Current Events</a></li>
+      <li class="sidemenu__link-group__link"><a href="#">Past Events</a></li>
+
+      <li class="menu-text sidemenu__link-group__title">Our Work</li>
+      <li class="sidemenu__link-group__link"><a href="#">Blog Posts</a></li>
+      <li class="sidemenu__link-group__link"><a href="#">Press Releases</a></li>
+      <li class="sidemenu__link-group__link"><a href="#">Articles</a></li>
+      <li class="sidemenu__link-group__link"><a href="#">Books</a></li>
+      <li class="sidemenu__link-group__link"><a href="#">Quoted</a></li>
+      <li class="sidemenu__link-group__link"><a href="#">Podcasts</a></li>
+    </ul>
+  </div>
+</div>

home/templates/tags/top_menu.html

@@ -1,5 +1,4 @@
 {% load top_menu wagtailcore_tags static %}
-{% get_site_root as site_root %}
 
 <header class='header'>
 
@@ -44,9 +43,6 @@ <h1>New America</h1>
                 <li class="mobile-nav__button">
                     {% include 'ui_elements/svg/award.html' %}
                 </li>
-                <li class="mobile-nav__button">
-                    {% include 'ui_elements/svg/heart.html' %}
-                </li>
                 <li class="mobile-nav__button">
                     {% include 'ui_elements/svg/magnifying-glass.html' %}
                 </li>
@@ -163,10 +159,6 @@ <h1 class='header__link-group__heading'>By Location</h1>
                     </div>
                 </li>
 
-                <li class='header__main-nav__item'>
-                    <a class='header__button button'>Donate</a>
-                </li>
-
             </ul>
 
         </nav>

home/templatetags/side_menu.py

@@ -0,0 +1,56 @@
+from datetime import date
+from django import template
+from django.conf import settings
+
+from programs.models import Program, AbstractProgram
+from event.models import AllEventsHomePage
+from home.models import Post
+
+register = template.Library()
+
+
+@register.assignment_tag(takes_context=True)
+def needs_sidebar(context):
+    """ Checks if the page is an AbstractProgram descendant """
+    use_side_bar = False
+    if isinstance(context['self'], AbstractProgram):
+        use_side_bar = True
+    elif isinstance(context['self'], Post):
+        use_side_bar = True
+    elif 'programs.Program' in context['self'].parent_page_types:
+        use_side_bar = True
+    return use_side_bar
+
+# Retrieves the top menu items - the immediate children of the parent page
+@register.inclusion_tag('tags/side_menu.html', takes_context=True)
+def side_menu(context, parent, calling_page=None):
+    # # programs = Program.objects.in_menu().order_by("title").exclude(location=True)
+    # programs = []
+    # location_programs = []
+    # all_programs = Program.objects.in_menu().order_by("title")
+    # for program in all_programs:
+    #     if program.location == True:
+    #         location_programs.append(program)
+    #     else:
+    #         programs.append(program)
+    # return {
+    #     'calling_page': calling_page,
+    #     # 'programs': programs,
+    #     # 'location_programs': location_programs,
+    #     # required by the pageurl tag that we want to use within this template
+    #     'request': context['request'],
+    # }
+    return {}
+
+
+# Retrieves the children of the top menu items for the drop downs
+# @register.inclusion_tag('tags/top_menu_children.html', takes_context=True)
+# def top_menu_children(context, parent):
+#     subprograms = parent.subprogram_set.all()
+
+#     return {
+#         'parent': parent,
+#         'subprograms': subprograms,
+#         # required by the pageurl tag that we want to use within this template
+#         'request': context['request'],
+#     }

mysite/assets/js/modules/index.js

@@ -1,2 +1,3 @@
 import './border-panel/index.js'
 import './header/index.js'
+import './sidemenu/index.js'

mysite/assets/js/modules/sidemenu/index.js

@@ -0,0 +1,41 @@
+import $ from 'jquery'
+
+import getJQueryObjects from './../../utilities/get_jquery_objects.js'
+
+var clicked = false;
+
+function addSidemenuInteractivity() {
+	$(".mobile-sidemenu__toggle").on("click", function() {
+		clicked = !clicked;
+		console.log("clicked!");
+		$(".sidemenu").toggle();
+		$(".content-container").toggle();
+		$("footer").toggle();
+	})
+}
+
+$(addSidemenuInteractivity)
+
+var $window = $( window ); // so you have a "cached" reference 
+var breakpoint = 640;
+
+$window.resize ( function () {
+	console.log("calling resize");
+		if ($window.width() > breakpoint ) {
+			// if (clicked == true ) {
+				console.log("width is greater");
+		    	$(".sidemenu").css("display", "block");
+				$(".content-container").css("display", "block");
+				$("footer").css("display", "block");
+				clicked = false;
+
+	  	} else {
+	  		if (!clicked) {
+	  			$(".sidemenu").css("display", "none");
+	  		}
+	  	} 
+
+		// $(".sidemenu-container").css("height", function() {
+		// 	return $(".content-container").css("height");
+		// })
+});

mysite/assets/scss/base/layout/_containers.scss

@@ -0,0 +1,23 @@
+.sidemenu-container {
+	width:100%;
+	/*min-height:100%;*/
+
+	@include desktop-sidemenu {
+		float:left;
+		width: $max-sidemenu-width;
+	}
+}
+
+.content-container {
+	width: 100%;
+	/*height: 100%;*/
+
+	&.has-sidemenu {
+		/*padding-top:$mobile-header-height;*/
+
+		@include desktop-sidemenu {
+			padding-left: $max-sidemenu-width;
+			padding-top: 0px;
+		}
+	}
+}

mysite/assets/scss/base/layout/_manifest.scss

@@ -1,2 +1,3 @@
 @import 'wrapper';
 @import 'section';
+@import 'containers';

mysite/assets/scss/base/layout/_wrapper.scss

@@ -1,6 +1,7 @@
 .wrapper {
   display: block;
   width: 100%;
+  /*position:absolute;*/
   margin: auto;
   overflow-x: hidden;
   &__clear-header {

mysite/assets/scss/mixins/_breakpoints.scss

@@ -16,3 +16,9 @@
     @content;
   }
 }
+
+@mixin desktop-sidemenu() {
+  @include breakpoint(medium) {
+    @content;
+  }
+}

mysite/assets/scss/modules/_manifest.scss

@@ -11,3 +11,4 @@
 @import 'hero-grid/manifest';
 @import 'page-header/manifest';
 @import 'subscribe/main';
+@import 'sidemenu/manifest';

mysite/assets/scss/modules/header/_main.scss

@@ -8,7 +8,7 @@
   position: fixed;
   @include desktop-header {
     position: fixed;
-    border-bottom: $thick-border-width solid palette-get(na-black-10);
+    border-bottom: $thick-border-width solid palette-get(na-turquoise);
   }
   @include expanded-header {
     padding-top: 8px;

mysite/assets/scss/modules/sidemenu/_main.scss

@@ -0,0 +1,100 @@
+$left-pad: 20px;
+$right-pad: 200px;
+
+.mobile-sidemenu {
+  background-color: palette-get(na-black);
+  width: 100%;
+  height:$mobile-header-height;
+  z-index: 1000;
+  font-color:palette-get(na-white);
+
+  @include desktop-sidemenu {
+    display:none;
+  }
+
+  &__program-title {
+    margin-top: 10px;
+    margin-left: $left-pad;
+    width: $max-sidemenu-width / 2;
+    background-color: palette-get(na-white);
+    padding: 7px 7px 1.5px 7px;
+    float:left;
+    &__title {
+      font-size:13px;
+      font-color:palette-get(na-black);
+      /*padding-left: $left-pad;*/
+    }
+  }
+
+  &__toggle {
+    float:right;
+    margin-right: $right-pad;
+    margin-top: 30px;
+    z-index: 1100;
+    color:white;
+    font-weight:bold;
+  }
+}
+
+
+.sidemenu {
+  top: 0;
+  background-color: palette-get(na-black);
+  width: 100%;
+  height:100%;
+  z-index: 1000;
+  font-color:palette-get(na-white);
+
+  display:none;
+  /*padding-left: 20px;*/
+
+  @include desktop-sidemenu {
+    display:block;
+    padding-top: 20px;
+  }
+
+  &__program-title {
+    margin-left: $left-pad;
+    width: $max-sidemenu-width / 2;
+    background-color: palette-get(na-white);
+    padding: 7px 7px 1.5px 7px;
+    display:none;
+
+    @include desktop-sidemenu {
+      display:block;
+    }
+
+    &__title {
+      font-size:15px;
+      font-color:palette-get(na-black);
+      /*padding-left: $left-pad;*/
+    }
+  }
+
+  &__link-group {
+    color: white;
+
+    &__title {
+      padding-left: $left-pad;
+      font-size:20px;
+    }
+
+    &__link {
+      padding-left: $left-pad;
+
+      &:hover {
+        background-color: palette-get(na-turquoise);
+      }
+
+      & > a {
+        color: grey;
+
+        &:hover {
+          color: white;
+        }
+      }
+    }
+
+  }
+
+}

mysite/assets/scss/modules/sidemenu/_manifest.scss

@@ -0,0 +1 @@
+@import 'main';

mysite/assets/scss/variables/_base.scss

@@ -1,8 +1,9 @@
-$max-site-width: 1150px;
+$max-site-width: 1350px;
 $max-body-width: 650px;
+$max-sidemenu-width: 300px;
 
 $thick-border-width: 4px;
 
-$mobile-header-height: 60px;
+$mobile-header-height: 70px;
 
 $mobile-padding: 10px;

mysite/assets/scss/variables/_foundation.scss

@@ -71,4 +71,7 @@ $blockquote-color: palette-get(na-black);
 $blockquote-border: 4px solid palette-get(na-black);
 
 $primary-color: palette-get(na-black);
-$secondary-color: palette-get(na-turquoise);
+$secondary-color: palette-get(na-turquoise);
+
+$menu-margin: 0px;
+$menu-item-padding: 14px 0px;

mysite/assets/scss/vendor/_foundation.scss

@@ -11,7 +11,7 @@
 @include foundation-typography;
 @include foundation-button;
 @include foundation-forms;
-// @include foundation-visibility-classes;
+@include foundation-visibility-classes;
 @include foundation-float-classes;
 // @include foundation-accordion;
 // @include foundation-accordion-menu;
@@ -26,21 +26,21 @@
 // @include foundation-flex-video;
 // @include foundation-label;
 // @include foundation-media-object;
-// @include foundation-menu;
+@include foundation-menu;
 // @include foundation-off-canvas;
 // @include foundation-orbit;
 // @include foundation-pagination;
 // @include foundation-progress-bar;
 // @include foundation-slider;
 // @include foundation-sticky;
-// @include foundation-reveal;
+@include foundation-reveal;
 // @include foundation-switch;
 // @include foundation-table;
 // @include foundation-tabs;
 // @include foundation-thumbnail;
 // @include foundation-title-bar;
 // @include foundation-tooltip;
-// @include foundation-top-bar;
+@include foundation-top-bar;
 // Overrides. Use very sparingly - modify Foundation variables instead.
 .button {
   font-weight: bold;