修复移动端的问题

Fizznoc · Aug 28, 2024 · 7cc8840 · 7cc8840
1 parent c02e1e6
commit 7cc8840
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 82 deletions.
diff --git a/src/app/[locale]/(marketing)/cursor/layout.tsx b/src/app/[locale]/(marketing)/cursor/layout.tsx
@@ -1,16 +1,65 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { MenuIcon, XIcon } from "lucide-react";
 import { ThemeProvider } from "next-themes";
+
+import { Button } from "@/components/ui/button";
 import { Menu } from "@/components/cursor/menu";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const checkIsMobile = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+
+    checkIsMobile();
+    window.addEventListener("resize", checkIsMobile);
+
+    return () => window.removeEventListener("resize", checkIsMobile);
+  }, []);
+
   return (
     <ThemeProvider>
-      <div className="flex min-h-screen pt-12">
-        <div className="sticky top-12 h-[calc(100vh-3rem)] w-64 overflow-y-auto">
-          <Menu />
+      <div className="flex min-h-screen flex-col md:flex-row">
+        {/* 移动端菜单切换按钮 */}
+        {isMobile && (
+          <Button
+            className="fixed left-4 top-16 z-50 p-2"
+            size="sm"
+            variant="outline"
+            onClick={() => setIsMenuOpen(!isMenuOpen)}
+          >
+            {isMenuOpen ? <XIcon size={16} /> : <MenuIcon size={16} />}
+          </Button>
+        )}
+
+        {/* 侧边菜单 */}
+        <div
+          className={`fixed inset-y-0 left-0 z-40 w-64 transform overflow-y-auto bg-background transition-transform duration-300 ease-in-out md:relative md:translate-x-0 ${
+            isMenuOpen || !isMobile ? "translate-x-0" : "-translate-x-full"
+          }`}
+        >
+          <div className="pt-20 md:pt-0">
+            <Menu />
+          </div>
         </div>
-        <div className="flex-1 overflow-y-auto">
+
+        {/* 主内容区 */}
+        <div className="flex-1 overflow-y-auto p-4 pt-20 md:p-6 md:pt-6">
           {children}
         </div>
+
+        {/* 遮罩层 */}
+        {isMobile && isMenuOpen && (
+          <div
+            className="fixed inset-0 z-30 bg-black bg-opacity-50"
+            onClick={() => setIsMenuOpen(false)}
+          />
+        )}
       </div>
     </ThemeProvider>
   );

diff --git a/src/components/layout/navbar.tsx b/src/components/layout/navbar.tsx
@@ -78,57 +78,38 @@ export function NavBar({ scroll = false }: NavBarProps) {
           ) : null}
         </div>
 
-        <div className="flex items-center space-x-3">
-          {/* right header for docs */}
-          {documentation ? (
-            <div className="hidden flex-1 items-center space-x-4 sm:justify-end lg:flex">
-              <div className="hidden lg:flex lg:grow-0">
-                <DocsSearch />
-              </div>
-              <div className="flex lg:hidden">
-                <Icons.search className="size-6 text-muted-foreground" />
-              </div>
-              <div className="flex space-x-4">
-                <Link
-                  href={siteConfig.links.github}
-                  target="_blank"
-                  rel="noreferrer"
+        <div className="flex items-center space-x-2 md:space-x-3">
+          <div className="flex items-center space-x-2">
+            <LocaleSwitcher />
+            {session ? (
+              <Link
+                href={session.user.role === "ADMIN" ? "/admin" : "/dashboard"}
+              >
+                <Button
+                  className="gap-2 px-2 md:px-5"
+                  variant="default"
+                  size="sm"
+                  rounded="full"
                 >
-                  <Icons.gitHub className="size-7" />
-                  <span className="sr-only">GitHub</span>
-                </Link>
-              </div>
-            </div>
-          ) : null}
-          <LocaleSwitcher />
-          {session ? (
-            <Link
-              href={session.user.role === "ADMIN" ? "/admin" : "/dashboard"}
-              className="hidden md:block"
-            >
+                  <span className="hidden md:inline">Dashboard</span>
+                  <Icons.dashboard className="size-4 md:hidden" />
+                </Button>
+              </Link>
+            ) : status === "unauthenticated" ? (
               <Button
-                className="gap-2 px-5"
+                className="gap-2 px-2 md:px-5"
                 variant="default"
                 size="sm"
                 rounded="full"
+                onClick={() => setShowSignInModal(true)}
               >
-                <span>Dashboard</span>
+                <span className="hidden md:inline">Sign In</span>
+                <Icons.arrowRight className="size-4 md:hidden" />
               </Button>
-            </Link>
-          ) : status === "unauthenticated" ? (
-            <Button
-              className="hidden gap-2 px-5 md:flex"
-              variant="default"
-              size="sm"
-              rounded="full"
-              onClick={() => setShowSignInModal(true)}
-            >
-              <span>Sign In</span>
-              <Icons.arrowRight className="size-4" />
-            </Button>
-          ) : (
-            <Skeleton className="hidden h-9 w-28 rounded-full lg:flex" />
-          )}
+            ) : (
+              <Skeleton className="size-9 rounded-full md:w-28" />
+            )}
+          </div>
         </div>
       </MaxWidthWrapper>
     </header>

