improve nav bar

2026-09-22 13:39:35 +00:00 · 2025-10-17 16:07:24 -07:00
parent 66b4da50ba
commit 75d40e1308
6 changed files with 33 additions and 21 deletions
--- a/frontend/src/components/v2/Badge/Badge.tsx
+++ b/frontend/src/components/v2/Badge/Badge.tsx
@@ -20,11 +20,11 @@ const badgeVariants = cva(
        success: "bg-green/20 text-green",
        org: "bg-org-v1/20 text-org-v1 [&_svg]:text-org-v1 flex items-center opacity-100 hover:bg-org-v1/10 [&_svg]:size-3 gap-x-1 w-min whitespace-nowrap",
        namespace:
-          "bg-namespace-v1/20 text-namespace-v1 [&_svg]:text-namespace-v1 flex opacity-100 hover:bg-namespace-v1/10 items-center [&_svg]:size-3.5 gap-x-1 w-min whitespace-nowrap",
+          "bg-namespace-v1/20 text-namespace-v1 [&_svg]:text-namespace-v1 flex opacity-100 hover:bg-namespace-v1/10 items-center [&_svg]:size-3.5 gap-x-1.5 w-min whitespace-nowrap",
        project:
-          "bg-primary/10 text-primary [&_svg]:text-primary opacity-100 hover:bg-primary/10 flex items-center [&_svg]:size-3 w-min gap-x-1 whitespace-nowrap",
+          "bg-primary/10 text-primary [&_svg]:text-primary opacity-100 hover:bg-primary/10 flex items-center [&_svg]:size-3 w-min gap-x-1.5 whitespace-nowrap",
        instance:
-          "bg-mineshaft-200/20 text-mineshaft-200 [&_svg]:text-mineshaft-200 opacity-100 hover:bg-mineshaft-200/20 flex items-center [&_svg]:size-3 gap-x-1 w-min whitespace-nowrap"
+          "bg-mineshaft-200/20 text-mineshaft-200 [&_svg]:text-mineshaft-200 opacity-100 hover:bg-mineshaft-200/20 flex items-center [&_svg]:size-3 gap-x-1.5 w-min whitespace-nowrap"
      }
    }
  }
