Merge pull request #411 from AdamChlan/customizer-mobile-nav

Add Customizer Option for Topbar or Offcanvas Mobile Menu
olefredrik · Aug 15, 2015 · 3c9300e · 3c9300e
2 parents b96ba93 + 4373d01
commit 3c9300e
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 5 deletions.
diff --git a/footer.php b/footer.php
@@ -17,11 +17,18 @@
 	<?php dynamic_sidebar( 'footer-widgets' ); ?>
 	<?php do_action( 'foundationpress_after_footer' ); ?>
 </footer>
+
+<?php if ( get_theme_mod( 'wpt_mobile_menu' ) == 'offcanvas' ) : ?>
 <a class="exit-off-canvas"></a>
+<?php endif; ?>
 
 	<?php do_action( 'foundationpress_layout_end' ); ?>
+
+<?php if ( get_theme_mod( 'wpt_mobile_menu' ) == 'offcanvas' ) : ?>	
 	</div>
 </div>
+<?php endif; ?>
+
 <?php wp_footer(); ?>
 <?php do_action( 'foundationpress_before_closing_body' ); ?>
 </body>

diff --git a/functions.php b/functions.php
@@ -45,4 +45,7 @@
 /** Add Header image */
 require_once( 'library/custom-header.php' );
 
+/** Add Nav Options to Customer */
+require_once( 'library/custom-nav.php' );
+
 ?>
diff --git a/header.php b/header.php
@@ -27,16 +27,19 @@
 	<body <?php body_class(); ?>>
 	<?php do_action( 'foundationpress_after_body' ); ?>
 
+	<?php if ( get_theme_mod( 'wpt_mobile_menu' ) == 'offcanvas' ) : ?>
 	<div class="off-canvas-wrap" data-offcanvas>
 	<div class="inner-wrap">
+	<?php endif; ?>
 
 	<?php do_action( 'foundationpress_layout_start' ); ?>
 
 
-	<?php $GLOBALS['offcanvasposition'] = 'left';  // Can be 'left' or 'right'?>
+	<?php if ( get_theme_mod( 'wpt_mobile_menu' ) == 'offcanvas' ) : ?>
+	<?php $GLOBALS['offcanvasposition'] = 'right';  // Can be 'left' or 'right'?>
 	<nav class="tab-bar">
-		<section class="<?php $GLOBALS['offcanvasposition'];?>-small">
-			<a class="<?php $GLOBALS['offcanvasposition'];?>-off-canvas-toggle menu-icon" href="#"><span></span></a>
+		<section class="<?php echo $GLOBALS['offcanvasposition'];?>-small">
+			<a class="<?php echo $GLOBALS['offcanvasposition'];?>-off-canvas-toggle menu-icon" href="#"><span></span></a>
 		</section>
 		<section class="middle tab-bar-section">
 
@@ -48,6 +51,7 @@
 	</nav>
 
 	<?php get_template_part( 'parts/off-canvas-menu' ); ?>
+	<?php endif; ?>
 
 	<?php get_template_part( 'parts/top-bar' ); ?>
 

diff --git a/library/custom-nav.php b/library/custom-nav.php
@@ -0,0 +1,66 @@
+<?php
+/**
+ * Allow users to select Topbar or Offcanvas menu. Adds body class of offcanvas or topbar based on which they choose.
+ *
+ * @package WordPress
+ * @subpackage FoundationPress
+ * @since FoundationPress 1.0.0
+ */
+
+if ( ! function_exists( 'wpt_register_theme_customizer' ) ) :
+function wpt_register_theme_customizer( $wp_customize ) {
+	// Create custom panels
+	$wp_customize->add_panel( 'mobile_menu_settings', array(
+	  'priority' => 1000,
+	  'theme_supports' => '',
+	  'title' => __( 'Mobile Menu Settings', 'foundationpress' ),
+	  'description' => __( 'Controls the mobile menu', 'foundationpress' ),
+	) );
+
+	// Create custom nav field
+	$wp_customize->add_section( 'mobile_menu_layout' , array(
+		'title'	=> __('Offcanvas or Topbar','foundationpress'),
+		'panel' => 'mobile_menu_settings',
+		'priority' => 1000,
+	));
+
+	// Set default
+	$wp_customize->add_setting(
+		'wpt_mobile_menu',
+		array(
+			'default'	=> __( 'offcanvas', 'foundationpress' ),
+		)
+	);
+
+	// Add radio button options
+	$wp_customize->add_control(
+		new WP_Customize_Control(
+			$wp_customize,
+			'mobile_menu_layout',
+			array(
+				'type'		=> 'radio',
+				'label'		=> __('Offcanvas or Topbar', 'foundationpress'),
+				'section' 	=> 'mobile_menu_layout',
+				'settings' 	=> 'wpt_mobile_menu',
+		        'choices' => array(
+		            'offcanvas' => 'Offcanvas',
+		            'topbar' => 'Topbar',
+		        ),
+			)
+		)
+	);
+}
+add_action( 'customize_register', 'wpt_register_theme_customizer' );
+
+// Add class to body to help w/ CSS
+add_filter( 'body_class', 'mobile_nav_class' );
+function mobile_nav_class( $classes ) {
+	if ( get_theme_mod( 'wpt_mobile_menu' ) == 'offcanvas' ) :
+		$classes[] = 'offcanvas';
+	elseif ( get_theme_mod( 'wpt_mobile_menu' ) == 'topbar' ) :
+		$classes[] = 'topbar';
+	endif;
+	return $classes;
+}
+endif;
+?>
diff --git a/parts/top-bar.php b/parts/top-bar.php
@@ -8,12 +8,13 @@
  */
 
 ?>
-<div class="top-bar-container contain-to-grid show-for-medium-up">
+<div class="top-bar-container contain-to-grid">
     <nav class="top-bar" data-topbar role="navigation">
         <ul class="title-area">
             <li class="name">
                 <h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1>
             </li>
+            <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
         </ul>
         <section class="top-bar-section">
             <?php foundationpress_top_bar_l(); ?>

diff --git a/scss/site/_topbar.scss b/scss/site/_topbar.scss
@@ -24,5 +24,5 @@
 
 // Hide the topbar when the screen size is smaller than the topbar breakpoint
 @media only screen and (max-width: $topbar-breakpoint) {
-  .top-bar { display: none; }
+  body.offcanvas .top-bar { display: none; }
 }