feat: improve mobile documentation navigation

Author: Bloomingg

app/globals.css

@@ -323,6 +323,7 @@ select {
 }
 
 .icon-button,
+.mobile-primary-dropdown > button,
 .language-dropdown > summary,
 .copy-page-link,
 .article-actions a {
@@ -432,6 +433,158 @@ select {
   padding: 0;
 }
 
+.mobile-primary-dropdown {
+  position: relative;
+  display: none;
+}
+
+.mobile-primary-dropdown > button {
+  width: 36px;
+  padding: 0;
+  cursor: pointer;
+  font: inherit;
+}
+
+.mobile-primary-dropdown > button svg {
+  width: 18px;
+  height: 18px;
+}
+
+.mobile-primary-dropdown.is-open > button {
+  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
+  background: var(--surface-soft);
+  color: var(--text-strong);
+}
+
+.mobile-primary-dropdown-menu {
+  position: fixed;
+  top: calc(var(--header-height) - 1px);
+  right: 12px;
+  left: 12px;
+  z-index: 90;
+  display: grid;
+  gap: 4px;
+  max-height: calc(100dvh - var(--header-height) - 12px);
+  padding: 8px;
+  overflow-y: auto;
+  border: 1px solid var(--border);
+  border-radius: 0 0 14px 14px;
+  background: var(--surface);
+  box-shadow: var(--shadow-md);
+  backdrop-filter: blur(18px) saturate(150%);
+}
+
+.mobile-primary-external-links {
+  display: grid;
+  gap: 4px;
+}
+
+.mobile-primary-item,
+.mobile-sdk-menu > button,
+.mobile-sdk-menu-section a {
+  display: flex;
+  width: 100%;
+  min-height: 42px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 0 12px;
+  border: 1px solid transparent;
+  border-radius: 9px;
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 620;
+  text-align: left;
+}
+
+.mobile-primary-item:hover,
+.mobile-primary-item.is-active,
+.mobile-sdk-menu > button:hover,
+.mobile-sdk-menu > button.is-active,
+.mobile-sdk-menu-section a:hover,
+.mobile-sdk-menu-section a.is-active {
+  border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
+  background: var(--accent-soft);
+  color: var(--text-strong);
+}
+
+.mobile-primary-external-links {
+  margin-top: 4px;
+  padding-top: 8px;
+  border-top: 1px solid var(--border);
+}
+
+.mobile-primary-external-links svg {
+  width: 15px;
+  height: 15px;
+  color: var(--text-subtle);
+}
+
+.mobile-sdk-menu {
+  display: grid;
+  gap: 4px;
+}
+
+.mobile-sdk-menu > button svg {
+  width: 15px;
+  height: 15px;
+  color: var(--text-subtle);
+  transition: transform 160ms ease;
+}
+
+.mobile-sdk-menu.is-open > button svg {
+  transform: rotate(180deg);
+}
+
+.mobile-sdk-menu-list {
+  display: grid;
+  gap: 8px;
+  margin: 0 0 4px 13px;
+  padding: 7px 0 7px 10px;
+  border-left: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border));
+}
+
+.mobile-sdk-menu-section {
+  display: grid;
+  gap: 5px;
+}
+
+.mobile-sdk-menu-section > p {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 2px 10px 1px;
+  color: var(--text-subtle);
+}
+
+.mobile-sdk-menu-section > p strong {
+  font-size: 10px;
+  font-weight: 760;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.mobile-sdk-menu-section > p span {
+  font-size: 10px;
+  font-weight: 620;
+}
+
+.mobile-sdk-menu-section > div {
+  display: grid;
+  gap: 2px;
+}
+
+.mobile-sdk-menu-section a {
+  min-height: 38px;
+  justify-content: flex-start;
+  padding: 0 10px;
+  font-size: 12px;
+}
+
 .language-dropdown {
   position: relative;
 }
@@ -4315,6 +4468,16 @@ html.dark .guide-markdown a {
   }
 }
 
+@media (max-width: 760px) {
+  .primary-nav {
+    display: none;
+  }
+
+  .mobile-primary-dropdown {
+    display: block;
+  }
+}
+
 @media (max-width: 640px) {
   .global-header-inner {
     gap: 12px;
@@ -4502,7 +4665,14 @@ html.dark .guide-markdown a {
     justify-content: space-between;
   }
 
-  .primary-nav {
+  .language-dropdown > summary {
+    width: 36px;
+    min-width: 36px;
+    padding: 0;
+  }
+
+  .language-dropdown > summary .language-current,
+  .language-dropdown > summary > svg:last-child {
     display: none;
   }
 
@@ -4511,6 +4681,12 @@ html.dark .guide-markdown a {
   }
 }
 
+@media (max-width: 350px) {
+  .brand-name {
+    display: none;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,

app/layout.tsx

@@ -40,7 +40,7 @@ export const viewport: Viewport = {
 
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html data-scroll-behavior="smooth" lang="en" suppressHydrationWarning>
       <body>
         <RootProvider theme={{ storageKey: 'openim-docs-theme' }}>{children}</RootProvider>
       </body>

src/components/search/search-dialog.tsx

@@ -78,7 +78,12 @@ export function SearchDialog({ locale = 'en' }: { locale?: Locale }) {
 
   return (
     <>
-      <button className="search-trigger" onClick={openDialog} type="button">
+      <button
+        aria-label={text.search.trigger}
+        className="search-trigger"
+        onClick={openDialog}
+        type="button"
+      >
         <SearchIcon />
         <span>{text.search.trigger}</span>
         <kbd>⌘K</kbd>