feat: resolved sidebar alignment issue of server admin

frontend/src/layouts/AdminLayout/Sidebar.tsx

@@ -1,19 +1,8 @@
-import { faArrowLeft, faInfo, faQuestion } from "@fortawesome/free-solid-svg-icons";
+import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Link, useMatchRoute } from "@tanstack/react-router";
 
-import {
+import { Menu, MenuGroup, MenuItem } from "@app/components/v2";
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-  Menu,
-  MenuGroup,
-  MenuItem
-} from "@app/components/v2";
-import { envConfig } from "@app/config/env";
-
-import { INFISICAL_SUPPORT_OPTIONS } from "../OrganizationLayout/components/NavBar/Navbar";
 
 const generalTabs = [
   {
@@ -73,12 +62,6 @@ export const AdminSidebar = () => {
     <aside className="dark w-full border-r border-mineshaft-600 bg-gradient-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 md:w-60">
       <nav className="items-between flex h-full flex-col justify-between overflow-y-auto dark:[color-scheme:dark]">
         <div className="flex-grow">
-          <Link to="/organization/projects">
-            <div className="my-6 flex cursor-default items-center justify-center pr-2 text-sm text-mineshaft-300 hover:text-mineshaft-100">
-              <FontAwesomeIcon icon={faArrowLeft} className="pr-3" />
-              Back to organization
-            </div>
-          </Link>
           <Menu>
             <MenuGroup title="General">
               {generalTabs.map((tab) => {
@@ -102,39 +85,22 @@ export const AdminSidebar = () => {
             </MenuGroup>
           </Menu>
         </div>
-        <div className="relative mb-4 mt-10 flex w-full cursor-default flex-col items-center px-3 text-sm text-mineshaft-400">
+        <Menu>
-          <DropdownMenu>
+          <Link to="/organization/projects">
-            <DropdownMenuTrigger asChild>
+            <MenuItem
-              <div className="mb-2 w-full pl-5 duration-200 hover:text-mineshaft-200">
+              className="relative flex items-center gap-2 overflow-hidden text-sm text-mineshaft-400 hover:text-mineshaft-300"
-                <FontAwesomeIcon icon={faQuestion} className="mr-3 px-[0.1rem]" />
+              leftIcon={
-                Help & Support
+                <FontAwesomeIcon
-              </div>
+                  className="mx-1 inline-block shrink-0"
-            </DropdownMenuTrigger>
+                  icon={faChevronLeft}
-            <DropdownMenuContent align="start" className="p-1">
+                  flip="vertical"
-              {INFISICAL_SUPPORT_OPTIONS.map(([icon, text, url]) => (
+                />
-                <DropdownMenuItem key={url as string}>
+              }
-                  <a
+            >
-                    target="_blank"
+              Back to organization
-                    rel="noopener noreferrer"
+            </MenuItem>
-                    href={String(url)}
+          </Link>
-                    className="flex w-full items-center rounded-md font-normal text-mineshaft-300 duration-200"
+        </Menu>
-                  >
-                    <div className="relative flex w-full cursor-pointer select-none items-center justify-start rounded-md">
-                      {icon}
-                      <div className="text-sm">{text}</div>
-                    </div>
-                  </a>
-                </DropdownMenuItem>
-              ))}
-              {envConfig.PLATFORM_VERSION && (
-                <div className="mb-2 mt-2 w-full cursor-default pl-5 text-sm duration-200 hover:text-mineshaft-200">
-                  <FontAwesomeIcon icon={faInfo} className="mr-4 px-[0.1rem]" />
-                  Version: {envConfig.PLATFORM_VERSION}
-                </div>
-              )}
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
       </nav>
     </aside>
   );