I used a <details><summary> for this:

Lines 16 to 36 in 0d7ac76

    
           <header><nav>{% block nav %} 
        
               <details class="nav-menu"> 
        
                   <summary><svg 
        
                       fill="currentColor" stroke="currentColor" xmlns="http://www.w3.org/2000/svg" 
        
                       viewBox="0 0 16 16" width="16" height="16"> 
        
                           <path fill-rule="evenodd" d="M1 2.75A.75.75 0 011.75 2h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 2.75zm0 5A.75.75 0 011.75 7h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 7.75zM1.75 12a.75.75 0 100 1.5h12.5a.75.75 0 100-1.5H1.75z"></path> 
        
                   </svg></summary> 
        
                   <div class="nav-menu-inner"> 
        
                       <ul> 
        
                           <li><a href="/">Home</a></li> 
        
                           <li><a href="/-/plugins">Installed plugins</a></li> 
        
                           <li><a href="/-/versions">Software versions</a></li> 
        
                           <li><a href="/-/metadata">Metadata</a></li> 
        
                           {% if show_logout %} 
        
                           <form action="{{ urls.logout() }}" method="post"> 
        
                               <input type="hidden" name="csrftoken" value="{{ csrftoken() }}"> 
        
                               <button class="button-as-link">Log out</button> 
        
                           </form>{% endif %} 
        
                       </ul> 
        
                   </div> 
        
               </details>

I added a bit of JavaScript so that clicking outside the menu would close it:

datasette/datasette/templates/base.html

Lines 59 to 74 in 0d7ac76

    
           <script> 
        
           var menuDetails = document.querySelector('.nav-menu'); 
        
           document.body.addEventListener('click', (ev) => { 
        
               /* was this click outside the menu? */ 
        
               if (menuDetails.getAttribute('open') !== "") { 
        
                   return; 
        
               } 
        
               var target = ev.target; 
        
               while (target && target != menuDetails) { 
        
                   target = target.parentNode; 
        
               } 
        
               if (!target) { 
        
                   menuDetails.removeAttribute('open'); 
        
               } 
        
           }); 
        
           </script>

	<header><nav>{% block nav %}
	<details class="nav-menu">
	<summary><svg
	fill="currentColor" stroke="currentColor" xmlns="http://www.w3.org/2000/svg"
	viewBox="0 0 16 16" width="16" height="16">
	<path fill-rule="evenodd" d="M1 2.75A.75.75 0 011.75 2h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 2.75zm0 5A.75.75 0 011.75 7h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 7.75zM1.75 12a.75.75 0 100 1.5h12.5a.75.75 0 100-1.5H1.75z"></path>
	</svg></summary>
	<div class="nav-menu-inner">
	<ul>
	<li><a href="/">Home</a></li>
	<li><a href="/-/plugins">Installed plugins</a></li>
	<li><a href="/-/versions">Software versions</a></li>
	<li><a href="/-/metadata">Metadata</a></li>
	{% if show_logout %}
	<form action="{{ urls.logout() }}" method="post">
	<input type="hidden" name="csrftoken" value="{{ csrftoken() }}">
	<button class="button-as-link">Log out</button>
	</form>{% endif %}
	</ul>
	</div>
	</details>

	<script>
	var menuDetails = document.querySelector('.nav-menu');
	document.body.addEventListener('click', (ev) => {
	/* was this click outside the menu? */
	if (menuDetails.getAttribute('open') !== "") {
	return;
	}
	var target = ev.target;
	while (target && target != menuDetails) {
	target = target.parentNode;
	}
	if (!target) {
	menuDetails.removeAttribute('open');
	}
	});
	</script>

Uh oh!

Navigation menu plus plugin hook #1064

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions