From 2352bca03ee4f23ca99f0bcde1365f5af988a45f Mon Sep 17 00:00:00 2001
From: = <akhilmhdh@gmail.com>
Date: Sat, 28 Jun 2025 23:06:38 +0530
Subject: [PATCH] feat: resolved sidebar alignment issue of server admin

---
 frontend/src/layouts/AdminLayout/Sidebar.tsx | 70 +++++---------------
 1 file changed, 18 insertions(+), 52 deletions(-)

diff --git a/frontend/src/layouts/AdminLayout/Sidebar.tsx b/frontend/src/layouts/AdminLayout/Sidebar.tsx
index df2ab9c68..ee6e18784 100644
--- a/frontend/src/layouts/AdminLayout/Sidebar.tsx
+++ b/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 {
-  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";
+import { Menu, MenuGroup, MenuItem } from "@app/components/v2";
 
 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">
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <div className="mb-2 w-full pl-5 duration-200 hover:text-mineshaft-200">
-                <FontAwesomeIcon icon={faQuestion} className="mr-3 px-[0.1rem]" />
-                Help & Support
-              </div>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="start" className="p-1">
-              {INFISICAL_SUPPORT_OPTIONS.map(([icon, text, url]) => (
-                <DropdownMenuItem key={url as string}>
-                  <a
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    href={String(url)}
-                    className="flex w-full items-center rounded-md font-normal text-mineshaft-300 duration-200"
-                  >
-                    <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>
+        <Menu>
+          <Link to="/organization/projects">
+            <MenuItem
+              className="relative flex items-center gap-2 overflow-hidden text-sm text-mineshaft-400 hover:text-mineshaft-300"
+              leftIcon={
+                <FontAwesomeIcon
+                  className="mx-1 inline-block shrink-0"
+                  icon={faChevronLeft}
+                  flip="vertical"
+                />
+              }
+            >
+              Back to organization
+            </MenuItem>
+          </Link>
+        </Menu>
       </nav>
     </aside>
   );