fix menu

admin/menu.php

@@ -1,20 +1,22 @@
 <?php if (!defined('__TYPECHO_ADMIN__')) exit; ?>
 <header class="typecho-head-nav" role="navigation">
-    <nav id="typecho-nav-list">
-        <details class="menu-bar">
-            <summary><?php _e('菜单'); ?></summary>
-        </details>
-        <?php $menu->output(); ?>
+    <details class="menu-bar">
+        <summary><?php _e('菜单'); ?></summary>
+    </details>
+    <nav>
+        <menu>
+            <?php $menu->output(); ?>
+            <li class="operate">
+                <?php \Typecho\Plugin::factory('admin/menu.php')->call('navBar'); ?><a title="<?php
+                if ($user->logged > 0) {
+                    $logged = new \Typecho\Date($user->logged);
+                    _e('最后登录: %s', $logged->word());
+                }
+                ?>" href="<?php $options->adminUrl('profile.php'); ?>" class="author"><?php $user->screenName(); ?></a><a
+                    class="exit" href="<?php $options->logoutUrl(); ?>"><?php _e('登出'); ?></a><a
+                    href="<?php $options->siteUrl(); ?>"><?php _e('网站'); ?></a>
+            </li>
+        </menu>
     </nav>
-    <div class="operate">
-        <?php \Typecho\Plugin::factory('admin/menu.php')->call('navBar'); ?><a title="<?php
-        if ($user->logged > 0) {
-            $logged = new \Typecho\Date($user->logged);
-            _e('最后登录: %s', $logged->word());
-        }
-        ?>" href="<?php $options->adminUrl('profile.php'); ?>" class="author"><?php $user->screenName(); ?></a><a
-            class="exit" href="<?php $options->logoutUrl(); ?>"><?php _e('登出'); ?></a><a
-            href="<?php $options->siteUrl(); ?>"><?php _e('网站'); ?></a>
-    </div>
 </header>
 

admin/src/scss/_header.scss

@@ -42,10 +42,13 @@ $color-nav-child-focus: #6DA1BB;
     background: $color-nav-bg;
   }
 
-  #typecho-nav-list {
+  nav {
+    width: 100%;
+
     & > menu {
       display: flex;
       position: relative;
+      width: 100%;
 
       & > li {
 
@@ -110,55 +113,58 @@ $color-nav-child-focus: #6DA1BB;
             }
           }
         }
-      }
-    }
-  }
 
-  .operate {
-    flex: 1;
-    display: flex;
-    justify-content: flex-end;
+        &.operate {
+          flex: 1;
+          display: flex;
+          justify-content: flex-end;
 
-    a {
-      display: block;
-      margin-left: -1px;
-      border: $border-nav;
-      border-width: 0 1px;
-      
-      &:hover {
-        background-color: $color-nav-btn-hover;
+          &:hover > a {
+            background: inherit;
+          }
+
+          a {
+            &:hover {
+              background-color: $color-nav-btn-hover;
+            }
+
+            &:first-child {
+              border-left: $border-nav;
+            }
+          }
+        }
       }
     }
   }
 
   @include screen(phone, max) {
+    padding: 0;
+    flex-flow: column;
+
     .menu-bar {
       display: block;
+      font-size: 14px;
 
       summary {
         cursor: pointer;
-        border: $border-nav;
-        border-width: 0 1px;
       }
 
-      &[open] ~ menu {
-        display: flex !important;
+      &[open] ~ nav {
+        display: block;
       }
     }
 
-    #typecho-nav-list {
-      position: relative;
+    nav {
+      overflow-y: auto;
+      max-height: calc(80vh - 36px);
+      width: 100vw;
+      display: none;
+      position: absolute;
+      top: 100%;
+      background: $color-nav-btn-hover;
 
       & > menu {
-        display: none;
         flex-flow: column;
-        position: absolute;
-        top: 36px;
-        left: -10px;
-        min-width: 160px;
-        max-width: 240px;
-        overflow-y: auto;
-        height: calc(100vh - 36px);
 
         & > li {
           &:first-child {
@@ -174,12 +180,15 @@ $color-nav-child-focus: #6DA1BB;
           }
 
           > a {
-            border: none;
+            border: none !important;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
-            pointer-events: none;
-            cursor: default;
+          }
+
+          &:not(.operate) > a {
+            pointer-events: auto;
+            cursor: pointer;
           }
 
           menu {
@@ -187,9 +196,27 @@ $color-nav-child-focus: #6DA1BB;
             border: $border-nav;
             border-width: 1px 0;
             display: flex;
+            min-width: auto;
+            max-width: 100vw;
+            width: 100vw;
+          }
+
+          &.operate {
+            flex-flow: column;
+            justify-content: flex-start;
+
+            a {
+              background: $color-nav-btn-hover;
+            }
           }
         }
       }
     }
   }
 }
+
+@include screen(phone, max) {
+  body:has(.menu-bar[open]) {
+    position: fixed;
+  }
+}

var/Widget/Menu.php

@@ -276,8 +276,6 @@ class Menu extends Base
      */
     public function output($class = 'focus', $childClass = 'focus')
     {
-        echo '<menu>';
-
         foreach ($this->menu as $key => $node) {
             if (!$node[1] || !$key) {
                 continue;
@@ -306,7 +304,5 @@ class Menu extends Base
 
             echo '</menu></li>';
         }
-
-        echo '</menu>';
     }
 }