feat: completed all nav restructing and breadcrumbs cleanup

2026-10-17 01:12:59 +00:00 · 2025-01-20 22:58:59 +05:30
parent 9df8cf60ef
commit 01ae19fa2b
55 changed files with 1249 additions and 780 deletions
@@ -1,55 +0,0 @@
-import { ComponentPropsWithRef, ElementType, useRef } from "react";
-import { DotLottie, DotLottieReact } from "@lottiefiles/dotlottie-react";
-
-import { MenuItemProps } from "@app/components/v2";
-import { twMerge } from "tailwind-merge";
-
-export const MenuIconButton = <T extends ElementType = "button">({
-  children,
-  icon,
-  className,
-  isDisabled,
-  isSelected,
-  as: Item = "button",
-  description,
-  // wrapping in forward ref with generic component causes the loss of ts definitions on props
-  inputRef,
-  ...props
-}: MenuItemProps<T> & ComponentPropsWithRef<T>): JSX.Element => {
-  const iconRef = useRef<DotLottie | null>(null);
-  return (
-    <Item
-      type="button"
-      role="menuitem"
-      className={twMerge(
-        "duration-50 group relative flex w-full cursor-pointer flex-col items-center justify-center rounded p-2 font-inter text-sm text-bunker-100 transition-all hover:bg-mineshaft-700",
-        isSelected && "bg-bunker-800 hover:bg-mineshaft-600",
-        isDisabled && "cursor-not-allowed hover:bg-transparent",
-        className
-      )}
-      onMouseEnter={() => iconRef.current?.play()}
-      onMouseLeave={() => iconRef.current?.stop()}
-      ref={inputRef}
-      {...props}
-    >
-      <div
-        className={`${
-          isSelected ? "visisble" : "invisible"
-        } absolute -left-[0.28rem] h-full w-[0.07rem] rounded-md bg-primary`}
-      />
-      {icon && (
-        <div className="my-auto mb-2 h-6 w-6">
-          <DotLottieReact
-            dotLottieRefCallback={(el) => {
-              iconRef.current = el;
-            }}
-            src={`/lotties/${icon}.json`}
-            loop
-            className="h-full w-full"
-          />
-        </div>
-      )}
-      <span className="flex-grow break-words text-center text-xxs">{children}</span>
-    </Item>
-  );
-};
@@ -1 +0,0 @@
-export { MenuIconButton } from "./MenuIconButton";
@@ -1,13 +1,10 @@
 import { faGithub, faSlack } from "@fortawesome/free-brands-svg-icons";
 import {
-  faAnglesLeft,
-  faAnglesRight,
  faArrowUpRightFromSquare,
  faBook,
  faEnvelope,
  faInfinity,
  faInfo,
-  faInfoCircle,
  faPlus,
  faQuestion,
  faUser
@@ -20,15 +17,12 @@ import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
-  DropdownMenuTrigger,
-  MenuItem
+  DropdownMenuTrigger
 } from "@app/components/v2";
 import { envConfig } from "@app/config/env";
 import { useOrganization, useSubscription, useUser } from "@app/context";
 import { useGetOrgTrialUrl, useLogoutUser } from "@app/hooks/api";

-import { MenuIconButton } from "../MenuIconButton";
-
 export const INFISICAL_SUPPORT_OPTIONS = [
  [
    <FontAwesomeIcon key={1} className="pr-4 text-sm" icon={faSlack} />,
@@ -52,12 +46,7 @@ export const INFISICAL_SUPPORT_OPTIONS = [
  ]
 ];

-type Props = {
-  isCollapsed?: boolean;
-  onToggleSidebar: () => void;
-};
-
-export const SidebarFooter = ({ isCollapsed, onToggleSidebar }: Props) => {
+export const SidebarFooter = () => {
  const { subscription } = useSubscription();
  const { currentOrg } = useOrganization();

@@ -82,38 +71,28 @@ export const SidebarFooter = ({ isCollapsed, onToggleSidebar }: Props) => {
        subscription && subscription.slug === "starter" && !subscription.has_used_trial
          ? "mb-2"
          : "mb-4"
-      } flex w-full cursor-default flex-col items-center ${isCollapsed ? "px-1" : "px-2"} text-sm text-mineshaft-400`}
+      } flex w-full cursor-default flex-col items-center px-2 text-sm text-mineshaft-400`}
    >
      {(window.location.origin.includes("https://app.infisical.com") ||
-        window.location.origin.includes("https://gamma.infisical.com")) &&
-        !isCollapsed && <WishForm />}
-      {!isCollapsed && (
-        <Link
-          to="/organization/access-management"
-          search={{
-            action: "invite"
-          }}
-          className="w-full"
-        >
-          <div className="mb-3 w-full pl-2 duration-200 hover:text-mineshaft-200">
-            <FontAwesomeIcon icon={faPlus} className="mr-3" />
-            Invite people
-          </div>
-        </Link>
-      )}
+        window.location.origin.includes("https://gamma.infisical.com")) && <WishForm />}
+      <Link
+        to="/organization/access-management"
+        search={{
+          action: "invite"
+        }}
+        className="w-full"
+      >
+        <div className="mb-3 w-full pl-2 duration-200 hover:text-mineshaft-200">
+          <FontAwesomeIcon icon={faPlus} className="mr-3" />
+          Invite people
+        </div>
+      </Link>
      <DropdownMenu>
        <DropdownMenuTrigger className="w-full">
