[BUG] - Spacing of menu items in JupyterHub 5

[krassowski]

Describe the bug

In JupyterHub 5.0b2 the navigation bar menu items have too little spacing:

Expected behavior

Items have spacing

How to Reproduce the problem?

Run latest nebari pre-release with jhub-apps disabled

Command output

No response

Versions and dependencies used.

No response

Anything else?

Upstream change happened in jupyterhub/jupyterhub@2fe0608, briefly:

        {% if user %}
-        <ul class="nav navbar-nav">
+        <ul class="nav navbar-nav me-auto mb-2 mb-lg-0">
          {% block nav_bar_left_items %}
-            <li><a href="{{base_url}}home">Home</a></li>
+            <li class="nav-item"><a class="nav-link" href="{{base_url}}home">Home</a></li>
-            <li><a href="{{base_url}}token">Token</a></li>
+            <li class="nav-item"><a class="nav-link" href="{{base_url}}token">Token</a></li>
            {% if 'admin-ui' in parsed_scopes %}
-            <li><a href="{{base_url}}admin">Admin</a></li>
+            <li class="nav-item"><a class="nav-link" href="{{base_url}}admin">Admin</a></li>
            {% endif %}
            {% if services %}
-            <li class="dropdown">
+            <li class="nav-item dropdown">

Originally noticed in nebari-dev/nebari#2468 (comment)

[krassowski]

Why is it an issue in this nebari-jupyterhub-theme rather than upstream? Because it overrides nav_bar_left_items block, but using the old Bootstrap 4 approach (i.e. it was not yet upgraded to Bootstrap 5):

nebari-jupyterhub-theme/nebari_jupyterhub_theme/templates/page.html

Lines 6 to 37 in 933fd38

	{% block nav_bar_left_items %}
	<!-- Default nav bar items -->
	<li><a href="{{base_url}}home {% if cdsdashboards_restricted %}-cds{% endif %}">Home</a></li>
	<li><a href="{{base_url}}token">Token</a></li>
	<!-- Access to admin dashboard -->
	{% if user.admin %}
	<li><a href="{{base_url}}admin">Admin</a></li>
	{% endif %}
	{% if services %}
	<li class="dropdown">
	<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services<span class="caret"></span></a>
	<ul class="dropdown-menu">
	{% for service in services %}
	<li><a class="dropdown-item" href="{{service.prefix}}">{{service.name}}</a></li>
	{% endfor %}
	</ul>
	</li>
	{% endif %}
	<!-- Custom integrations-->
	<li><a href="/auth/admin/nebari/console/">User Management</a></li>
	<li><a href="/argo">Argo Workflows</a></li>
	{% if cdsdashboards_enabled %}
	<li><a href="{{ base_url }}dashboards">Dashboards</a></li>
	{% endif %}
	<li><a href="/conda-store">Environment Management</a></li>
	<li><a href="/monitoring">Monitoring</a></li>
	{% endblock nav_bar_left_items %}