You can not select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			
		
			
				
					
					
						
							41 lines
						
					
					
						
							1.4 KiB
						
					
					
				
			
		
		
	
	
							41 lines
						
					
					
						
							1.4 KiB
						
					
					
				| <ul id="navigation" class="py-4">
 | |
|     <li><a href="{{ site.baseurl }}/home">Home</a></li>
 | |
|     {% for section in site.sections %}
 | |
|     {% assign attr = section[0] %}
 | |
|     {% assign label = section[1] %}
 | |
|     <li class="mt-3"><h5 class="mt-0 mb-1">{{ label }}</h5>
 | |
|         <ul>
 | |
|             {% for page in site.categories[attr] %}
 | |
|             <li class="pt-2 pb-2" data-order="{{ page.order }}">
 | |
|                 <a href="{{ site.baseurl }}{{ page.url }}">{{ page.title }}</a>
 | |
|             </li>
 | |
|             {% endfor %}
 | |
|         </ul>
 | |
|     </li>
 | |
|     {% endfor %}
 | |
| </ul>
 | |
| <script>
 | |
|     /* find current item and make it active */
 | |
|     const current = document.location.href;
 | |
|     const links = document.querySelectorAll('#navigation a');
 | |
|     links.forEach((link) => {
 | |
|         if (current && link && current.endsWith(link.getAttribute('href'))) {
 | |
|             link.parentElement.classList.add('active')
 | |
|         }
 | |
|     });
 | |
| 
 | |
|     /* reorder elements */
 | |
|     const sections = document.querySelectorAll('#navigation ul');
 | |
|     sections.forEach((section) => {
 | |
|         const entries = section.querySelectorAll('li');
 | |
|         const ordered = [];
 | |
|         entries.forEach((entry) => {
 | |
|             const order = entry.getAttribute('data-order');
 | |
|             ordered.push([entry, order]);
 | |
|         });
 | |
|         ordered.sort((a, b) => a[1] - b[1]);
 | |
|         ordered.forEach((entry) => {
 | |
|             section.appendChild(entry[0]);
 | |
|         })
 | |
|     });
 | |
| </script>
 | |
| 
 |