From 13810236d401f9d8ad7fcdea62c2b37010312610 Mon Sep 17 00:00:00 2001
From: javayhu <javayhu@gmail.com>
Date: Sat, 8 Mar 2025 18:31:35 +0800
Subject: [PATCH] feat: add logout translations and update mobile/desktop
 navbar components

- Add "logout" translation key to English and Chinese locale files
- Update `UserButton` component to use translated logout text
- Modify mobile and desktop navbar to conditionally render user button based on session
- Adjust styling for blog category list mobile and navbar components
- Improve internationalization and user authentication UI
---
 messages/en.json                                  | 3 ++-
 messages/zh.json                                  | 3 ++-
 src/components/blog/blog-category-list-mobile.tsx | 8 ++------
 src/components/layout/navbar-mobile.tsx           | 9 +++++++--
 src/components/layout/navbar.tsx                  | 7 +++----
 src/components/layout/user-button.tsx             | 9 +++++----
 6 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/messages/en.json b/messages/en.json
index 86de1f6..c485c97 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -1,7 +1,8 @@
 {
   "Common": {
     "login": "Log in",
-    "signUp": "Sign up"
+    "logout": "Log out",
+    "signUp": "Sign up"    
   },
   "HomePage": {
     "title": "next-intl example"
diff --git a/messages/zh.json b/messages/zh.json
index 362bb15..6de5f6b 100644
--- a/messages/zh.json
+++ b/messages/zh.json
@@ -1,6 +1,7 @@
 {
   "Common": {
     "login": "登录",
+    "logout": "退出",
     "signUp": "注册"
   },
   "HomePage": {
@@ -105,7 +106,7 @@
         }
       },
       "pages": {
-        "title": "页面",
+        "title": "演示页面",
         "items": {
           "about": {
             "title": "关于我们",
diff --git a/src/components/blog/blog-category-list-mobile.tsx b/src/components/blog/blog-category-list-mobile.tsx
index 5da9aa8..5c97ee3 100644
--- a/src/components/blog/blog-category-list-mobile.tsx
+++ b/src/components/blog/blog-category-list-mobile.tsx
@@ -37,7 +37,7 @@ export function BlogCategoryListMobile({
     <Drawer open={open} onClose={closeDrawer}>
       <DrawerTrigger
         onClick={() => setOpen(true)}
-        className="flex items-center w-full p-3 border-y text-foreground/90"
+        className="flex items-center w-full p-4 border-y text-foreground/90"
       >
         <div className="flex items-center justify-between w-full gap-4">
           <div className="flex items-center gap-2">
@@ -53,11 +53,7 @@ export function BlogCategoryListMobile({
         <DrawerOverlay className="fixed inset-0 z-40 bg-background/50" />
         <DrawerContent className="fixed inset-x-0 bottom-0 z-50 mt-24 overflow-hidden rounded-t-[10px] border bg-background">
           <DrawerTitle className="sr-only">{t("categories")}</DrawerTitle>
-          <div className="sticky top-0 z-20 flex w-full items-center justify-center bg-inherit">
-            <div className="my-3 h-1.5 w-16 rounded-full bg-muted-foreground/20" />
-          </div>
-
-          <ul className="mb-14 w-full p-3 text-muted-foreground">
+          <ul className="mb-14 w-full p-4 text-muted-foreground">
             <FilterItemMobile
               title={t("all")}
               href="/blog"
diff --git a/src/components/layout/navbar-mobile.tsx b/src/components/layout/navbar-mobile.tsx
index b8956d7..cab5d5c 100644
--- a/src/components/layout/navbar-mobile.tsx
+++ b/src/components/layout/navbar-mobile.tsx
@@ -12,11 +12,12 @@ import {
 import { createTranslator, getMenuLinks } from '@/config/marketing';
 import { siteConfig } from '@/config/site';
 import { LocaleLink } from '@/i18n/navigation';
+import { authClient } from '@/lib/auth-client';
 import { cn } from '@/lib/utils';
 import { Routes } from '@/routes';
-import { useTranslations } from "next-intl";
 import { Portal } from '@radix-ui/react-portal';
 import { ArrowUpRightIcon, ChevronDownIcon, ChevronUpIcon, MenuIcon, XIcon } from 'lucide-react';
+import { useTranslations } from "next-intl";
 import { usePathname } from 'next/navigation';
 import * as React from 'react';
 import { RemoveScroll } from 'react-remove-scroll';
@@ -28,6 +29,8 @@ export function NavbarMobile({
 }: React.HTMLAttributes<HTMLDivElement>) {
   const [open, setOpen] = React.useState<boolean>(false);
   const pathname = usePathname();
+  const { data: session, error } = authClient.useSession();
+  const user = session?.user;
 
   React.useEffect(() => {
     const handleRouteChangeStart = () => {
@@ -71,7 +74,9 @@ export function NavbarMobile({
 
         {/* navbar right shows menu icon */}
         <div className="flex items-center gap-4">
-          <UserButton />
+          {/* show user button if user is logged in */}
+          {user ? <UserButton /> : null}
+
           <Button
             variant="ghost"
             size="icon"
diff --git a/src/components/layout/navbar.tsx b/src/components/layout/navbar.tsx
index cb965ab..3c4bfb8 100644
--- a/src/components/layout/navbar.tsx
+++ b/src/components/layout/navbar.tsx
@@ -24,9 +24,8 @@ import { LocaleLink } from '@/i18n/navigation';
 import { authClient } from '@/lib/auth-client';
 import { cn } from '@/lib/utils';
 import { Routes } from '@/routes';
-import { useTranslations } from "next-intl";
 import { ArrowUpRightIcon } from 'lucide-react';
-import Link from 'next/link';
+import { useTranslations } from "next-intl";
 import { usePathname } from 'next/navigation';
 
 interface NavBarProps {
@@ -138,7 +137,7 @@ export function Navbar({ scroll }: NavBarProps) {
                           "data-[active]:text-primary data-[active]:font-bold dark:data-[active]:text-white"
                         )}
                       >
-                        <Link
+                        <LocaleLink
                           href={item.href || '#'}
                           target={item.external ? '_blank' : undefined}
                           rel={
@@ -146,7 +145,7 @@ export function Navbar({ scroll }: NavBarProps) {
                           }
                         >
                           {item.title}
-                        </Link>
+                        </LocaleLink>
                       </NavigationMenuLink>
                     </NavigationMenuItem>
                   )
diff --git a/src/components/layout/user-button.tsx b/src/components/layout/user-button.tsx
index 1a063ac..8d83a11 100644
--- a/src/components/layout/user-button.tsx
+++ b/src/components/layout/user-button.tsx
@@ -31,6 +31,7 @@ export function UserButton() {
   const t = useTranslations();
   const translator = createTranslator(t);
   const avatarLinks = getAvatarLinks(translator);
+  const commonTranslations = useTranslations("Common");
 
   const handleSignOut = async () => {
     await authClient.signOut({
@@ -68,7 +69,8 @@ export function UserButton() {
         </DrawerTrigger>
         <DrawerPortal>
           <DrawerOverlay className="fixed inset-0 z-40 bg-background/50" />
-          <DrawerContent className="fixed inset-x-0 bottom-0 z-50 mt-24 overflow-hidden rounded-t-[10px] border bg-background px-3 text-sm">
+          <DrawerContent className="fixed inset-x-0 bottom-0 z-50 mt-24 
+            overflow-hidden rounded-t-[10px] border bg-background px-3 text-sm">
             <DrawerHeader>
               <DrawerTitle />
             </DrawerHeader>
@@ -118,7 +120,7 @@ export function UserButton() {
                   className="flex w-full items-center gap-3 px-2.5 py-2"
                 >
                   <LogOutIcon className="size-4" />
-                  <p className="text-sm">Log out</p>
+                  <p className="text-sm">{commonTranslations("logout")}</p>
                 </a>
               </li>
             </ul>
@@ -154,7 +156,6 @@ export function UserButton() {
         {avatarLinks.map((item) => (
           <DropdownMenuItem
             key={item.title}
-            asChild
             className="cursor-pointer"
             onClick={() => {
               if (item.href) {
@@ -180,7 +181,7 @@ export function UserButton() {
         >
           <div className="flex items-center space-x-2.5">
             <LogOutIcon className="size-4" />
-            <p className="text-sm">Log out</p>
+            <p className="text-sm">{commonTranslations("logout")}</p>
           </div>
         </DropdownMenuItem>
       </DropdownMenuContent>