spa-nav.php

<?php
/**
 * @package SPA_Sections
 * @version 1.0
 */
/*
Plugin Name: SPA Sections
Description: Adding navigations to SPA sections
Author: Chris Panayotoff
Version: 1.0
Author URI: https://onload.agency

See https://kinsta.com/blog/wordpress-custom-menu/
See https://www.johnmorrisonline.com/how-to-add-a-fully-functional-custom-meta-box-to-wordpress-navigation-menus/

*/

/**
 * Add menu meta box
 *
 * @param object $object The meta box object
 * @link https://developer.wordpress.org/reference/functions/add_meta_box/
 */
function custom_add_menu_meta_box( $object ) {

	add_meta_box( 'custom-menu-metabox', __( 'Homepage Sections' ), 'custom_menu_meta_box', 'nav-menus', 'side', 'high' );

	return $object;
}

add_filter( 'nav_menu_meta_box_object', 'custom_add_menu_meta_box', 10, 2);

if(!function_exists('pre')){
	function pre($var){
		$styles = [
			'display:block',
			'padding:1em',
			'margin:1em',
			'border-radius:3px',
			'font-size:14px',
			'font-family: monospace',
			'white-space: pre-wrap',
			'word-wrap: break-word',
			'overflow-x:auto',
			'color: #004267',
			'border:1px solid #00426733',
			'box-shadow: 0 1px 1px rgba(0,0,0,0.08)',
			'line-height:1.5em',
			'text-align:left',
			'white-space:pre',
			'overflow-x:auto',
			'background-image: linear-gradient(180deg, #eaeaea 50%, #fff 50%)', 
			'background-size: 100% 3em',  // Double the line height 
			'background-position: 0 1em;' // Offset by top padding
		];
		echo sprintf('<pre style="%s">%s</pre>', 
			implode(';', $styles),
			var_export($var, true)
		);
	}
}

/**
 * Displays a metabox for authors menu item.
 *
 * @global int|string $nav_menu_selected_id (id, name or slug) of the currently-selected menu
 *
 * @link https://core.trac.wordpress.org/browser/tags/4.5/src/wp-admin/includes/nav-menu.php
 * @link https://core.trac.wordpress.org/browser/tags/4.5/src/wp-admin/includes/class-walker-nav-menu-edit.php
 * @link https://core.trac.wordpress.org/browser/tags/4.5/src/wp-admin/includes/class-walker-nav-menu-checklist.php
 */
function custom_menu_meta_box(){
	
	global $_nav_menu_placeholder, $nav_menu_selected_id;
	$_nav_menu_placeholder = 0 > $_nav_menu_placeholder ? $_nav_menu_placeholder - 1 : -1;
	?>

<div id="sections" class="posttypediv">
	
	<div id="tabs-panel-sections-all" class="tabs-panel tabs-panel-view-all tabs-panel-active">
		<ul id="sections-checklist-all" class="categorychecklist form-no-clear">
			<li>
				<label class="menu-item-title">
					<input type="checkbox" class="menu-item-checkbox" name="menu-item[<?php echo $_nav_menu_placeholder; ?>][menu-item-object-id]" value="-1"> <?php _e('Home Section'); ?>
				</label>
				<input type="hidden" class="menu-item-type" name="menu-item[<?php echo $_nav_menu_placeholder; ?>][menu-item-type]" value="custom">
				<input type="hidden" class="menu-item-title" name="menu-item[<?php echo $_nav_menu_placeholder; ?>][menu-item-title]" value="<?php _e('Home Section'); ?>">
				<input type="hidden" class="menu-item-url" name="menu-item[<?php echo $_nav_menu_placeholder; ?>][menu-item-url]" value="<?php bloginfo('wpurl'); ?>#section-home">
				<input type="hidden" class="menu-item-url" name="menu-item[<?php echo $_nav_menu_placeholder; ?>][menu-item-classes]" value="link-home-section">
			</li>
			<?php $_nav_menu_placeholder--; ?>
			<li>
				<label class="menu-item-title">
					<input type="checkbox" class="menu-item-checkbox" name="menu-item[<?php echo $_nav_menu_placeholder ?>][menu-item-object-id]" value="-1"> <?php _e('About Section'); ?>
				</label>
				<input type="hidden" class="menu-item-type" name="menu-item[<?php echo $_nav_menu_placeholder; ?>][menu-item-type]" value="custom">
				<input type="hidden" class="menu-item-title" name="menu-item[<?php echo $_nav_menu_placeholder; ?>][menu-item-title]" value="<?php _e('About Section'); ?>">
				<input type="hidden" class="menu-item-url" name="menu-item[<?php echo $_nav_menu_placeholder; ?>][menu-item-url]" value="<?php bloginfo('wpurl'); ?>#section-about">
				<input type="hidden" class="menu-item-url" name="menu-item[<?php echo $_nav_menu_placeholder; ?>][menu-item-classes]" value="link-home-section">
			</li>

		</ul>
	</div><!-- /.tabs-panel -->

	<p class="button-controls wp-clearfix">
		<span class="add-to-menu">
			<input type="submit" <?php wp_nav_menu_disabled_check( $nav_menu_selected_id ); ?> class="button-secondary
			submit-add-to-menu right" value="
			<?php esc_attr_e('Add to Menu'); ?>" name="add-sections-menu-item" id="submit-sections" />
			<span class="spinner"></span>
		</span>
	</p>

</div><!-- /.categorydiv -->
<?php
}