--- a/frontend/src/components/v2/PageHeader/PageHeader.tsx
+++ b/frontend/src/components/v2/PageHeader/PageHeader.tsx
@@ -18,12 +18,12 @@ type Props = {

 const SCOPE_NAME: Record<NonNullable<Props["scope"]>, { label: string; icon: IconDefinition }> = {
  org: { label: "Organization", icon: faGlobe },
-  [ProjectType.SecretManager]: { label: "Secrets Management", icon: faCube },
-  [ProjectType.CertificateManager]: { label: "PKI", icon: faCube },
-  [ProjectType.SSH]: { label: "SSH", icon: faCube },
-  [ProjectType.KMS]: { label: "KMS", icon: faCube },
-  [ProjectType.PAM]: { label: "PAM", icon: faCube },
-  [ProjectType.SecretScanning]: { label: "Secret Scanning", icon: faCube },
+  [ProjectType.SecretManager]: { label: "Project", icon: faCube },
+  [ProjectType.CertificateManager]: { label: "Project", icon: faCube },
+  [ProjectType.SSH]: { label: "Project", icon: faCube },
+  [ProjectType.KMS]: { label: "Project", icon: faCube },
+  [ProjectType.PAM]: { label: "Project", icon: faCube },
+  [ProjectType.SecretScanning]: { label: "Project", icon: faCube },
  namespace: { label: "Namespace", icon: faCubes },
  instance: { label: "Server", icon: faServer }
 };
--- a/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx
+++ b/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx
@@ -242,7 +242,8 @@ export const Navbar = () => {
                      variant="org"
                      className={twMerge(
                        "max-w-full min-w-0 cursor-pointer text-sm",
-                        !isOrgScope && "bg-transparent opacity-75"
+                        !isOrgScope &&
+                          "bg-transparent text-mineshaft-200 hover:bg-transparent hover:underline"
                      )}
                    >
                      <FontAwesomeIcon icon={faGlobe} />
@@ -349,7 +350,7 @@ export const Navbar = () => {
                <p className="pr-3 pl-1 text-lg text-mineshaft-400/70">/</p>
                {breadcrumbs ? (
                  <BreadcrumbContainer
-                    className="min-w-[10rem] flex-1"
+                    className="min-w-[15rem] flex-1"
                    breadcrumbs={[breadcrumbs[0]] as TBreadcrumbFormat[]}
                  />
                ) : null}
--- a/frontend/src/layouts/PersonalSettingsLayout/PersonalSettingsLayout.tsx
+++ b/frontend/src/layouts/PersonalSettingsLayout/PersonalSettingsLayout.tsx
@@ -1,10 +1,7 @@
 import { useTranslation } from "react-i18next";
-import { faArrowLeft, faMobile } from "@fortawesome/free-solid-svg-icons";
+import { faMobile } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Link, Outlet } from "@tanstack/react-router";
-
-import { WishForm } from "@app/components/features/WishForm";
-import { Navbar } from "@app/layouts/OrganizationLayout/components/NavBar";
+import { Outlet } from "@tanstack/react-router";

 import { InsecureConnectionBanner } from "../OrganizationLayout/components/InsecureConnectionBanner";

--- a/frontend/src/layouts/ProjectLayout/components/ProjectSelect/ProjectSelect.tsx
+++ b/frontend/src/layouts/ProjectLayout/components/ProjectSelect/ProjectSelect.tsx
@@ -35,10 +35,19 @@ import {
 import { getProjectHomePage } from "@app/helpers/project";
 import { usePopUp } from "@app/hooks";
 import { useGetUserProjects } from "@app/hooks/api";
-import { Project } from "@app/hooks/api/projects/types";
+import { Project, ProjectType } from "@app/hooks/api/projects/types";
 import { useUpdateUserProjectFavorites } from "@app/hooks/api/users/mutation";
 import { useGetUserProjectFavorites } from "@app/hooks/api/users/queries";

+const PROJECT_TYPE_NAME: Record<ProjectType, string> = {
+  [ProjectType.SecretManager]: "Secrets Management",
+  [ProjectType.CertificateManager]: "PKI",
+  [ProjectType.SSH]: "SSH",
+  [ProjectType.KMS]: "KMS",
+  [ProjectType.PAM]: "PAM",
+  [ProjectType.SecretScanning]: "Secret Scanning"
+};
+
 export const ProjectSelect = () => {
  const [searchProject, setSearchProject] = useState("");
  const { currentProject: currentWorkspace } = useProject();
@@ -106,11 +115,16 @@ export const ProjectSelect = () => {
          params={{
            projectId: currentWorkspace.id
          }}
-          className="overflow-hidden"
+          className="group flex cursor-pointer items-center gap-x-1.5 overflow-hidden hover:text-white"
        >
-          <Badge variant="project" className="max-w-full min-w-0 cursor-pointer text-sm">
+          <p className="inline-block truncate text-mineshaft-200 group-hover:underline">
+            {currentWorkspace?.name}
+          </p>
+          <Badge variant="project" className="cursor-pointer">
            <FontAwesomeIcon icon={faCube} />
-            <p className="truncate">{currentWorkspace?.name}</p>
+            <span>
+              {currentWorkspace.type ? PROJECT_TYPE_NAME[currentWorkspace.type] : "Project"}
+            </span>
          </Badge>
        </Link>
        <DropdownMenuTrigger asChild>
--- a/frontend/src/pages/public/ErrorPage/ErrorPage.tsx
+++ b/frontend/src/pages/public/ErrorPage/ErrorPage.tsx
@@ -17,7 +17,7 @@ export const ErrorPage = ({ error }: ErrorComponentProps) => {
  }

  return (
-    <div className="flex h-screen w-screen items-center justify-center bg-mineshaft-900">
+    <div className="flex h-full items-center justify-center">
      <div className="flex max-w-3xl flex-col rounded-md border border-mineshaft-600 bg-mineshaft-800 p-8 text-center text-mineshaft-200">
        <FontAwesomeIcon icon={faBugs} className="my-2 inline text-6xl" />
        <p>