feat: update mobile styling

Author: pomelo-nwu

website/app/[lang]/layout.tsx

@@ -26,9 +26,9 @@ const LanguageLayout: FC<LayoutProps> = async ({ children, params }) => {
   });
 
   const banner = (
-    <Banner storageKey="qwen-code-announce">
+    <Banner storageKey='qwen-code-announce'>
       🚀 Free 2000 requests per day! Qwen Code AI coding agent is now open
-      source! <Link href="/">Learn more →</Link>
+      source! <Link href='/'>Learn more →</Link>
     </Banner>
   );
 
@@ -37,25 +37,27 @@ const LanguageLayout: FC<LayoutProps> = async ({ children, params }) => {
       logo={
         <>
           <span
-            className="ms-2 select-none font-extrabold max-md:hidden flex items-center"
+            className='ms-2 select-none font-extrabold flex items-center'
             title={`Qwen Code: AI Coding Agent`}
           >
             <img
-              src="https://assets.alicdn.com/g/qwenweb/qwen-webui-fe/0.0.191/static/favicon.png"
-              alt="Qwen Code"
+              src='https://assets.alicdn.com/g/qwenweb/qwen-webui-fe/0.0.191/static/favicon.png'
+              alt='Qwen Code'
               width={32}
               height={32}
-              className="inline-block align-middle mr-2"
+              className='inline-block align-middle mr-2 '
               style={{ verticalAlign: "middle" }}
             />
-            <span className="text-[1.3rem]  font-normal align-middle mr-1">
+            <span className='text-[1.3rem]  font-normal align-middle mr-1 max-md:hidden'>
               Qwen
             </span>
-            <span className="text-[1.3rem] font-normal align-middle">Code</span>
+            <span className='text-[1.3rem] font-normal align-middle max-md:hidden'>
+              Code
+            </span>
           </span>
         </>
       }
-      projectLink="https://github.com/QwenLM/qwen-code"
+      projectLink='https://github.com/QwenLM/qwen-code'
     >
       <LanguageDropdown currentLang={lang} />
     </Navbar>
@@ -66,7 +68,7 @@ const LanguageLayout: FC<LayoutProps> = async ({ children, params }) => {
       // banner={banner}
       navbar={navbar}
       footer={null}
-      docsRepositoryBase="https://github.com/QwenLM/qwen-code/blob/main/docs"
+      docsRepositoryBase='https://github.com/QwenLM/qwen-code/blob/main/docs'
       i18n={[
         { locale: "en", name: "English" },
         { locale: "zh", name: "中文" },

website/src/components/custom-navbar.tsx

@@ -4,7 +4,7 @@ import React, { useState, useEffect } from "react";
 import cn from "clsx";
 import NextLink from "next/link";
 import { useRouter } from "next/navigation";
-import { GitHubIcon, DiscordIcon, MenuIcon } from "nextra/icons";
+import { GitHubIcon, DiscordIcon } from "nextra/icons";
 import { Button } from "nextra/components";
 import { FileText, Star, BookOpen } from "lucide-react";
 
@@ -110,7 +110,8 @@ export const CustomNavbar: React.FC<NavbarProps> = ({
 }) => {
   const { stars, loading } = useGitHubStars(projectLink);
   // 计算 logo 的对齐方式
-  const logoAlignClass = align === "left" ? "max-md:me-auto" : "me-auto";
+  const logoAlignClass =
+    align === "left" ? "max-md:me-auto" : "max-md:me-0 md:me-auto";
 
   // 主容器样式 - 完全复制 nextra-theme-docs 的样式
   const headerClass = cn(
@@ -128,9 +129,9 @@ export const CustomNavbar: React.FC<NavbarProps> = ({
 
   // 导航栏容器样式
   const navClass = cn(
-    "mx-auto flex max-w-[var(--nextra-content-width)] items-center gap-4",
+    "mx-auto flex max-w-[var(--nextra-content-width)] items-center gap-2 md:gap-4",
     "pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)]",
-    "justify-end",
+    "justify-between md:justify-end",
     className
   );
 
@@ -175,7 +176,8 @@ export const CustomNavbar: React.FC<NavbarProps> = ({
   };
 
   // 右侧导航区域的对齐方式
-  const rightAlignClass = align === "left" ? "me-auto" : "";
+  const rightAlignClass =
+    align === "left" ? "me-auto" : "max-md:ml-auto md:ml-0";
 
   return (
     <header className={headerClass}>
@@ -190,14 +192,27 @@ export const CustomNavbar: React.FC<NavbarProps> = ({
         {/* Logo 区域 */}
         {logoElement}
 
-        {/* 右侧导航区域 */}
+        {/* 移动端 Document 链接 - 始终显示 */}
+        <NextLink
+          href={getDocumentLink()}
+          className={cn(
+            documentLinkClass,
+            "flex items-center md:hidden",
+            "text-sm px-2 py-1 rounded-md"
+          )}
+          aria-label='Documentation'
+        >
+          <BookOpen height='20' />
+        </NextLink>
+
+        {/* 右侧导航区域 - 桌面端 */}
         <div
           className={cn(
             "flex gap-4 overflow-x-auto nextra-scrollbar py-1.5 max-md:hidden",
             rightAlignClass
           )}
         >
-          {/* Document 链接 */}
+          {/* Document 链接 - 桌面端 */}
           <NextLink
             href={getDocumentLink()}
             className={cn(documentLinkClass, "flex items-center")}
@@ -228,18 +243,6 @@ export const CustomNavbar: React.FC<NavbarProps> = ({
           {/* 子组件 */}
           {children}
         </div>
-
-        {/* 移动端菜单按钮 */}
-        <Button
-          aria-label='Menu'
-          className='nextra-hamburger md:hidden'
-          onClick={() => {
-            // 这里可以添加移动端菜单切换逻辑
-            console.log("Mobile menu toggle");
-          }}
-        >
-          <MenuIcon height='24' />
-        </Button>
       </nav>
     </header>
   );

website/src/page/index.tsx

@@ -12,6 +12,25 @@ const Index = () => {
       <CustomNavbar
         logo={
           <>
+            {/* 移动端显示图标和文字 */}
+            <span
+              className='ms-2 select-none font-extrabold md:hidden flex items-center'
+              title={`Qwen Code: AI Coding Agent`}
+            >
+              <img
+                src='https://assets.alicdn.com/g/qwenweb/qwen-webui-fe/0.0.191/static/favicon.png'
+                alt='Qwen Code'
+                width={24}
+                height={24}
+                className='inline-block align-middle mr-1'
+                style={{ verticalAlign: "middle" }}
+              />
+              <span className='text-lg font-normal align-middle mr-0.5'>
+                Qwen
+              </span>
+              <span className='text-lg font-normal align-middle'>Code</span>
+            </span>
+            {/* 桌面端显示完整logo */}
             <span
               className='ms-2 select-none font-extrabold max-md:hidden flex items-center'
               title={`Qwen Code: AI Coding Agent`}