fix: docs layout for mobile size

Author: wangdicoder

apps/docs/src/components/doc-footer/component-page.scss

@@ -6,6 +6,10 @@
 
   &__layout {
     padding: 30px 30px 30px 280px;
+
+    @media (max-width: $size-md) {
+      padding: 20px 16px;
+    }
   }
 
   &__divider {

apps/docs/src/components/header/header.scss

@@ -54,13 +54,23 @@
     display: flex;
     list-style: none;
     height: 100%;
+    min-width: 0;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
   }
 
   &__nav-list {
     height: 100%;
     margin: 0;
+    padding: 0;
     display: flex;
     align-items: center;
+    white-space: nowrap;
   }
 
   &__nav-item {
@@ -143,13 +153,15 @@
 
   @media (max-width: $size-xs) {
     &__nav-item {
-      margin-left: 12px;
-      font-size: 14px;
+      margin-left: 8px;
+      font-size: 13px;
     }
 
     &__version,
     &__locale-toggle,
-    &__theme-toggle {
+    &__theme-toggle,
+    &__github-link,
+    &__home-link {
       display: none;
     }
   }

apps/docs/src/components/header/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import './header.scss';
-import { NavLink } from 'react-router-dom';
+import { NavLink, useLocation } from 'react-router-dom';
 import pkg from '../../../../../packages/react/package.json';
 import { Link } from '@tiny-design/react';
 import { IconGithub } from '@tiny-design/icons';
@@ -15,14 +15,17 @@ const { version, repository } = pkg;
 export const Header = (): React.ReactElement => {
   const { toggle } = useSidebarToggle();
   const { siteLocale: s } = useLocaleContext();
+  const { pathname } = useLocation();
+  const isHome = pathname === '/';
 
   return (
     <header className="header">
       <div className="header__left">
         <button
           className="header__menu-toggle"
           onClick={toggle}
-          aria-label="Toggle menu">
+          aria-label="Toggle menu"
+          style={isHome ? { display: 'none' } : undefined}>
           <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
             <line x1="3" y1="6" x2="21" y2="6" />
             <line x1="3" y1="12" x2="21" y2="12" />
@@ -38,7 +41,7 @@ export const Header = (): React.ReactElement => {
       </div>
       <nav className="header__nav">
         <ul className="header__nav-list">
-          <li className="header__nav-item">
+          <li className="header__nav-item header__home-link">
             <NavLink end to="/" className="header__link">
               {s.nav.home}
             </NavLink>
@@ -67,7 +70,7 @@ export const Header = (): React.ReactElement => {
               <span className="header__version">v{version}</span>
             </a>
           </li>
-          <li className="header__nav-item">
+          <li className="header__nav-item header__github-link">
             <Link href={repository.url} underline={false} rel="noreferrer noopener">
               <IconGithub color="currentColor" size={19} />
             </Link>

apps/docs/src/components/markdown-tag/md-tag.scss

@@ -65,6 +65,12 @@
     }
   }
 
+  overflow-wrap: break-word;
+
+  @media (max-width: $size-md) {
+    overflow-x: hidden;
+  }
+
   &__pre-container {
     code {
       line-height: 2;

apps/docs/src/components/sidebar-menu/index.tsx

@@ -2,10 +2,15 @@ import React from 'react';
 import './sidebar-menu.scss';
 import { NavLink } from 'react-router-dom';
 import { RouterItem } from '../../routers';
-import { Layout } from '@tiny-design/react';
+import { Layout, Link } from '@tiny-design/react';
+import { IconGithub } from '@tiny-design/icons';
 import { useSidebarToggle } from '../../context/sidebar-toggle-context';
+import { useLocaleContext } from '../../context/locale-context';
+import { ThemeToggle } from '../header/theme-toggle';
+import pkg from '../../../../../packages/react/package.json';
 
 const { Sidebar } = Layout;
+const { version, repository } = pkg;
 
 type Props = {
   routers: RouterItem[];
@@ -15,6 +20,8 @@ type Props = {
 export const SidebarMenu = (props: Props): React.ReactElement => {
   const { routers, url } = props;
   const { isOpen, close } = useSidebarToggle();
+  const { locale, toggle: toggleLocale } = useLocaleContext();
+  const isZh = locale.locale === 'zh_CN';
 
   return (
     <>
@@ -61,6 +68,19 @@ export const SidebarMenu = (props: Props): React.ReactElement => {
             }
           })}
         </ul>
+        <div className="sidebar-menu__toolbar">
+          <span className="sidebar-menu__toolbar-version">v{version}</span>
+          <Link href={repository.url} underline={false} rel="noreferrer noopener">
+            <IconGithub color="currentColor" size={18} />
+          </Link>
+          <button
+            className="sidebar-menu__toolbar-btn"
+            onClick={toggleLocale}
+            aria-label={isZh ? 'Switch to English' : '切换到中文'}>
+            {isZh ? 'EN' : '中文'}
+          </button>
+          <ThemeToggle />
+        </div>
       </Sidebar>
     </>
   );

apps/docs/src/components/sidebar-menu/sidebar-menu.scss

@@ -11,6 +11,8 @@
   border-right: 1px solid var(--ty-color-border);
   padding: 20px 0;
   z-index: 99;
+  display: flex;
+  flex-direction: column;
 
   &__title {
     margin: 0 30px;
@@ -98,6 +100,10 @@
     display: none;
   }
 
+  &__toolbar {
+    display: none;
+  }
+
   @media (max-width: $size-md) {
     transform: translateX(-100%);
     transition: transform 0.3s ease;
@@ -114,5 +120,41 @@
       background: rgba(0, 0, 0, 0.3);
       z-index: 100;
     }
+
+    &__toolbar {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 16px 30px;
+      border-top: 1px solid var(--ty-color-border-secondary);
+      margin-top: auto;
+    }
+
+    &__toolbar-version {
+      font-size: 12px;
+      color: var(--ty-color-text-tertiary);
+      background: var(--ty-color-fill);
+      padding: 2px 10px;
+      border-radius: 46px;
+    }
+
+    &__toolbar-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      height: 28px;
+      padding: 0 8px;
+      border: 1px solid var(--ty-color-border);
+      border-radius: 14px;
+      background: var(--ty-color-bg-elevated);
+      color: var(--ty-color-text-secondary);
+      cursor: pointer;
+      font-size: 12px;
+      font-weight: 500;
+    }
+
+    &__toolbar .header__theme-toggle {
+      display: inline-flex;
+    }
   }
 }

apps/docs/src/index.scss

@@ -28,6 +28,7 @@ body {
 
   &__layout {
     padding: 30px 30px 30px 280px;
+    overflow-x: hidden;
 
     @media (max-width: $size-md) {
       padding: 20px 16px;