Make the control panel a real app shell with a fixed sidebar

The navbar and the menu stay put; only the content scrolls.

That is a property of the layout, not a `sticky` class: the body is a flex column
pinned to the viewport with overflow hidden, and <main> is the single scrolling
region. The sidebar is a SIBLING of <main>, not inside it, so it sits outside that
region and cannot drift by construction. A sticky sidebar in a scrollable body
still slides on a long page, which is the failure this avoids.

The tabs become a daisyUI menu with an active indicator (`menu-active`) and the
hover/focus states `.menu` already provides. Sidebar below `lg` would be a menu
nobody can reach, so the same items render as a horizontal menu there -- from ONE
partial, because two copies of a link list is how a new section ends up reachable on
a desktop and invisible on a phone.

Auth pages leave the menu block empty and <main> simply takes the full width.

Verified in a browser: content scrolled 800px, sidebar and navbar moved 0px, and
the body is not scrollable at all. Below `lg` the sidebar hides and all five links
are still there.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

controlpanel/templates/controlpanel/_nav_items.html

@@ -0,0 +1,37 @@
+{% load lucide %}
+
+{% comment %}
+    The panel's navigation, in one place: the sidebar renders it on a wide screen and the
+    collapsed menu renders it on a narrow one. Two copies of a link list is how a new section
+    ends up reachable on a desktop and invisible on a phone.
+
+    `menu-active` is daisyUI 5's active state; hover and focus come with `.menu` itself.
+{% endcomment %}
+<li>
+    <a class="{% if nav == 'dashboard' %}menu-active{% endif %}" href="{% url 'controlpanel:dashboard' %}">
+        {% lucide "layout-dashboard" size=16 %} Dashboard
+    </a>
+</li>
+<li>
+    <a class="{% if nav == 'clubs' %}menu-active{% endif %}" href="{% url 'controlpanel:club_list' %}">
+        {% lucide "building-2" size=16 %} Clubs
+    </a>
+</li>
+<li>
+    <a class="{% if nav == 'billing' %}menu-active{% endif %}" href="{% url 'controlpanel:billing' %}">
+        {% lucide "receipt-euro" size=16 %} Billing
+    </a>
+</li>
+<li>
+    <a class="{% if nav == 'features' %}menu-active{% endif %}" href="{% url 'controlpanel:features' %}">
+        {% lucide "toggle-right" size=16 %} Features
+    </a>
+</li>
+{% if user.is_superuser %}
+    {# Superusers only, exactly as the view is gated: a link staff cannot follow is a lie. #}
+    <li>
+        <a class="{% if nav == 'admins' %}menu-active{% endif %}" href="{% url 'controlpanel:admins' %}">
+            {% lucide "user-cog" size=16 %} Admins
+        </a>
+    </li>
+{% endif %}

controlpanel/templates/controlpanel/base.html

@@ -5,15 +5,28 @@
     {% block panel_title %}Control panel{% endblock panel_title %} · RosterChief
 {% endblock title %}
 
+{% block menu %}
+    {% comment %}
+        Outside <main>, so it never scrolls with the content. Its own overflow-y-auto is for
+        the day the menu itself grows taller than the screen.
+    {% endcomment %}
+    <aside class="hidden w-64 shrink-0 overflow-y-auto border-r border-base-300 bg-base-100 lg:block">
+        <ul class="menu w-full gap-1 p-3">
+            <li class="menu-title">Platform</li>
+            {% include "controlpanel/_nav_items.html" %}
+        </ul>
+    </aside>
+{% endblock menu %}
+
 {% block main %}
     {% if maintenance_on %}
         <div class="alert alert-error mb-6">
             {% lucide "wrench" size=20 %}
             <span>
-                <strong>The platform is closed for maintenance.</strong>
-                Clubs see a maintenance page and the scheduled jobs are standing down.
-            </span>
-            <a class="btn btn-sm" href="{% url 'controlpanel:features' %}">Reopen</a>
+        <strong>The platform is currently closed for maintenance.</strong>
+        Clubs see a maintenance page and the scheduled jobs are standing down.
+    </span>
+            <a class="btn btn-sm gap-2 btn-error btn-soft" href="{% url 'controlpanel:features' %}">{% lucide "unlock" size=16 %} Reopen platform</a>
         </div>
     {% endif %}
     <div class="mb-6 flex flex-wrap items-center justify-between gap-3">
@@ -28,15 +41,11 @@
             {% block actions %}{% endblock actions %}
         </div>
     </div>
-    
-    <div role="tablist" class="tabs-boxed tabs mb-6 w-fit">
-        <a role="tab" href="{% url 'controlpanel:dashboard' %}" class="tab gap-2 {% if nav == 'dashboard' %}tab-active{% endif %}">{% lucide "layout-dashboard" size=16 %} Dashboard</a>
-        <a role="tab" href="{% url 'controlpanel:club_list' %}" class="tab gap-2 {% if nav == 'clubs' %}tab-active{% endif %}">{% lucide "building-2" size=16 %} Clubs</a>
-        <a role="tab" href="{% url 'controlpanel:billing' %}" class="tab gap-2 {% if nav == 'billing' %}tab-active{% endif %}">{% lucide "receipt-euro" size=16 %} Billing</a>
-        <a role="tab" href="{% url 'controlpanel:features' %}" class="tab gap-2 {% if nav == 'features' %}tab-active{% endif %}">{% lucide "toggle-right" size=16 %} Features</a>
-        {% if user.is_superuser %}
-            <a role="tab" href="{% url 'controlpanel:admins' %}" class="tab gap-2 {% if nav == 'admins' %}tab-active{% endif %}">{% lucide "user-cog" size=16 %} Admins</a>
-        {% endif %}
-    </div>
+
+    {# Below `lg` the sidebar is hidden, so the same links appear here rather than nowhere. #}
+    <ul class="menu menu-horizontal mb-6 w-full gap-1 overflow-x-auto rounded-box bg-base-100 lg:hidden">
+        {% include "controlpanel/_nav_items.html" %}
+    </ul>
+
     {% block panel %}{% endblock panel %}
 {% endblock main %}