-          {isCollapsed ? (
-            <MenuIconButton>
-              <FontAwesomeIcon icon={faInfoCircle} className="mb-3 text-lg" />
-              Support
-            </MenuIconButton>
-          ) : (
-            <div className="mb-4 flex w-full items-center pl-2 duration-200 hover:text-mineshaft-200">
-              <FontAwesomeIcon icon={faQuestion} className="mr-3 px-[0.1rem]" />
-              Help & Support
-            </div>
-          )}
+          <div className="mb-4 flex w-full items-center pl-2 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]) => (
@@ -161,39 +140,19 @@ export const SidebarFooter = ({ isCollapsed, onToggleSidebar }: Props) => {
          </div>
        </button>
      )}
-      {isCollapsed ? (
-        <MenuIconButton onClick={onToggleSidebar} className="p-4">
-          <FontAwesomeIcon icon={faAnglesRight} className="text-lg" />
-        </MenuIconButton>
-      ) : (
-        <MenuItem onClick={onToggleSidebar} className="mb-2 w-full px-2 text-mineshaft-400">
-          <FontAwesomeIcon icon={faAnglesLeft} className="mr-3" />
-          Collapse
-        </MenuItem>
-      )}
      <DropdownMenu>
-        <DropdownMenuTrigger className="w-full">
-          {isCollapsed ? (
+        <DropdownMenuTrigger asChild className="w-full">
+          <div className="flex w-full cursor-pointer items-center rounded-md border border-mineshaft-600 p-2 px-1">
+            <div className="mr-2 flex h-6 w-6 items-center justify-center rounded-md bg-primary text-sm uppercase">
+              {user?.firstName?.charAt(0)}
+            </div>
+            <div className="max-w-40 flex-grow truncate text-ellipsis text-left text-sm capitalize text-white">
+              {user?.firstName} {user?.lastName}
+            </div>
            <div>
-              <MenuIconButton>
-                <div className="my-1 flex h-6 w-6 items-center justify-center rounded-md bg-primary text-sm uppercase text-black">
-                  {user?.firstName?.charAt(0)}
-                </div>
-              </MenuIconButton>
+              <FontAwesomeIcon icon={faUser} className="text-xs text-mineshaft-400" />
            </div>
-          ) : (
-            <div className="flex w-full cursor-pointer items-center rounded-md border border-mineshaft-600 p-2 px-1">
-              <div className="mr-2 flex h-6 w-6 items-center justify-center rounded-md bg-primary text-sm uppercase">
-                {user?.firstName?.charAt(0)}
-              </div>
-              <div className="max-w-40 flex-grow truncate text-ellipsis text-left text-sm capitalize text-white">
-                {user?.firstName} {user?.lastName}
-              </div>
-              <div>
-                <FontAwesomeIcon icon={faUser} className="text-xs text-mineshaft-400" />
-              </div>
-            </div>
-          )}
+          </div>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="start" className="p-1">
          <div className="px-2 py-1 text-xs text-mineshaft-400">{user?.username}</div>
@@ -1,4 +1,4 @@
-import { faCheck, faSort } from "@fortawesome/free-solid-svg-icons";
+import { faCheck, faSignOut, faSort } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate } from "@tanstack/react-router";

