chore: optimize user button

src/components/layout/navbar-mobile.tsx

@@ -26,6 +26,7 @@ import { useTranslations } from 'next-intl';
 import * as React from 'react';
 import { RemoveScroll } from 'react-remove-scroll';
 import { UserButton } from './user-button';
+import { useEffect } from 'react';
 
 export function NavbarMobile({
   className,
@@ -37,7 +38,7 @@ export function NavbarMobile({
   const user = session?.user;
   const t = useTranslations();
 
-  React.useEffect(() => {
+  useEffect(() => {
     const handleRouteChangeStart = () => {
       if (document.activeElement instanceof HTMLInputElement) {
         document.activeElement.blur();
@@ -54,7 +55,7 @@ export function NavbarMobile({
     setOpen((open) => (open ? !mediaQueryList.matches : false));
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     handleChange();
     const mediaQueryList = window.matchMedia('(min-width: 1024px)');
     mediaQueryList.addEventListener('change', handleChange);
@@ -82,7 +83,7 @@ export function NavbarMobile({
         {/* navbar right shows menu icon */}
         <div className="flex items-center justify-end gap-4">
           {/* show user button if user is logged in */}
-          {user ? <UserButton /> : null}
+          {user ? <UserButton user={user} /> : null}
 
           <Button
             variant="ghost"

src/components/layout/navbar.tsx

@@ -40,7 +40,7 @@ const customNavigationMenuTriggerStyle = cn(
 
 export function Navbar({ scroll }: NavBarProps) {
   const scrolled = useScroll(50);
-  const { data: session, error } = authClient.useSession();
+  const { data: session } = authClient.useSession();
   const user = session?.user;
   const t = useTranslations();
   const menuLinks = getMenuLinks();
@@ -205,9 +205,7 @@ export function Navbar({ scroll }: NavBarProps) {
           {/* navbar right show sign in or user */}
           <div className="flex items-center gap-x-4">
             {user ? (
-              <div className="flex items-center">
-                <UserButton />
-              </div>
+              <UserButton user={user} />
             ) : (
               <div className="flex items-center gap-x-4">
                 <LoginWrapper mode="modal" asChild>

src/components/layout/user-button.tsx

@@ -21,13 +21,16 @@ import { getAvatarLinks } from '@/config';
 import { useMediaQuery } from '@/hooks/use-media-query';
 import { LocaleLink, useLocaleRouter } from '@/i18n/navigation';
 import { authClient } from '@/lib/auth-client';
+import { User } from 'better-auth';
 import { LogOutIcon } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
 
-export function UserButton() {
-  const { data: session } = authClient.useSession();
-  const user = session?.user;
+interface UserButtonProps {
+  user: User;
+}
+
+export function UserButton({ user }: UserButtonProps) {
   const t = useTranslations();
   const avatarLinks = getAvatarLinks();
   const localeRouter = useLocaleRouter();
@@ -36,8 +39,6 @@ export function UserButton() {
     setOpen(false);
   };
 
-  const { isMobile } = useMediaQuery();
-
   const handleSignOut = async () => {
     await authClient.signOut({
       fetchOptions: {
@@ -53,9 +54,7 @@ export function UserButton() {
     });
   };
 
-  if (!user) {
-    return null;
-  }
+  const { isMobile } = useMediaQuery();
 
   // Mobile View, use Drawer
   if (isMobile) {