Admin topnav: only allow one details group open via JS

resources/views/admin/layouts/app.blade.php

@@ -14,10 +14,10 @@
         <div class="topnav-row">
             <a class="topnav-brand" href="/admin">SaaSShop</a>
 
-            <nav class="topnav-menu" aria-label="总台主导航">
+            <nav class="topnav-menu" aria-label="总台主导航" data-role="topnav-groups-root">
                 <a class="topnav-link" href="/admin">总览</a>
 
-                <details class="topnav-item nav-group">
+                <details class="topnav-item nav-group" data-role="topnav-group">
                     <summary class="topnav-summary nav-group-title">收费中心</summary>
                     <div class="topnav-dropdown">
                         <a href="/admin/platform-orders" class="topnav-sub nav-item nav-item--sub">平台订单</a>
@@ -26,7 +26,7 @@
                     </div>
                 </details>
 
-                <details class="topnav-item nav-group">
+                <details class="topnav-item nav-group" data-role="topnav-group">
                     <summary class="topnav-summary nav-group-title">站点治理</summary>
                     <div class="topnav-dropdown">
                         <a href="/admin/merchants" class="topnav-sub nav-item nav-item--sub">站点管理</a>
@@ -36,14 +36,14 @@
                     </div>
                 </details>
 
-                <details class="topnav-item nav-group">
+                <details class="topnav-item nav-group" data-role="topnav-group">
                     <summary class="topnav-summary nav-group-title">增长转化</summary>
                     <div class="topnav-dropdown">
                         <a href="/admin/platform-leads" class="topnav-sub nav-item nav-item--sub">开通线索</a>
                     </div>
                 </details>
 
-                <details class="topnav-item nav-group">
+                <details class="topnav-item nav-group" data-role="topnav-group">
                     <summary class="topnav-summary nav-group-title">系统</summary>
                     <div class="topnav-dropdown">
                         <a href="/admin/settings/system" class="topnav-sub nav-item nav-item--sub">系统配置</a>
@@ -91,5 +91,25 @@
         @yield('content')
     </main>
 </div>
+    <script data-action="topnav-single-open">
+        (function(){
+            var root = document.querySelector('[data-role="topnav-groups-root"]');
+            if(!root){return;}
+
+            var groups = root.querySelectorAll('details[data-role="topnav-group"]');
+            if(!groups || groups.length === 0){return;}
+
+            groups.forEach(function(d){
+                d.addEventListener('toggle', function(){
+                    if(!d.open){return;}
+                    groups.forEach(function(other){
+                        if(other !== d){
+                            other.open = false;
+                        }
+                    });
+                });
+            });
+        })();
+    </script>
 </body>
 </html>

tests/Feature/AdminTopNavSingleOpenDetailsTest.php

@@ -0,0 +1,32 @@
+<?php
+
+namespace Tests\Feature;
+
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use Tests\TestCase;
+
+class AdminTopNavSingleOpenDetailsTest extends TestCase
+{
+    use RefreshDatabase;
+
+    protected function loginAsPlatformAdmin(): void
+    {
+        $this->seed();
+
+        $this->post('/admin/login', [
+            'email' => 'platform.admin@demo.local',
+            'password' => 'Platform@123456',
+        ])->assertRedirect('/admin');
+    }
+
+    public function test_layout_should_include_single_open_nav_script(): void
+    {
+        $this->loginAsPlatformAdmin();
+
+        $this->get('/admin')
+            ->assertOk()
+            ->assertSee('data-role="topnav-group"', false)
+            ->assertSee('data-role="topnav-groups-root"', false)
+            ->assertSee('data-action="topnav-single-open"', false);
+    }
+}