@@ -12,14 +12,12 @@ import {
 import { useOrganization } from "@app/context";
 import { useGetOrganizations, useLogoutUser } from "@app/hooks/api";
 import { AuthMethod } from "@app/hooks/api/users/types";
-import { twMerge } from "tailwind-merge";

 type Prop = {
  onChangeOrg: (orgId: string) => void;
-  isCollapsed?: boolean;
 };

-export const SidebarHeader = ({ onChangeOrg, isCollapsed }: Prop) => {
+export const SidebarHeader = ({ onChangeOrg }: Prop) => {
  const { currentOrg } = useOrganization();
  const navigate = useNavigate();
  const { data: orgs } = useGetOrganizations();
@@ -36,38 +34,20 @@ export const SidebarHeader = ({ onChangeOrg, isCollapsed }: Prop) => {
  };

  return (
-    <div
-      className={twMerge(
-        "flex cursor-pointer items-center p-2 pt-4",
-        isCollapsed && "transition-all duration-150 hover:bg-mineshaft-700"
-      )}
-    >
+    <div className="flex cursor-pointer items-center p-2 pt-4">
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
-          <div
-            className={twMerge(
-              "flex w-full items-center justify-center rounded-md border border-mineshaft-600 p-1 transition-all",
-              isCollapsed ? "border-none" : "transition-all duration-150 hover:bg-mineshaft-700"
-            )}
-          >
-            {isCollapsed ? (
-              <div className="flex h-8 w-8 items-center justify-center rounded-md bg-primary">
-                {currentOrg?.name.charAt(0)}
+          <div className="flex w-full items-center justify-center rounded-md border border-mineshaft-600 p-1 transition-all duration-150 hover:bg-mineshaft-700">
+            <div className="mr-2 flex h-8 w-8 items-center justify-center rounded-md bg-primary">
+              {currentOrg?.name.charAt(0)}
+            </div>
+            <div className="flex flex-grow flex-col text-white">
+              <div className="max-w-36 truncate text-ellipsis text-sm font-medium capitalize">
+                {currentOrg?.name}
              </div>
-            ) : (
-              <>
-                <div className="mr-2 flex h-8 w-8 items-center justify-center rounded-md bg-primary">
-                  {currentOrg?.name.charAt(0)}
-                </div>
-                <div className="flex flex-grow flex-col text-white">
-                  <div className="max-w-36 truncate text-ellipsis text-sm font-medium capitalize">
-                    {currentOrg?.name}
-                  </div>
-                  <div className="text-xs text-mineshaft-400">Free Plan</div>
-                </div>
-                <FontAwesomeIcon icon={faSort} className="text-xs text-mineshaft-400" />
-              </>
-            )}
+              <div className="text-xs text-mineshaft-400">Free Plan</div>
+            </div>
+            <FontAwesomeIcon icon={faSort} className="text-xs text-mineshaft-400" />
          </div>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="start" className="p-1">
@@ -113,139 +93,11 @@ export const SidebarHeader = ({ onChangeOrg, isCollapsed }: Prop) => {
            );
          })}
          <div className="mt-1 h-1 border-t border-mineshaft-600" />
-          <button type="button" onClick={logOutUser} className="w-full">
-            <DropdownMenuItem>Log Out</DropdownMenuItem>
-          </button>
+          <DropdownMenuItem onClick={logOutUser} icon={<FontAwesomeIcon icon={faSignOut} />}>
+            Log Out
+          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
 };
