From c9485124fc1c476b18a35e1d7ea3c2f961daf991 Mon Sep 17 00:00:00 2001
From: Pragyanand Sahoo <pragyanandasaho@gmail.com>
Date: Thu, 10 Oct 2024 15:49:30 +0530
Subject: [PATCH] feat: Add profile on mobile top nav (#2236)

* Feature/Add profile on mobile top nav

* Update mobile-sidebar.tsx

* Update user-button.tsx

* [autofix.ci] apply automated fixes

* Update user-button.tsx

* Update user-button.tsx

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 apps/dashboard/app/(app)/mobile-sidebar.tsx | 15 ++++++----
 apps/dashboard/app/(app)/user-button.tsx    | 33 ++++++++++++++++-----
 2 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/apps/dashboard/app/(app)/mobile-sidebar.tsx b/apps/dashboard/app/(app)/mobile-sidebar.tsx
index fe5445fcd3..56cfc43a4a 100644
--- a/apps/dashboard/app/(app)/mobile-sidebar.tsx
+++ b/apps/dashboard/app/(app)/mobile-sidebar.tsx
@@ -10,6 +10,7 @@ import { Menu } from "lucide-react";
 import Link from "next/link";
 import { useSelectedLayoutSegments } from "next/navigation";
 import { WorkspaceSwitcher } from "./team-switcher";
+import { UserButton } from "./user-button";
 
 type Props = {
   className?: string;
@@ -23,17 +24,19 @@ type Props = {
 
 export const MobileSideBar = ({ className, workspace }: Props) => {
   const segments = useSelectedLayoutSegments() ?? [];
-
   const workspaceNavigation = createWorkspaceNavigation(workspace, segments);
 
   return (
-    <div className={cn(className, "w-96")}>
+    <div className={cn(className, "w-full")}>
       <Sheet>
         <div className="flex items-center justify-between w-full p-4 gap-6">
-          <SheetTrigger>
-            <Menu className="w-6 h-6 " />
-          </SheetTrigger>
-          <WorkspaceSwitcher />
+          <div className={cn(className, "w-96 flex items-center justify-between py-4 gap-6")}>
+            <SheetTrigger>
+              <Menu className="w-6 h-6 " />
+            </SheetTrigger>
+            <WorkspaceSwitcher />
+          </div>
+          <UserButton />
         </div>
         <SheetHeader>
           <SheetClose />
diff --git a/apps/dashboard/app/(app)/user-button.tsx b/apps/dashboard/app/(app)/user-button.tsx
index 1f4f12b8c9..24e452ed38 100644
--- a/apps/dashboard/app/(app)/user-button.tsx
+++ b/apps/dashboard/app/(app)/user-button.tsx
@@ -15,6 +15,7 @@ import { Book, ChevronRight, LogOut, Rocket, Settings } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import type React from "react";
+
 export const UserButton: React.FC = () => {
   const { user } = useUser();
   const router = useRouter();
@@ -25,17 +26,35 @@ export const UserButton: React.FC = () => {
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger className="flex items-center justify-between gap-2 p-2 w-full h-12 rounded-[0.625rem] hover:bg-background-subtle hover:cursor-pointer text-content">
-        <div className="flex items-center gap-2 whitespace-nowrap overflow-hidden">
-          <Avatar className="w-5 h-5">
+      <DropdownMenuTrigger className="flex items-center justify-between gap-2 p-2 w-auto lg:w-full h-12 rounded-lg hover:bg-background-subtle hover:cursor-pointer text-content ">
+        <div className="flex items-center gap-2 overflow-hidden whitespace-nowrap">
+          <Tooltip>
+            <TooltipTrigger
+              className="w-full overflow-hidden text-ellipsis hidden sm:inline lg:hidden"
+              asChild
+            >
+              <span className="overflow-hidden text-ellipsis text-sm font-medium">
+                {user.username ?? user.fullName ?? user.primaryEmailAddress?.emailAddress}
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>
+              <span className="text-sm font-medium">
+                {user.username ?? user.fullName ?? user.primaryEmailAddress?.emailAddress}
+              </span>
+            </TooltipContent>
+          </Tooltip>
+          <Avatar className="w-8 h-8 lg:w-5 lg:h-5">
             {user.imageUrl ? <AvatarImage src={user.imageUrl} alt="Profile picture" /> : null}
-            <AvatarFallback className=" w-5 h-5 overflow-hidden text-gray-700 bg-gray-100 border border-gray-500 rounded-md">
+            <AvatarFallback className="w-8 h-8 lg:w-5 lg:h-5 bg-gray-100 border border-gray-500 rounded-md">
               {(user?.fullName ?? "U").slice(0, 2).toUpperCase()}
             </AvatarFallback>
           </Avatar>
 
           <Tooltip>
-            <TooltipTrigger asChild>
+            <TooltipTrigger
+              className="hidden lg:inline w-full overflow-hidden text-ellipsis"
+              asChild
+            >
               <span className="overflow-hidden text-ellipsis text-sm font-medium">
                 {user.username ?? user.fullName ?? user.primaryEmailAddress?.emailAddress}
               </span>
@@ -47,9 +66,9 @@ export const UserButton: React.FC = () => {
             </TooltipContent>
           </Tooltip>
         </div>
-        <ChevronRight className="w-4 h-4" />
+        <ChevronRight className="hidden lg:inline w-4 h-4" />
       </DropdownMenuTrigger>
-      <DropdownMenuContent side="right" className="w-96">
+      <DropdownMenuContent side="bottom" className="w-full max-w-xs md:w-96">
         <DropdownMenuGroup>
           <Link href="/new">
             <DropdownMenuItem className="cursor-pointer">