style: implement new navigation

frontend/src/pages/ssh/SettingsPage/SettingsPage.tsx

@@ -16,16 +16,20 @@ export const SettingsPage = () => {
       <Helmet>
         <title>{t("common.head-title", { title: t("settings.project.title") })}</title>
       </Helmet>
-      <div className="w-full max-w-7xl">
+      <div className="w-full max-w-8xl">
         <PageHeader
           scope="project"
           title="Settings"
           description="Configure your SSH product's configurations."
         />
-        <Tabs defaultValue="tab-project-general">
+        <Tabs orientation="vertical" defaultValue="tab-project-general">
           <TabList>
-            <Tab value="tab-project-general">General</Tab>
-            <Tab value="tab-ssh-settings">SSH Settings</Tab>
+            <Tab variant="project" value="tab-project-general">
+              General
+            </Tab>
+            <Tab variant="project" value="tab-ssh-settings">
+              SSH Settings
+            </Tab>
           </TabList>
           <TabPanel value="tab-project-general">
             <ProjectGeneralTab />

frontend/src/pages/ssh/SshCaByIDPage/SshCaByIDPage.tsx

@@ -1,5 +1,7 @@
 import { Helmet } from "react-helmet";
-import { useNavigate, useParams } from "@tanstack/react-router";
+import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Link, useNavigate, useParams } from "@tanstack/react-router";
 import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
@@ -67,10 +69,24 @@ const Page = () => {
   };
 
   return (
-    <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+    <div className="mx-auto flex flex-col justify-between bg-bunker-800 text-white">
       {data && (
-        <div className="mx-auto mb-6 w-full max-w-7xl">
-          <PageHeader scope="project" title={data.friendlyName}>
+        <div className="mx-auto mb-6 w-full max-w-8xl">
+          <Link
+            to="/projects/ssh/$projectId/cas"
+            params={{
+              projectId
+            }}
+            className="mb-4 flex items-center gap-x-2 text-sm text-mineshaft-400"
+          >
+            <FontAwesomeIcon icon={faChevronLeft} />
+            Certificate Authorities
+          </Link>
+          <PageHeader
+            scope="project"
+            description="Configure Certificate Authority"
+            title={data.friendlyName}
+          >
             <DropdownMenu>
               <DropdownMenuTrigger asChild className="rounded-lg">
                 <div className="hover:text-primary-400 data-[state=open]:text-primary-400">

frontend/src/pages/ssh/SshCasPage/SshCasPage.tsx

@@ -13,8 +13,8 @@ export const SshCasPage = () => {
         <title>{t("common.head-title", { title: "SSH" })}</title>
       </Helmet>
       <div className="h-full bg-bunker-800">
-        <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
-          <div className="mx-auto mb-6 w-full max-w-7xl">
+        <div className="mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+          <div className="mx-auto mb-6 w-full max-w-8xl">
             <PageHeader
               scope="project"
               title="SSH Certificate Authorities"

frontend/src/pages/ssh/SshCertsPage/SshCertsPage.tsx

@@ -13,8 +13,8 @@ export const SshCertsPage = () => {
         <title>{t("common.head-title", { title: "Certificates" })}</title>
       </Helmet>
       <div className="h-full bg-bunker-800">
-        <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
-          <div className="mx-auto mb-6 w-full max-w-7xl">
+        <div className="mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+          <div className="mx-auto mb-6 w-full max-w-8xl">
             <PageHeader
               scope="project"
               title="SSH Certificates"

frontend/src/pages/ssh/SshHostGroupDetailsByIDPage/SshHostGroupDetailsByIDPage.tsx

@@ -1,6 +1,8 @@
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
-import { useNavigate, useParams } from "@tanstack/react-router";
+import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Link, useNavigate, useParams } from "@tanstack/react-router";
 import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
@@ -68,10 +70,20 @@ const Page = () => {
   };
 
   return (
-    <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+    <div className="mx-auto flex flex-col justify-between bg-bunker-800 text-white">
       {data && (
-        <div className="mx-auto mb-6 w-full max-w-7xl">
-          <PageHeader scope="project" title={data.name}>
+        <div className="mx-auto mb-6 w-full max-w-8xl">
+          <Link
+            to="/projects/ssh/$projectId/overview"
+            params={{
+              projectId
+            }}
+            className="mb-4 flex items-center gap-x-2 text-sm text-mineshaft-400"
+          >
+            <FontAwesomeIcon icon={faChevronLeft} />
+            Hosts
+          </Link>
+          <PageHeader scope="project" title={data.name} description="Configure SSH Group">
             <DropdownMenu>
               <DropdownMenuTrigger asChild className="rounded-lg">
                 <div className="hover:text-primary-400 data-[state=open]:text-primary-400">

frontend/src/pages/ssh/SshHostsPage/SshHostsPage.tsx

@@ -13,8 +13,8 @@ export const SshHostsPage = () => {
         <title>{t("common.head-title", { title: "SSH" })}</title>
       </Helmet>
       <div className="h-full bg-bunker-800">
-        <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
-          <div className="mx-auto mb-6 w-full max-w-7xl">
+        <div className="mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+          <div className="mx-auto mb-6 w-full max-w-8xl">
             <PageHeader
               scope="project"
               title="Hosts"