fix nav

frontend/src/components/v2/Dropdown/Dropdown.tsx

@@ -20,7 +20,7 @@ export const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuConten
     return (
       <DropdownMenuPrimitive.Portal>
         <DropdownMenuPrimitive.Content
-          sideOffset={10}
+          sideOffset={-8}
           {...props}
           ref={forwardedRef}
           className={twMerge(

frontend/src/layouts/OrganizationLayout/components/MinimizedOrgSidebar/MinimizedOrgSidebar.tsx

@@ -166,8 +166,12 @@ export const MinimizedOrgSidebar = () => {
           <div>
             <div className="flex items-center hover:bg-mineshaft-700">
               <DropdownMenu open={openOrg} onOpenChange={setOpenOrg} modal>
-                <DropdownMenuTrigger onMouseEnter={() => setOpenOrg(true)} onMouseLeave={() => setOpenOrg(false)} asChild>
+                <DropdownMenuTrigger
-                  <div className="flex w-full items-center justify-center rounded-md border border-none border-mineshaft-600 p-3 pt-6 pb-5 transition-all">
+                  onMouseEnter={() => setOpenOrg(true)}
+                  onMouseLeave={() => setOpenOrg(false)}
+                  asChild
+                >
+                  <div className="flex w-full items-center justify-center rounded-md border border-none border-mineshaft-600 p-3 pb-5 pt-6 transition-all">
                     <div className="flex h-8 w-8 items-center justify-center rounded-md bg-primary">
                       {currentOrg?.name.charAt(0)}
                     </div>
@@ -178,11 +182,11 @@ export const MinimizedOrgSidebar = () => {
                   onMouseLeave={() => setOpenOrg(false)}
                   align="start"
                   side="right"
-                  className="p-1 shadow-mineshaft-600 drop-shadow-md cursor-default mt-6"
+                  className="mt-6 cursor-default p-1 shadow-mineshaft-600 drop-shadow-md"
                   style={{ minWidth: "220px" }}
                 >
                   <div className="px-0.5 py-1">
-                    <div className="flex w-full items-center justify-center rounded-md border border-mineshaft-600 p-1 transition-all duration-300 bg-gradient-to-tr from-primary-500/5 to-mineshaft-800">
+                    <div className="flex w-full items-center justify-center rounded-md border border-mineshaft-600 bg-gradient-to-tr from-primary-500/5 to-mineshaft-800 p-1 transition-all duration-300">
                       <div className="mr-2 flex h-8 w-8 items-center justify-center rounded-md bg-primary text-black">
                         {currentOrg?.name.charAt(0)}
                       </div>
@@ -315,7 +319,11 @@ export const MinimizedOrgSidebar = () => {
               </Link>
               <div className="my-1 w-full bg-mineshaft-500" style={{ height: "1px" }} />
               <DropdownMenu open={open} onOpenChange={setOpen}>
-                <DropdownMenuTrigger onMouseEnter={() => setOpen(true)} onMouseLeave={() => setOpen(false)} asChild>
+                <DropdownMenuTrigger
+                  onMouseEnter={() => setOpen(true)}
+                  onMouseLeave={() => setOpen(false)}
+                  asChild
+                >
                   <div className="w-full">
                     <MenuIconButton
                       lottieIconMode="reverse"
@@ -326,7 +334,13 @@ export const MinimizedOrgSidebar = () => {
                     </MenuIconButton>
                   </div>
                 </DropdownMenuTrigger>
-                <DropdownMenuContent onMouseEnter={() => setOpen(true)} onMouseLeave={() => setOpen(false)} align="start" side="right" className="p-1">
+                <DropdownMenuContent
+                  onMouseEnter={() => setOpen(true)}
+                  onMouseLeave={() => setOpen(false)}
+                  align="start"
+                  side="right"
+                  className="p-1"
+                >
                   <DropdownMenuLabel>Organization Options</DropdownMenuLabel>
                   <Link to="/organization/access-management">
                     <DropdownMenuItem icon={<FontAwesomeIcon className="w-3" icon={faUsers} />}>
@@ -371,13 +385,23 @@ export const MinimizedOrgSidebar = () => {
             } flex w-full cursor-default flex-col items-center px-1 text-sm text-mineshaft-400`}
           >
             <DropdownMenu open={openSupport} onOpenChange={setOpenSupport}>
-              <DropdownMenuTrigger onMouseEnter={() => setOpenSupport(true)} onMouseLeave={() => setOpenSupport(false)} className="w-full">
+              <DropdownMenuTrigger
+                onMouseEnter={() => setOpenSupport(true)}
+                onMouseLeave={() => setOpenSupport(false)}
+                className="w-full"
+              >
                 <MenuIconButton>
                   <FontAwesomeIcon icon={faInfoCircle} className="mb-3 text-lg" />
                   Support
                 </MenuIconButton>
               </DropdownMenuTrigger>
-              <DropdownMenuContent onMouseEnter={() => setOpenSupport(true)} onMouseLeave={() => setOpenSupport(false)} align="end" side="right" className="p-1">
+              <DropdownMenuContent
+                onMouseEnter={() => setOpenSupport(true)}
+                onMouseLeave={() => setOpenSupport(false)}
+                align="end"
+                side="right"
+                className="p-1"
+              >
                 {INFISICAL_SUPPORT_OPTIONS.map(([icon, text, url]) => (
                   <DropdownMenuItem key={url as string}>
                     <a
@@ -426,16 +450,27 @@ export const MinimizedOrgSidebar = () => {
               </Tooltip>
             )}
             <DropdownMenu open={openUser} onOpenChange={setOpenUser}>
-              <DropdownMenuTrigger onMouseEnter={() => setOpenUser(true)} onMouseLeave={() => setOpenUser(false)} className="w-full" asChild>
+              <DropdownMenuTrigger
+                onMouseEnter={() => setOpenUser(true)}
+                onMouseLeave={() => setOpenUser(false)}
+                className="w-full"
+                asChild
+              >
                 <div>
                   <MenuIconButton icon="user">User</MenuIconButton>
                 </div>
               </DropdownMenuTrigger>
-              <DropdownMenuContent onMouseEnter={() => setOpenUser(true)} onMouseLeave={() => setOpenUser(false)} side="right" align="end" className="p-1">
+              <DropdownMenuContent
-                <div className="px-1 py-1 cursor-default">
+                onMouseEnter={() => setOpenUser(true)}
-                  <div className="flex w-full items-center justify-center rounded-md border border-mineshaft-600 p-1 px-2 transition-all duration-150 bg-gradient-to-tr from-primary-500/10 to-mineshaft-800">
+                onMouseLeave={() => setOpenUser(false)}
+                side="right"
+                align="end"
+                className="p-1"
+              >
+                <div className="cursor-default px-1 py-1">
+                  <div className="flex w-full items-center justify-center rounded-md border border-mineshaft-600 bg-gradient-to-tr from-primary-500/10 to-mineshaft-800 p-1 px-2 transition-all duration-150">
                     <div className="p-1 pr-3">
-                      <FontAwesomeIcon icon={faUser} className="text-mineshaft-400 text-xl" />
+                      <FontAwesomeIcon icon={faUser} className="text-xl text-mineshaft-400" />
                     </div>
                     <div className="flex flex-grow flex-col text-white">
                       <div className="max-w-36 truncate text-ellipsis text-sm font-medium capitalize">
@@ -483,11 +518,9 @@ export const MinimizedOrgSidebar = () => {
                     </DropdownMenuItem>
                   </Link>
                 )}
-                <div className="pt-1 mt-1 border-t border-mineshaft-600">
+                <div className="mt-1 border-t border-mineshaft-600 pt-1">
                   <Link to="/organization/admin">
-                    <DropdownMenuItem>
+                    <DropdownMenuItem>Organization Admin Console</DropdownMenuItem>
-                      Organization Admin Console
-                    </DropdownMenuItem>
                   </Link>
                 </div>
                 <div className="mt-1 h-1 border-t border-mineshaft-600" />