-
-// <DropdownMenu>
-//   <DropdownMenuTrigger asChild className="max-w-[160px] data-[state=open]:bg-mineshaft-600">
-//     <div className="mr-auto flex items-center rounded-md py-1.5 pl-1.5 pr-2 hover:bg-mineshaft-600">
-//       <div className="flex h-5 w-5 min-w-[20px] items-center justify-center rounded-md bg-primary text-sm">
-//         {currentOrg?.name.charAt(0)}
-//       </div>
-//       <div
-//         className="overflow-hidden truncate text-ellipsis pl-2 text-sm text-mineshaft-100"
-//         style={{ maxWidth: "140px" }}
-//       >
-//         {currentOrg?.name}
-//       </div>
-//       <FontAwesomeIcon icon={faAngleDown} className="pl-1 pt-1 text-xs text-mineshaft-300" />
-//     </div>
-//   </DropdownMenuTrigger>
-//   <DropdownMenuContent align="start" className="p-1">
-//     <div className="px-2 py-1 text-xs text-mineshaft-400">{user?.username}</div>
-//     {orgs?.map((org) => {
-//       return (
-//         <DropdownMenuItem key={org.id}>
-//           <Button
-//             onClick={async () => {
-//               if (currentOrg?.id === org.id) return;
-//
-//               if (org.authEnforced) {
-//                 // org has an org-level auth method enabled (e.g. SAML)
-//                 // -> logout + redirect to SAML SSO
-//
-//                 await logout.mutateAsync();
-//                 if (org.orgAuthMethod === AuthMethod.OIDC) {
-//                   window.open(`/api/v1/sso/oidc/login?orgSlug=${org.slug}`);
-//                 } else {
-//                   window.open(`/api/v1/sso/redirect/saml2/organizations/${org.slug}`);
-//                 }
-//                 window.close();
-//                 return;
-//               }
-//
-//               onChangeOrg(org?.id);
-//             }}
-//             variant="plain"
-//             colorSchema="secondary"
-//             size="xs"
-//             className="flex w-full items-center justify-start p-0 font-normal"
-//             leftIcon={
-//               currentOrg?.id === org.id && (
-//                 <FontAwesomeIcon icon={faCheck} className="mr-3 text-primary" />
-//               )
-//             }
-//           >
-//             <div className="flex w-full max-w-[150px] items-center justify-between truncate">
-//               {org.name}
-//             </div>
-//           </Button>
-//         </DropdownMenuItem>
-//       );
-//     })}
-//     <div className="mt-1 h-1 border-t border-mineshaft-600" />
-//     <button type="button" onClick={logOutUser} className="w-full">
-//       <DropdownMenuItem>Log Out</DropdownMenuItem>
-//     </button>
-//   </DropdownMenuContent>
-// </DropdownMenu>
-// <DropdownMenu>
-//   <DropdownMenuTrigger
-//     asChild
-//     className="p-1 hover:bg-primary-400 hover:text-black data-[state=open]:bg-primary-400 data-[state=open]:text-black"
-//   >
-//     <div
-//       className="child flex items-center justify-center rounded-full bg-mineshaft pr-1 text-mineshaft-300 hover:bg-mineshaft-500"
-//       style={{ fontSize: "11px", width: "26px", height: "26px" }}
-//     >
-//       {user?.firstName?.charAt(0)}
-//       {user?.lastName && user?.lastName?.charAt(0)}
-//     </div>
-//   </DropdownMenuTrigger>
-//   <DropdownMenuContent align="start" className="p-1">
-//     <div className="px-2 py-1 text-xs text-mineshaft-400">{user?.username}</div>
-//     <Link to="/personal-settings">
-//       <DropdownMenuItem>Personal Settings</DropdownMenuItem>
-//     </Link>
-//     <a
-//       href="https://infisical.com/docs/documentation/getting-started/introduction"
-//       target="_blank"
-//       rel="noopener noreferrer"
-//       className="mt-3 w-full text-sm font-normal leading-[1.2rem] text-mineshaft-300 hover:text-mineshaft-100"
-//     >
-//       <DropdownMenuItem>
-//         Documentation
-//         <FontAwesomeIcon
-//           icon={faArrowUpRightFromSquare}
-//           className="mb-[0.06rem] pl-1.5 text-xxs"
-//         />
-//       </DropdownMenuItem>
-//     </a>
-//     <a
-//       href="https://infisical.com/slack"
-//       target="_blank"
-//       rel="noopener noreferrer"
-//       className="mt-3 w-full text-sm font-normal leading-[1.2rem] text-mineshaft-300 hover:text-mineshaft-100"
-//     >
-//       <DropdownMenuItem>
-//         Join Slack Community
-//         <FontAwesomeIcon
-//           icon={faArrowUpRightFromSquare}
-//           className="mb-[0.06rem] pl-1.5 text-xxs"
-//         />
-//       </DropdownMenuItem>
-//     </a>
-//     {user?.superAdmin && (
-//       <Link to="/admin">
-//         <DropdownMenuItem className="mt-1 border-t border-mineshaft-600">
-//           Server Admin Console
-//         </DropdownMenuItem>
-//       </Link>
-//     )}
-//     <Link to="/organization/admin">
-//       <DropdownMenuItem className="mt-1 border-t border-mineshaft-600">
-//         Organization Admin Console
-//       </DropdownMenuItem>
-//     </Link>
-//     <div className="mt-1 h-1 border-t border-mineshaft-600" />
-//     <button type="button" onClick={logOutUser} className="w-full">
-//       <DropdownMenuItem>Log Out</DropdownMenuItem>
-//     </button>
-//   </DropdownMenuContent>
-// </DropdownMenu>
				`@@ -1 +0,0 @@`
				`export { MenuIconButton } from "./MenuIconButton";`