@@ -34,8 +34,6 @@ const UserProfileSection = ({ isCollapsed, user }) => {
3434 const { isPro, plan } = usePlan ( )
3535 useClickOutside ( userMenuRef , ( ) => setUserMenuOpen ( false ) )
3636
37- // FIX: Removed the redundant and conflicting declaration of 'isPro'.
38- // The 'isPro' constant from the usePlan() hook is the correct one to use.
3937 const planName = isPro ? "Pro" : "Basic"
4038
4139 const dashboardUrl = process . env . NEXT_PUBLIC_LANDING_PAGE_URL
@@ -74,8 +72,8 @@ const UserProfileSection = ({ isCollapsed, user }) => {
7472 exit = { { opacity : 0 , width : 0 } }
7573 className = "overflow-hidden whitespace-nowrap"
7674 >
77- < p className = "font-semibold text-sm text-white" >
78- { user ?. name || "User" }
75+ < p className = "font-semibold text-sm text-white truncate " >
76+ { user ?. given_name || user ?. name || "User" }
7977 </ p >
8078 < span
8179 className = { cn (
@@ -233,12 +231,9 @@ const SidebarContent = ({
233231 user
234232} ) => {
235233 const pathname = usePathname ( )
236- const [ userDetails , setUserDetails ] = useState ( null )
237234 const [ isHelpMenuOpen , setHelpMenuOpen ] = useState ( false )
238235 const [ isVideoModalOpen , setVideoModalOpen ] = useState ( false )
239- const [ isUserMenuOpen , setUserMenuOpen ] = useState ( false )
240236 const router = useRouter ( )
241- const userMenuRef = useRef ( null )
242237
243238 // CHANGED: Use the environment variable for the namespace
244239 const { isPro } = usePlan ( )
@@ -504,73 +499,7 @@ const SidebarContent = ({
504499 </ span >
505500 ) }
506501 </ a >
507- < div
508- className = { cn (
509- "flex items-center justify-between bg-neutral-800/40 border border-neutral-700/80 rounded-lg p-1.5" ,
510- isCollapsed && "flex-col gap-2"
511- ) }
512- >
513- < Link
514- href = "/settings"
515- className = { cn (
516- "flex items-center gap-2 p-1 rounded-md hover:bg-neutral-800/80 flex-grow" ,
517- isCollapsed ? "w-full justify-center" : ""
518- ) }
519- >
520- { userDetails ?. picture ? (
521- < img
522- src = { userDetails . picture }
523- alt = "User"
524- className = "w-7 h-7 rounded-full flex-shrink-0"
525- />
526- ) : (
527- < div className = "w-7 h-7 rounded-full bg-neutral-700 flex items-center justify-center flex-shrink-0" >
528- < IconUser size = { 16 } />
529- </ div >
530- ) }
531- { ! isCollapsed && (
532- < span className = "font-semibold text-sm text-white whitespace-nowrap" >
533- { userDetails ?. given_name || "User" }
534- </ span >
535- ) }
536- </ Link >
537- { ! isCollapsed && (
538- < div className = "relative" ref = { userMenuRef } >
539- < button
540- onClick = { ( ) => setUserMenuOpen ( ! isUserMenuOpen ) }
541- className = "p-2 rounded-md hover:bg-neutral-700 text-neutral-400 hover:text-white"
542- >
543- < IconDots size = { 16 } />
544- </ button >
545- < AnimatePresence >
546- { isUserMenuOpen && (
547- < motion . div
548- initial = { {
549- opacity : 0 ,
550- y : 10 ,
551- scale : 0.95
552- } }
553- animate = { { opacity : 1 , y : 0 , scale : 1 } }
554- exit = { {
555- opacity : 0 ,
556- y : 10 ,
557- scale : 0.95
558- } }
559- className = "absolute bottom-full right-0 mb-2 w-40 bg-neutral-900/80 backdrop-blur-md border border-neutral-700 rounded-lg shadow-lg p-1 z-50"
560- >
561- < Link
562- href = "/auth/logout"
563- className = "w-full flex items-center gap-2 text-left px-3 py-2 text-sm rounded-md text-red-400 hover:bg-red-500/20 hover:text-red-300 transition-colors"
564- >
565- < IconLogout size = { 16 } />
566- < span > Logout</ span >
567- </ Link >
568- </ motion . div >
569- ) }
570- </ AnimatePresence >
571- </ div >
572- ) }
573- </ div >
502+ < UserProfileSection isCollapsed = { isCollapsed } user = { user } />
574503 </ div >
575504 </ div >
576505 )
0 commit comments