@gravityforms/gulp-tasks/src/templates/doc/menu.js

Configurable Gulp tasks for use in Gravity Forms projects.

function mergeObjectsBySection( objects ) {
	const mergedObject = {};
	objects.forEach( ( object ) => {
		if ( ! mergedObject[ object.section ] ) {
			mergedObject[ object.section ] = {};
		}
		for ( const key in object ) {
			if ( key !== 'section' ) {
				if ( ! mergedObject[ object.section ][ key ] ) {
					mergedObject[ object.section ][ key ] = [];
				}
				mergedObject[ object.section ][ key ].push( object[ key ] );
			}
		}
	} );
	return mergedObject;
}

module.exports = function( {
	menuItems = [],
	menuLogo = '<a href="./index.html"><span class="gform-gravity-logo"></span></a>',
} ) {
	return ( `
<div class="sidebar-container">
	<div class="sidebar" id="sidebar">
		${ menuLogo }
		<div class="sidebar-items-container">
		${ Object.entries( mergeObjectsBySection( menuItems ) ).map( ( [ section = '', data = {} ] ) => ( `
		
			<div class="sidebar-section-title with-arrow" data-isopen="false">
				<div>${ section }</div>
				<svg><use xlink:href="#down-icon"></use></svg>
			</div>
			<div class="sidebar-section-children-container">
				${ data.label.map( ( label, index ) => ( `
				<div class="sidebar-section-children">
					<a href="./${ data.fileName[ index ] }">${ label }</a>
				</div>
				` ) ).join( '' ) }
			</div>
		` ) ).join( '' ) }
		</div>
	</div>
</div>
	` );
};