second iteration of the new sidebar

frontend/src/layouts/AppLayout/AppLayout.tsx

@@ -10,12 +10,14 @@ import crypto from "crypto";
 import { useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { faAngleDown, faBookOpen, faMobile, faPlus, faQuestion } from "@fortawesome/free-solid-svg-icons";
+import { faGithub, faSlack } from "@fortawesome/free-brands-svg-icons";
+import { faAngleDown, faArrowLeft, faArrowUpRightFromSquare, faBook, faCheck, faEnvelope, faMobile, faPlus, faQuestion } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { yupResolver } from "@hookform/resolvers/yup";
-import queryString from "query-string";
+import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
 import * as yup from "yup";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
@@ -25,6 +27,9 @@ import { encryptAssymmetric } from "@app/components/utilities/cryptography/crypt
 import {
   Button,
   Checkbox,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
   FormControl,
   Input,
   Menu,
@@ -37,16 +42,35 @@ import {
 } from "@app/components/v2";
 import { useOrganization, useSubscription, useUser, useWorkspace } from "@app/context";
 import { usePopUp } from "@app/hooks";
-import { fetchOrgUsers, useAddUserToWs, useCreateWorkspace, useUploadWsKey } from "@app/hooks/api";
-import getOrganizations from "@app/pages/api/organization/getOrgs";
-import getOrganizationUserProjects from "@app/pages/api/organization/GetOrgUserProjects";
-
-import { Navbar } from "./components/NavBar";
+import { fetchOrgUsers, useAddUserToWs, useCreateWorkspace, useLogoutUser, useUploadWsKey } from "@app/hooks/api";
 
 interface LayoutProps {
   children: React.ReactNode;
 }
 
+const supportOptions = [
+  [
+    <FontAwesomeIcon key={1} className="pr-4 text-sm" icon={faSlack} />,
+    "Support Forum",
+    "https://infisical.com/slack"
+  ],
+  [
+    <FontAwesomeIcon key={2} className="pr-4 text-sm" icon={faBook} />,
+    "Read Docs",
+    "https://infisical.com/docs/documentation/getting-started/introduction"
+  ],
+  [
+    <FontAwesomeIcon key={3} className="pr-4 text-sm" icon={faGithub} />,
+    "GitHub Issues",
+    "https://github.com/Infisical/infisical/issues"
+  ],
+  [
+    <FontAwesomeIcon key={4} className="pr-4 text-sm" icon={faEnvelope} />,
+    "Email Support",
+    "mailto:[email protected]"
+  ]
+];
+
 const formSchema = yup.object({
   name: yup.string().required().label("Project Name").trim(),
   addMembers: yup.bool().required().label("Add Members")
@@ -60,9 +84,10 @@ export const AppLayout = ({ children }: LayoutProps) => {
 
   // eslint-disable-next-line prefer-const
   const { workspaces, currentWorkspace } = useWorkspace();
-  const { currentOrg } = useOrganization();
+  const { orgs, currentOrg } = useOrganization();
   const { user } = useUser();
   const { subscription } = useSubscription();
+  const [ isLearningNoteOpen, setIsLearningNoteOpen ] = useState(true);
 
   const isAddingProjectsAllowed = subscription?.workspaceLimit ? (subscription.workspacesUsed < subscription.workspaceLimit) : true;
 
@@ -83,10 +108,6 @@ export const AppLayout = ({ children }: LayoutProps) => {
     resolver: yupResolver(formSchema)
   });
 
-  const [workspaceMapping, setWorkspaceMapping] = useState<Map<string, string>[]>([]);
-  const [workspaceSelected, setWorkspaceSelected] = useState("∞");
-  const [totalOnboardingActionsDone, setTotalOnboardingActionsDone] = useState(0);
-
   const { t } = useTranslation();
 
 	useEffect(() => {
@@ -101,111 +122,71 @@ export const AppLayout = ({ children }: LayoutProps) => {
 		};
 	}, []);
 
+  const logout = useLogoutUser();
+  const logOutUser = async () => {
+    try {
+      console.log("Logging out...")
+      await logout.mutateAsync();
+      localStorage.removeItem("protectedKey");
+      localStorage.removeItem("protectedKeyIV");
+      localStorage.removeItem("protectedKeyTag");
+      localStorage.removeItem("publicKey");
+      localStorage.removeItem("encryptedPrivateKey");
+      localStorage.removeItem("iv");
+      localStorage.removeItem("tag");
+      localStorage.removeItem("PRIVATE_KEY");
+      localStorage.removeItem("orgData.id");
+      localStorage.removeItem("projectData.id");
+      router.push("/login");
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
   // TODO(akhilmhdh): This entire logic will be rechecked and will try to avoid
   // Placing the localstorage as much as possible
   // Wait till tony integrates the azure and its launched
   useEffect(() => {
-    // Put a user in a workspace if they're not in one yet
 
-    const putUserInWorkSpace = async () => {
+    // Put a user in an org if they're not in one yet
+    const putUserInOrg = async () => {
       if (tempLocalStorage("orgData.id") === "") {
-        const userOrgs = await getOrganizations();
-        localStorage.setItem("orgData.id", userOrgs[0]?._id);
+        localStorage.setItem("orgData.id", orgs[0]?._id);
       }
 
-      const orgUserProjects = await getOrganizationUserProjects({
-        orgId: tempLocalStorage("orgData.id")
-      });
-      const userWorkspaces = orgUserProjects;
-      if (
-        (userWorkspaces?.length === 0 &&
-          router.asPath !== "/noprojects" &&
-          !router.asPath.includes("home") &&
-          !router.asPath.includes("settings")) ||
-        router.asPath === "/dashboard/undefined"
-      ) {
-        router.push("/noprojects");
-      } else if (router.asPath !== "/noprojects") {
-        // const pathSegments = router.asPath.split('/').filter(segment => segment.length > 0);
+      if (currentOrg && (
+        (workspaces?.length === 0 && !router.asPath.includes("org") && !router.asPath.includes("personal") && !router.asPath.includes("integration")) 
+        || router.asPath.includes("/project/undefined")
+        || !orgs?.includes(router.query.id)
+      )) {
+        router.push(`/org/${currentOrg?._id}/overview`);
+      } 
+      // else if (!router.asPath.includes("org") && !router.asPath.includes("project") && !router.asPath.includes("integrations") && !router.asPath.includes("personal-settings")) {
 
-        // let intendedWorkspaceId;
-        // if (pathSegments.length >= 2 && pathSegments[0] === 'dashboard') {
-        //   intendedWorkspaceId = pathSegments[1];
-        // } else if (pathSegments.length >= 3 && pathSegments[0] === 'settings') {
-        //   intendedWorkspaceId = pathSegments[2];
-        // } else {
-        //   intendedWorkspaceId = router.asPath
-        //     .split('/')
-        //     [router.asPath.split('/').length - 1].split('?')[0];
-        // }
+      //   const pathSegments = router.asPath.split("/").filter((segment) => segment.length > 0);
 
-        const pathSegments = router.asPath.split("/").filter((segment) => segment.length > 0);
+      //   let intendedWorkspaceId;
+      //   if (pathSegments.length >= 2 && pathSegments[0] === "dashboard") {
+      //     [, intendedWorkspaceId] = pathSegments;
+      //   } else if (pathSegments.length >= 3 && pathSegments[0] === "settings") {
+      //     [, , intendedWorkspaceId] = pathSegments;
+      //   } else {
+      //     const lastPathSegments = router.asPath.split("/").pop();
+      //     if (lastPathSegments !== undefined) {
+      //       [intendedWorkspaceId] = lastPathSegments.split("?");
+      //     }
+      //   }
 
-        let intendedWorkspaceId;
-        if (pathSegments.length >= 2 && pathSegments[0] === "dashboard") {
-          [, intendedWorkspaceId] = pathSegments;
-        } else if (pathSegments.length >= 3 && pathSegments[0] === "settings") {
-          [, , intendedWorkspaceId] = pathSegments;
-        } else {
-          const lastPathSegments = router.asPath.split("/").pop();
-          if (lastPathSegments !== undefined) {
-            [intendedWorkspaceId] = lastPathSegments.split("?");
-          }
+      //   if (!intendedWorkspaceId) return;
 
-          // const lastPathSegment = router.asPath.split('/').pop().split('?');
-          // [intendedWorkspaceId] = lastPathSegment;
-        }
-
-        if (!intendedWorkspaceId) return;
-
-        if (!["callback", "create", "authorize"].includes(intendedWorkspaceId)) {
-          localStorage.setItem("projectData.id", intendedWorkspaceId);
-        }
-
-        // If a user is not a member of a workspace they are trying to access, just push them to one of theirs
-        if (
-          !["callback", "create", "authorize"].includes(intendedWorkspaceId) &&
-          userWorkspaces[0]?._id !== undefined &&
-          !userWorkspaces
-            .map((workspace: { _id: string }) => workspace._id)
-            .includes(intendedWorkspaceId)
-        ) {
-          const { env } = queryString.parse(router.asPath.split("?")[1]);
-          if (!env) {
-            router.push(`/dashboard/${userWorkspaces[0]._id}`);
-          }
-        } else {
-          setWorkspaceMapping(
-            Object.fromEntries(
-              userWorkspaces.map((workspace: any) => [workspace.name, workspace._id])
-            ) as any
-          );
-          setWorkspaceSelected(
-            Object.fromEntries(
-              userWorkspaces.map((workspace: any) => [workspace._id, workspace.name])
-            )[router.asPath.split("/")[router.asPath.split("/").length - 1].split("?")[0]]
-          );
-        }
-      }
+      //   if (!["callback", "create", "authorize"].includes(intendedWorkspaceId)) {
+      //     localStorage.setItem("projectData.id", intendedWorkspaceId);
+      //   }
+      // }
     };
-    putUserInWorkSpace();
-    onboardingCheck({ setTotalOnboardingActionsDone });
-  }, [router.query.id]);
-
-  useEffect(() => {
-    try {
-      if (
-        workspaceMapping[workspaceSelected as any] &&
-        `${workspaceMapping[workspaceSelected as any]}` !==
-          router.asPath.split("/")[router.asPath.split("/").length - 1].split("?")[0]
-      ) {
-        localStorage.setItem("projectData.id", `${workspaceMapping[workspaceSelected as any]}`);
-        router.push(`/dashboard/${workspaceMapping[workspaceSelected as any]}`);
-      }
-    } catch (err) {
-      console.log(err);
-    }
-  }, [workspaceSelected]);
+    putUserInOrg();
+    onboardingCheck({});
+  }, [currentOrg]);
 
   const onCreateProject = async ({ name, addMembers }: TAddProjectFormData) => {
     // type check
@@ -247,7 +228,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
       }
       createNotification({ text: "Workspace created", type: "success" });
       handlePopUpClose("addNewWs");
-      router.push(`/dashboard/${newWorkspaceId}`);
+      router.push(`/project/${newWorkspaceId}/secrets`);
     } catch (err) {
       console.error(err);
       createNotification({ text: "Failed to create workspace", type: "error" });
@@ -257,20 +238,74 @@ export const AppLayout = ({ children }: LayoutProps) => {
   return (
     <>
       <div className="dark hidden h-screen w-full flex-col overflow-x-hidden md:flex">
-        {/* <Navbar /> */}
         <div className="flex flex-grow flex-col overflow-y-hidden md:flex-row">
-          <aside className="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">
+          <aside className="w-full border-r border-mineshaft-600 bg-gradient-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 md:w-60 dark">
+            <nav className="items-between flex h-full flex-col justify-between overflow-y-auto dark:[color-scheme:dark]">
               <div>
-                <div className="h-12 px-3 flex items-center pt-6 cursor-default">
-                  <div className="mr-auto flex items-center hover:bg-mineshaft-600 py-1.5 pl-1.5 pr-2 rounded-md">
-                    <div className="w-5 h-5 rounded-md bg-[#E0ED34] flex justify-center items-center">I</div>
-                    <div className="pl-3.5 text-mineshaft-100 text-sm">Infisical <FontAwesomeIcon icon={faAngleDown} className="text-xs pl-1 pt-1 text-mineshaft-300" /></div>
-                  </div>
-                  <div className="w-5 h-5 rounded-full bg-green hover:opacity-80 pr-1"></div>
-                </div>
-                {!router.asPath.includes("org") && (currentWorkspace && router.asPath !== "/noprojects" ? (
-                  <div className="mt-3 mb-4 w-full p-3">
+                {!router.asPath.includes("personal") && <div className="h-12 px-3 flex items-center pt-6 cursor-default">
+                  {(router.asPath.includes("project") || router.asPath.includes("integrations")) && <Link href={`/org/${currentOrg?._id}/overview`}><div className="pl-1 pr-2 text-mineshaft-400 hover:text-mineshaft-100 duration-200">
+                    <FontAwesomeIcon icon={faArrowLeft} />
+                  </div></Link>}
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild className="data-[state=open]:bg-mineshaft-600">
+                      <div className="mr-auto flex items-center hover:bg-mineshaft-600 py-1.5 pl-1.5 pr-2 rounded-md">
+                        <div className="w-5 h-5 rounded-md bg-primary flex justify-center items-center text-sm">{currentOrg?.name.charAt(0)}</div>
+                        <div className="pl-3 text-mineshaft-100 text-sm">{currentOrg?.name} <FontAwesomeIcon icon={faAngleDown} className="text-xs pl-1 pt-1 text-mineshaft-300" /></div>
+                      </div>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="start" className="p-1">
+                      <div className="text-xs text-mineshaft-400 px-2 py-1">{user?.email}</div>
+                      {orgs?.map(org => <DropdownMenuItem key={org._id}>
+                        <Link href={`/org/${org._id}/overview`}><div className="w-full flex justify-between items-center">{org.name}{currentOrg._id === org._id && <FontAwesomeIcon icon={faCheck} className="ml-auto text-primary"/>}</div></Link>
+                      </DropdownMenuItem>)}
+                      <div className="h-1 mt-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="data-[state=open]:bg-mineshaft-600 p-1">
+                      <div className="w-6 h-6 rounded-full bg-mineshaft hover:bg-mineshaft-400 pr-1 text-xs text-mineshaft-300 flex justify-center">
+                        {user?.firstName?.charAt(0)}{user?.lastName && user?.lastName?.charAt(0)}
+                      </div>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="start" className="p-1">
+                      <div className="text-xs text-mineshaft-400 px-2 py-1">{user?.email}</div>
+                      <Link href="/personal-settings"><DropdownMenuItem>Personal Settings</DropdownMenuItem></Link>
+                      <a
+                        href="https://infisical.com/docs/documentation/getting-started/introduction"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="w-full mt-3 text-sm text-mineshaft-300 font-normal leading-[1.2rem] hover:text-mineshaft-100"
+                      >
+                        <DropdownMenuItem>Documentation<FontAwesomeIcon icon={faArrowUpRightFromSquare} className="pl-1.5 text-xxs mb-[0.06rem]" /></DropdownMenuItem>
+                      </a>
+                      <a
+                        href="https://join.slack.com/t/infisical-users/shared_invite/zt-1ye0tm8ab-899qZ6ZbpfESuo6TEikyOQ"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="w-full mt-3 text-sm text-mineshaft-300 font-normal leading-[1.2rem] hover:text-mineshaft-100"
+                      >
+                        <DropdownMenuItem>Join Slack Community<FontAwesomeIcon icon={faArrowUpRightFromSquare} className="pl-1.5 text-xxs mb-[0.06rem]" /></DropdownMenuItem>
+                      </a>
+                      <div className="h-1 mt-1 border-t border-mineshaft-600"/>
+                      <button
+                        type="button"
+                        onClick={logOutUser}
+                        className="w-full"
+                      >
+                        <DropdownMenuItem>Log Out</DropdownMenuItem>
+                      </button>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </div>}
+                {!router.asPath.includes("org") && (!router.asPath.includes("personal") && currentWorkspace ? (
+                  <div className="mt-5 mb-4 w-full p-3">
                     <p className="ml-1.5 mb-1 text-xs font-semibold uppercase text-gray-400">
                       Project
                     </p>
@@ -279,7 +314,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
                       value={currentWorkspace?._id}
                       className="w-full truncate bg-mineshaft-600 py-2.5 font-medium"
                       onValueChange={(value) => {
-                        router.push(`/dashboard/${value}`);
+                        router.push(`/project/${value}/secrets`);
                       }}
                       position="popper"
                       dropdownContainerClassName="text-bunker-200 bg-mineshaft-800 border border-mineshaft-600 z-50 max-h-96 border-gray-700"
@@ -318,43 +353,26 @@ export const AppLayout = ({ children }: LayoutProps) => {
                       </div>
                     </Select>
                   </div>
-                ) : (
-                  <div className="mt-3 mb-4 w-full p-4">
-                    <Button
-                      className="border-mineshaft-500"
-                      colorSchema="primary"
-                      variant="outline_bg"
-                      size="sm"
-                      isFullWidth
-                      onClick={() => {
-                        if (isAddingProjectsAllowed) {
-                          handlePopUpOpen("addNewWs")
-                        } else {
-                          handlePopUpOpen("upgradePlan");
-                        }
-                      }}
-                      leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                    >
-                      Add Project
-                    </Button>
-                  </div>
-                ))}
-                <div className={`px-1 ${currentWorkspace && router.asPath !== "/noprojects" ? "block" : "hidden"}`}>
-                  {router.asPath.includes("project") ? <Menu>
-                    <Link href={`/dashboard/${currentWorkspace?._id}`} passHref>
+                ) : <div className="pr-2 my-6 flex justify-center items-center text-mineshaft-300 hover:text-mineshaft-100 cursor-default text-sm">
+                  <FontAwesomeIcon icon={faArrowLeft} className="pr-3"/>
+                  <Link href={`/org/${currentOrg?._id}/overview`}>Back to organization</Link>
+                </div>)}
+                <div className={`px-1 ${!router.asPath.includes("personal") ? "block" : "hidden"}`}>
+                  {((router.asPath.includes("project") || router.asPath.includes("integrations")) && currentWorkspace) ? <Menu>
+                    <Link href={`/project/${currentWorkspace?._id}/secrets`} passHref>
                       <a>
                         <MenuItem
-                          isSelected={router.asPath.includes(`/dashboard/${currentWorkspace?._id}`)}
+                          isSelected={router.asPath.includes(`/project/${currentWorkspace?._id}/secrets`)}
                           icon="system-outline-90-lock-closed"
                         >
                           {t("nav.menu.secrets")}
                         </MenuItem>
                       </a>
                     </Link>
-                    <Link href={`/users/${currentWorkspace?._id}`} passHref>
+                    <Link href={`/project/${currentWorkspace?._id}/members`} passHref>
                       <a>
                         <MenuItem
-                          isSelected={router.asPath === `/users/${currentWorkspace?._id}`}
+                          isSelected={router.asPath === `/project/${currentWorkspace?._id}/members`}
                           icon="system-outline-96-groups"
                         >
                           {t("nav.menu.members")}
@@ -371,20 +389,20 @@ export const AppLayout = ({ children }: LayoutProps) => {
                         </MenuItem>
                       </a>
                     </Link>
-                    <Link href={`/activity/${currentWorkspace?._id}`} passHref>
+                    <Link href={`/project/${currentWorkspace?._id}/audit-logs`} passHref>
                       <MenuItem
-                        isSelected={router.asPath === `/activity/${currentWorkspace?._id}`}
+                        isSelected={router.asPath === `/project/${currentWorkspace?._id}/audit-logs`}
                         // icon={<FontAwesomeIcon icon={faFileLines} size="lg" />}
                         icon="system-outline-168-view-headline"
                       >
                         Audit Logs
                       </MenuItem>
                     </Link>
-                    <Link href={`/settings/project/${currentWorkspace?._id}`} passHref>
+                    <Link href={`/project/${currentWorkspace?._id}/settings`} passHref>
                       <a>
                         <MenuItem
                           isSelected={
-                            router.asPath === `/settings/project/${currentWorkspace?._id}`
+                            router.asPath === `/project/${currentWorkspace?._id}/settings`
                           }
                           icon="system-outline-109-slider-toggle-settings"
                         >
@@ -394,50 +412,130 @@ export const AppLayout = ({ children }: LayoutProps) => {
                     </Link>
                   </Menu>
                   : <Menu className="mt-4">
-                      <Link href={`/dashboard/${currentWorkspace?._id}`} passHref>
+                      <Link href={`/org/${currentOrg?._id}/overview`} passHref>
                         <a>
                           <MenuItem
-                            isSelected={router.asPath.includes(`/dashboard/${currentWorkspace?._id}`)}
-                            icon="system-outline-90-lock-closed"
+                            isSelected={router.asPath.includes("/overview")}
+                            icon="system-outline-165-view-carousel"
                           >
                             Overview
                           </MenuItem>
                         </a>
                       </Link>
-                      <Link href={`/users/${currentWorkspace?._id}`} passHref>
+                      {/* {workspaces.map(project => <Link key={project._id} href={`/project/${project?._id}/secrets`} passHref>
+                        <a>
+                          <SubMenuItem
+                            isSelected={false}
+                            icon="system-outline-44-folder"
+                          >
+                            {project.name}
+                          </SubMenuItem>
+                        </a>
+                        <div className="pl-8 text-mineshaft-300 text-sm py-1 cursor-default hover:text-mineshaft-100">
+                          <FontAwesomeIcon icon={faFolder} className="text-xxs pr-0.5"/> {project.name} <FontAwesomeIcon icon={faArrowRight} className="text-xs pl-0.5"/>
+                        </div>
+                      </Link>)} */}
+                      <Link href={`/org/${currentOrg?._id}/members`} passHref>
                         <a>
                           <MenuItem
-                            isSelected={router.asPath === `/users/${currentWorkspace?._id}`}
+                            isSelected={router.asPath === `/org/${currentOrg?._id}/members`}
                             icon="system-outline-96-groups"
                           >
-                            {t("nav.menu.members")}
+                            Organization Members
                           </MenuItem>
                         </a>
                       </Link>
-                      <Link href={`/settings/project/${currentWorkspace?._id}`} passHref>
+                      <Link href={`/org/${currentOrg?._id}/billing`} passHref>
+                        <a>
+                          <MenuItem
+                            isSelected={router.asPath === `/org/${currentOrg?._id}/billing`}
+                            icon="system-outline-103-coin-cash-monetization"
+                          >
+                            Usage & Billing
+                          </MenuItem>
+                        </a>
+                      </Link>
+                      <Link href={`/org/${currentOrg?._id}/settings`} passHref>
                         <a>
                           <MenuItem
                             isSelected={
-                              router.asPath === `/settings/project/${currentWorkspace?._id}`
+                              router.asPath === `/org/${currentOrg?._id}/settings`
                             }
                             icon="system-outline-109-slider-toggle-settings"
                           >
-                            Org Setting
+                            Organization Settings
                           </MenuItem>
                         </a>
                       </Link>
                   </Menu>}
                 </div>
               </div>
-              <div className="mt-40 mb-4 w-full px-2 text-mineshaft-400 cursor-default pl-6 text-sm">
-                <div className="hover:text-mineshaft-200 duration-200 mb-3">
-                  <FontAwesomeIcon icon={faPlus} className="mr-3"/>
-                  Invite people
-                </div>
-                <div className="hover:text-mineshaft-200 duration-200 mb-2">
-                  <FontAwesomeIcon icon={faQuestion} className="px-[0.1rem] mr-3"/>
-                  Help & Support
+              <div className="relative mt-10 mb-4 w-full px-3 text-mineshaft-400 cursor-default text-sm flex flex-col items-center">
+                <div className={`${isLearningNoteOpen ? "block" : "hidden"} z-0 absolute h-60 w-[9.9rem] ${router.asPath.includes("org") ? "bottom-[5.4rem]" : "bottom-[3.4rem]"} bg-mineshaft-900 border border-mineshaft-600 mb-4 rounded-md opacity-30`}/>
+                <div className={`${isLearningNoteOpen ? "block" : "hidden"} z-0 absolute h-60 w-[10.7rem] ${router.asPath.includes("org") ? "bottom-[5.15rem]" : "bottom-[3.15rem]"} bg-mineshaft-900 border border-mineshaft-600 mb-4 rounded-md opacity-50`}/>
+                <div className={`${isLearningNoteOpen ? "block" : "hidden"} z-0 absolute h-60 w-[11.5rem] ${router.asPath.includes("org") ? "bottom-[4.9rem]" : "bottom-[2.9rem]"} bg-mineshaft-900 border border-mineshaft-600 mb-4 rounded-md opacity-70`}/>
+                <div className={`${isLearningNoteOpen ? "block" : "hidden"} z-0 absolute h-60 w-[12.3rem] ${router.asPath.includes("org") ? "bottom-[4.65rem]" : "bottom-[2.65rem]"} bg-mineshaft-900 border border-mineshaft-600 mb-4 rounded-md opacity-90`}/>
+                <div className={`${isLearningNoteOpen ? "block" : "hidden"} relative z-10 h-60 w-52 bg-mineshaft-900 border border-mineshaft-600 mb-6 rounded-md flex flex-col items-center justify-start px-3`}>
+                  <div className="w-full mt-2 text-md text-mineshaft-100 font-semibold">Kubernetes Operator</div>
+                  <div className="w-full mt-1 text-sm text-mineshaft-300 font-normal leading-[1.2rem] mb-1">Integrate Infisical into your Kubernetes infrastructure</div>
+                  <div className="h-[6.8rem] w-full bg-mineshaft-200 rounded-md mt-2 rounded-md border border-mineshaft-700"> 
+                    <Image src="/images/kubernetes-asset.png" height={319} width={539} alt="kubernetes image" className="rounded-sm" />
+                  </div>
+                  <div className="w-full flex justify-between items-center mt-3 px-0.5">
+                    <button
+                      type="button"
+                      onClick={() => setIsLearningNoteOpen(false)}
+                      className="text-mineshaft-400 hover:text-mineshaft-100 duration-200"
+                    >
+                      Close
+                    </button>
+                    <a
+                      href="https://infisical.com/docs/documentation/getting-started/kubernetes"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-sm text-mineshaft-400 font-normal leading-[1.2rem] hover:text-mineshaft-100 duration-200"
+                    >
+                      Learn More <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="text-xs pl-0.5"/>
+                    </a>
+                  </div>
                 </div>
+                {router.asPath.includes("org") && <div
+                  onKeyDown={() => null}
+                  role="button"
+                  tabIndex={0}
+                  onClick={() => router.push(`/org/${router.query.id}/members?action=invite`)}
+                  className="w-full"
+                >
+                  <div className="hover:text-mineshaft-200 duration-200 mb-3 pl-5 w-full">
+                    <FontAwesomeIcon icon={faPlus} className="mr-3"/>
+                    Invite people
+                  </div>
+                </div>}
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <div className="hover:text-mineshaft-200 duration-200 mb-2 pl-5 w-full">
+                      <FontAwesomeIcon icon={faQuestion} className="px-[0.1rem] mr-3"/>
+                      Help & Support
+                    </div>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="start" className="p-1">
+                    {supportOptions.map(([icon, text, url]) => (
+                      <DropdownMenuItem key={url}>
+                        <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>
+                    ))}
+                  </DropdownMenuContent>
+                </DropdownMenu>
               </div>
             </nav>
           </aside>