diff --git a/src/components/sections/hero-landing.tsx b/src/components/sections/hero-landing.tsx
@@ -1,13 +1,13 @@
+import { useTranslations } from "next-intl";
 import Link from "next/link";
-import { env } from "@/env.mjs";
-import { siteConfig } from "@/config/site";
-import { cn, nFormatter } from "@/lib/utils";
-import { buttonVariants } from "@/components/ui/button";
+
 import { Icons } from "@/components/shared/icons";
-import { useTranslations } from 'next-intl';
+import { buttonVariants } from "@/components/ui/button";
+import { env } from "@/env.mjs";
+import { cn } from "@/lib/utils";
 
 export default async function HeroLanding() {
-  const t = useTranslations('HeroLanding');
+  const t = useTranslations("HeroLanding");
   const { stargazers_count: stars } = await fetch(
     "https://api.github.com/repos/mickasmt/next-saas-stripe-starter",
     {
@@ -36,22 +36,22 @@ export default async function HeroLanding() {
           target="_blank"
         >
           <span className="mr-3">🎉</span>
-          <span className="hidden md:flex">{t('introducing')}&nbsp;</span> Next Auth
-          Roles Template on <Icons.twitter className="ml-2 size-3.5" />
+          <span className="hidden md:flex">{t("introducing")}&nbsp;</span> Next
+          Auth Roles Template on <Icons.twitter className="ml-2 size-3.5" />
         </Link>
 
         <h1 className="text-balance font-urban text-4xl font-extrabold tracking-tight sm:text-5xl md:text-6xl lg:text-[66px]">
-          {t('kickoff')}{" "}
+          {t("kickoff")}{" "}
           <span className="text-gradient_indigo-purple font-extrabold">
-            {t('saasStarter')}
+            {t("saasStarter")}
           </span>
         </h1>
 
         <p
           className="max-w-2xl text-balance leading-normal text-muted-foreground sm:text-xl sm:leading-8"
           style={{ animationDelay: "0.35s", animationFillMode: "forwards" }}
         >
-          {t('description')}
+          {t("description")}
         </p>
 
         <div
@@ -66,41 +66,26 @@ export default async function HeroLanding() {
               "gap-2",
             )}
           >
-            <span>{t('goPricing')}</span>
+            <span>{t("goPricing")}</span>
             <Icons.arrowRight className="size-4" />
           </Link>
           <Link
-            href={siteConfig.links.github}
-            target="_blank"
-            rel="noreferrer"
+            href="/cursor"
+            prefetch={true}
             className={cn(
               buttonVariants({
-                variant: "outline",
+                variant: "secondary",
                 size: "lg",
                 rounded: "full",
               }),
-              "px-5",
-            )}
-          >
-            <Icons.gitHub className="mr-2 size-4" />
-            <p>
-              <span className="hidden sm:inline-block">{t('starOn')}</span> {t('github')}{" "}
-              <span className="font-semibold">{nFormatter(stars)}</span>
-            </p>
-          </Link>
-          <Link
-            href="/cursor"
-            prefetch={true}
-            className={cn(
-              buttonVariants({ variant: "secondary", size: "lg", rounded: "full" }),
-              "gap-2 bg-gradient-to-r from-purple-500 to-indigo-500 text-white hover:from-purple-600 hover:to-indigo-600"
+              "gap-2 bg-gradient-to-r from-purple-500 to-indigo-500 text-white hover:from-purple-600 hover:to-indigo-600",
             )}
           >
-            <span>{t('goCursorRules')}</span>
+            <span>{t("goCursorRules")}</span>
             <Icons.arrowRight className="size-4" />
           </Link>
         </div>
       </div>
     </section>
   );
-}
+}
diff --git a/src/locales/cn.json b/src/locales/cn.json
@@ -10,7 +10,7 @@
     "goPricing": "查看定价",
     "starOn": "在",
     "github": "GitHub 上加星",
-    "goCursorRules": "去查看 Cursor 提示词"
+    "goCursorRules": "Go Cursor Rules"
   },
   "layout": {
     "english": "英文",