CMag 14 - Add Drawer menu feature

assets/js/navigation.js

@@ -109,3 +109,46 @@
 		);
 	}
 )();
+
+/**
+ * File navigation.js.
+ *
+ * Handles toggling the navigation menu for small screens and enables TAB key
+ * navigation support for dropdown menus.
+ */
+( function() {
+	const cmNavigation = function() {
+		const self         = this;
+
+		// Secondary navigation.
+		this.secondaryMenu        = document.getElementById( 'cm-drawer-box' );
+		this.openSecondaryMenu    = document.querySelector( '.cm-drawer-toggle' );
+		this.closeSecondaryMenu   = document.querySelector( '.close-secondary-menu' );
+		this.toggleSecondaryBtn   = document.getElementById( 'cm-secondary-menu' );
+		this.secondarySubMenu     = this.toggleSecondaryBtn ? this.toggleSecondaryBtn.querySelectorAll( '.sub-menu' ) : null;
+
+		this.toggleSecondaryNavigation = function( e ) {
+			e.preventDefault();
+
+			// Toggle the .toggled class each time the button is clicked.
+			self.secondaryMenu.classList.toggle( 'cm-open' );
+
+			if ( 'true' === self.closeSecondaryMenu.getAttribute( 'aria-expanded' ) ) { // If toggle off, slide menu.
+				self.closeSecondaryMenu.setAttribute( 'aria-expanded', 'false' );
+
+			} else { // If toggle on, slide menu.
+				self.closeSecondaryMenu.setAttribute( 'aria-expanded', 'true' );
+			}
+		};
+
+		/**
+		 * Secondary navigation toggle.
+		 */
+		if ( self.openSecondaryMenu ) {
+			self.openSecondaryMenu.addEventListener( 'click', this.toggleSecondaryNavigation );
+			self.closeSecondaryMenu.addEventListener( 'click', this.toggleSecondaryNavigation );
+		}
+	};
+
+	window.cmNavigation = new cmNavigation();
+}() );

assets/sass/abstracts/_abstracts.scss

@@ -6,3 +6,4 @@
 
 @import "variables/colors";
 @import "variables/typography";
+@import "variables/structure";

assets/sass/abstracts/mixins/_structure.scss

@@ -11,3 +11,7 @@ $border-radius: (
 
 	@return map-get($border-radius, $size);
 }
+
+@function em_value($px, $fontSize) {
+	@return $px / ($fontSize * 10) + em;
+}

assets/sass/abstracts/variables/_colors.scss

@@ -10,6 +10,11 @@ $color__gray-200:            #e4e4e7;
 $color__gray-100:            #f4f4f5;
 $color__gray-50:             #fafafa;
 
+$color__text-main: #111111;
+$color__light-blue2: #F2F3FF;
+$color__link: $color__text-main;
+$color__light-gray2: #E5e5e5;
+
 // White.
 $color__white:               #fff;
 

assets/sass/abstracts/variables/_structure.scss

@@ -0,0 +1,57 @@
+$size__site-main: 100%;
+$size__site-sidebar: 25%;
+
+$size_container-width: 1170px;
+$size_container-width--centered: 768px;
+
+/* Margin/Padding */
+$spacing_2:  em_value(2, 1.4);
+$spacing_4:  em_value(4, 1.4);
+$spacing_6:  em_value(6, 1.4);
+$spacing_8:  em_value(8, 1.4);
+$spacing_9:  em_value(9, 1.4);
+$spacing_10: em_value(10, 1.4);
+$spacing_12: em_value(12, 1.4);
+$spacing_14: em_value(14, 1.4);
+$spacing_15: em_value(15, 1.4);
+$spacing_16: em_value(16, 1.4);
+$spacing_18: em_value(18, 1.4);
+$spacing_20: em_value(20, 1.4);
+$spacing_24: em_value(24, 1.4);
+$spacing_25: em_value(25, 1.4);
+$spacing_28: em_value(28, 1.4);
+$spacing_30: em_value(30, 1.4);
+$spacing_32: em_value(32, 1.4);
+$spacing_36: em_value(36, 1.4);
+$spacing_40: em_value(40, 1.4);
+$spacing_45: em_value(45, 1.4);
+$spacing_50: em_value(50, 1.4);
+$spacing_60: em_value(60, 1.4);
+$spacing_54: em_value(54, 1.4);
+$spacing_70: em_value(70, 1.4);
+$spacing_80: em_value(80, 1.4);
+$spacing_90: em_value(90, 1.4);
+$spacing_200: em_value(200, 1.4);
+
+$spacing_8_1-4: em_value(8, 1.4);
+$spacing_16_1-4: em_value(16, 1.4);
+$spacing_64_2: em_value(64, 2);
+
+$spacing_2px:  2px;
+$spacing_4px:  4px;
+$spacing_8px:  8px;
+$spacing_9px:  9px;
+$spacing_10px: 10px;
+$spacing_11px: 11px;
+$spacing_12px: 12px;
+$spacing_15px: 15px;
+$spacing_16px: 16px;
+$spacing_22px: 22px;
+$spacing_20px: 20px;
+$spacing_30px: 30px;
+$spacing_40px: 40px;
+
+$border_radius_1: 2px;
+$border_radius_2: 4px;
+
+$transition: all 0.3s;