diff --git a/newspack-theme/header.php b/newspack-theme/header.php
index 1f1268b71..44d05bc6a 100755
--- a/newspack-theme/header.php
+++ b/newspack-theme/header.php
@@ -29,6 +29,7 @@
$show_slideout_sidebar = get_theme_mod( 'header_show_slideout', false );
$slideout_sidebar_side = get_theme_mod( 'slideout_sidebar_side', 'left' );
$header_sub_simplified = get_theme_mod( 'header_sub_simplified', false );
+$subpage_toggle_side = get_theme_mod( 'subpage_toggle_side', 'left' );
$header_sticky = get_theme_mod( 'header_sticky', false );
// Even if 'Show Slideout Sidebar' is checked, don't show it if no widgets are assigned.
@@ -60,7 +61,7 @@
diff --git a/newspack-theme/inc/customizer.php b/newspack-theme/inc/customizer.php
index bb2453476..6aacfd4fe 100755
--- a/newspack-theme/inc/customizer.php
+++ b/newspack-theme/inc/customizer.php
@@ -245,6 +245,27 @@ function newspack_customize_register( $wp_customize ) {
)
);
+ // Subpage header - menu toggle position.
+ $wp_customize->add_setting(
+ 'subpage_toggle_side',
+ array(
+ 'default' => 'left',
+ 'sanitize_callback' => 'newspack_sanitize_slideout_sidebar_side',
+ )
+ );
+ $wp_customize->add_control(
+ 'subpage_toggle_side',
+ array(
+ 'type' => 'radio',
+ 'label' => esc_html__( 'Menu toggle position', 'newspack-theme' ),
+ 'choices' => array(
+ 'left' => _x( 'Left', 'menu toggle position', 'newspack-theme' ),
+ 'right' => _x( 'Right', 'menu toggle position', 'newspack-theme' ),
+ ),
+ 'section' => 'header_section_subpages',
+ )
+ );
+
/**
* Header - Mobile Donate CTA
*/
diff --git a/newspack-theme/js/src/customize-controls.js b/newspack-theme/js/src/customize-controls.js
index df9eb0608..fba06b083 100755
--- a/newspack-theme/js/src/customize-controls.js
+++ b/newspack-theme/js/src/customize-controls.js
@@ -337,7 +337,7 @@
} );
} );
- // Only show Alternative Logo option if 'simple subpage header' is picked
+ // Only show Alternative Logo and toggle side options if 'simple subpage header' is picked
wp.customize( 'header_sub_simplified', function ( setting ) {
wp.customize.control( 'newspack_alternative_logo', function ( control ) {
const visibility = function () {
@@ -350,6 +350,17 @@
visibility();
setting.bind( visibility );
} );
+ wp.customize.control( 'subpage_toggle_side', function ( control ) {
+ const visibility = function () {
+ if ( true === setting.get() ) {
+ control.container.slideDown( 180 );
+ } else {
+ control.container.slideUp( 180 );
+ }
+ };
+ visibility();
+ setting.bind( visibility );
+ } );
} );
// Only show Author Bio truncate options when enabled.
diff --git a/newspack-theme/sass/navigation/_menu-mobile-navigation.scss b/newspack-theme/sass/navigation/_menu-mobile-navigation.scss
index 5462427d3..aaddac35b 100644
--- a/newspack-theme/sass/navigation/_menu-mobile-navigation.scss
+++ b/newspack-theme/sass/navigation/_menu-mobile-navigation.scss
@@ -100,6 +100,15 @@
margin: 0 #{1.25 * structure.$size__spacing-unit} 0 0;
}
+.subpage-toggle-contain.dir-right {
+ margin: 0 0 0 #{0.75 * structure.$size__spacing-unit};
+}
+
+.subpage-toggle-contain.subpage-toggle-spacer {
+ visibility: hidden;
+ pointer-events: none;
+}
+
.site-header .desktop-menu-toggle.dir-right {
margin: 0 0 0 #{1.25 * structure.$size__spacing-unit};
}
@@ -163,33 +172,6 @@
.site-branding {
margin-right: 0;
}
-
- .mb-cta {
- margin-left: auto;
- }
-
- .middle-header-contain .header-search-contain {
- margin-left: 1.25rem;
- }
- }
-
- &.h-cl {
- @include utilities.media( tablet ) {
- .wrapper {
- position: relative;
- }
- .mb-cta {
- right: 2.25rem;
- position: absolute;
- z-index: 1;
- }
-
- &:not(.h-stk).single-featured-image-beside {
- .mb-cta {
- right: 2.25rem;
- }
- }
- }
}
}
@@ -418,13 +400,15 @@
// Fallback - open from the right
#mobile-sidebar-fallback,
-#desktop-sidebar-fallback.dir-right {
+#desktop-sidebar-fallback.dir-right,
+#subpage-sidebar-fallback.dir-right {
left: auto;
right: -100%;
transition: right 0.2s;
}
.desktop-menu-opened #desktop-sidebar-fallback.dir-right,
+.subpage-menu-opened #subpage-sidebar-fallback.dir-right,
.mobile-menu-opened #mobile-sidebar-fallback {
right: 0;
}
diff --git a/newspack-theme/sass/site/header/_site-header.scss b/newspack-theme/sass/site/header/_site-header.scss
index f877c1e3d..54c3b9ddd 100755
--- a/newspack-theme/sass/site/header/_site-header.scss
+++ b/newspack-theme/sass/site/header/_site-header.scss
@@ -460,8 +460,24 @@
}
}
- .header-search-contain {
+ .subpage-right-wrapper {
+ align-items: center;
+ display: flex;
+ gap: #{0.75 * structure.$size__spacing-unit};
margin-left: auto;
+
+ .mb-cta,
+ .mobile-menu-toggle {
+ margin-left: 0;
+ }
+
+ .header-search-contain {
+ margin-left: 0;
+ }
+
+ > * {
+ flex: none;
+ }
}
}
@@ -474,6 +490,17 @@
text-align: right;
}
}
+
+ // Fix clumping when beside featured image constrains the wrapper to 50%.
+ &.single-featured-image-beside {
+ .site-header .middle-header-contain .wrapper {
+ justify-content: space-between;
+
+ > div {
+ flex: none;
+ }
+ }
+ }
}
&.h-ll {
diff --git a/newspack-theme/template-parts/header/subpage-sidebar.php b/newspack-theme/template-parts/header/subpage-sidebar.php
index 27ffd52dc..481c832a6 100644
--- a/newspack-theme/template-parts/header/subpage-sidebar.php
+++ b/newspack-theme/template-parts/header/subpage-sidebar.php
@@ -5,14 +5,16 @@
* @package Newspack
*/
+$subpage_toggle_side = get_theme_mod( 'subpage_toggle_side', 'left' );
+
if ( newspack_is_amp() ) : ?>
-