From 9eb17fd37fcc3874b7a2241a3216ade82bec51f8 Mon Sep 17 00:00:00 2001
From: Bilal ABBAD <bilal@opsmill.com>
Date: Fri, 14 Feb 2025 15:23:03 +0100
Subject: [PATCH] Updated Infrahub global layout (#5749)

---
 changelog/+new-layout.added.md                |  2 +
 frontend/app/package-lock.json                | 10 ++++
 frontend/app/package.json                     |  1 +
 frontend/app/src/assets/infrahub-logo.svg     |  2 +-
 .../app/src/entities/diff/ui/diff-empty.tsx   |  2 +-
 frontend/app/src/entities/events/ui/event.tsx |  2 +-
 .../src/entities/events/ui/global-events.tsx  |  2 +-
 .../objects-table/objects-table-manager.tsx   |  2 +-
 .../object/ui/objects-table/objects-table.tsx |  4 +-
 .../app/src/entities/tasks/ui/task-status.tsx |  2 +-
 frontend/app/src/pages/graphql/index.tsx      |  1 +
 frontend/app/src/pages/objects/layout.tsx     |  2 +-
 .../app/src/pages/objects/object-details.tsx  |  7 +--
 .../src/pages/proposed-changes/details.tsx    |  2 +-
 .../app/src/pages/resource-manager/index.tsx  |  2 +-
 .../resource-pool-details.tsx                 |  2 +-
 frontend/app/src/pages/schema.tsx             |  2 +-
 .../src/shared/components/account-menu.tsx    | 17 +++---
 .../src/shared/components/layout/content.tsx  |  2 +-
 .../src/shared/components/layout/header.tsx   |  9 +--
 .../src/shared/components/layout/layout.tsx   | 12 ++--
 .../components/menu-section-object.tsx        |  3 +-
 .../menu-navigation/menu-navigation.tsx       |  2 +-
 .../src/shared/components/layout/sidebar.tsx  | 56 ++++++++++++++-----
 .../src/shared/components/time-selector.tsx   |  1 +
 25 files changed, 89 insertions(+), 60 deletions(-)
 create mode 100644 changelog/+new-layout.added.md

diff --git a/changelog/+new-layout.added.md b/changelog/+new-layout.added.md
new file mode 100644
index 0000000000..287cc4c09b
--- /dev/null
+++ b/changelog/+new-layout.added.md
@@ -0,0 +1,2 @@
+- Improved Infrahub app layout for a cleaner look.
+- Made the top menu more compact.
diff --git a/frontend/app/package-lock.json b/frontend/app/package-lock.json
index 5794562bdf..b6d3984777 100644
--- a/frontend/app/package-lock.json
+++ b/frontend/app/package-lock.json
@@ -47,6 +47,7 @@
         "handlebars": "^4.7.8",
         "jotai": "^2.11.3",
         "json-to-graphql-query": "^2.2.5",
+        "lucide-react": "^0.475.0",
         "openapi-fetch": "^0.13.4",
         "prismjs": "^1.29.0",
         "query-string": "^9.0.0",
@@ -12249,6 +12250,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.475.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.475.0.tgz",
+      "integrity": "sha512-NJzvVu1HwFVeZ+Gwq2q00KygM1aBhy/ZrhY9FsAgJtpB+E4R7uxRk9M2iKvHa6/vNxZydIB59htha4c2vvwvVg==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/lz-string": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
diff --git a/frontend/app/package.json b/frontend/app/package.json
index 5579425d6e..cec98654c0 100644
--- a/frontend/app/package.json
+++ b/frontend/app/package.json
@@ -68,6 +68,7 @@
     "handlebars": "^4.7.8",
     "jotai": "^2.11.3",
     "json-to-graphql-query": "^2.2.5",
+    "lucide-react": "^0.475.0",
     "openapi-fetch": "^0.13.4",
     "prismjs": "^1.29.0",
     "query-string": "^9.0.0",
diff --git a/frontend/app/src/assets/infrahub-logo.svg b/frontend/app/src/assets/infrahub-logo.svg
index f5486c1ccd..322c793613 100644
--- a/frontend/app/src/assets/infrahub-logo.svg
+++ b/frontend/app/src/assets/infrahub-logo.svg
@@ -1,4 +1,4 @@
-<svg width="100%" height="100%" viewBox="0 0 24 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path fill-rule="evenodd" clip-rule="evenodd" d="M12 0.902832L20.4465 6.4513V17.5482L12 23.0967L3.55347 17.5482V6.4513L12 0.902832Z" fill="#0B97BB"/>
   <mask id="mask0_1356_7486" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="3" y="0" width="24" height="100%">
     <path d="M11.9992 0.902832L20.4457 6.4513V17.5482L11.9992 23.0967L3.55273 17.5482V6.4513L11.9992 0.902832Z" fill="white"/>
diff --git a/frontend/app/src/entities/diff/ui/diff-empty.tsx b/frontend/app/src/entities/diff/ui/diff-empty.tsx
index 0049959a61..33c771522f 100644
--- a/frontend/app/src/entities/diff/ui/diff-empty.tsx
+++ b/frontend/app/src/entities/diff/ui/diff-empty.tsx
@@ -10,7 +10,7 @@ export interface DiffEmptyProps {
 
 export function DiffEmpty({ branchName, lastRefreshedAt }: DiffEmptyProps) {
   return (
-    <div className="flex flex-col items-center mt-10 gap-5">
+    <div className="flex flex-col items-center my-10 gap-5">
       <div className="p-3 rounded-full bg-white inline-flex">
         <Icon icon="mdi:circle-off-outline" className="text-2xl text-custom-blue-800" />
       </div>
diff --git a/frontend/app/src/entities/events/ui/event.tsx b/frontend/app/src/entities/events/ui/event.tsx
index a2520d2442..bbed2087fa 100644
--- a/frontend/app/src/entities/events/ui/event.tsx
+++ b/frontend/app/src/entities/events/ui/event.tsx
@@ -55,7 +55,7 @@ export const Event = ({ __typename, ...props }: EventType) => {
     <div className="flex gap-2">
       <TimelineBorder />
 
-      <div className="flex flex-grow gap-3 p-2 rounded-md shadow-sm border">
+      <div className="flex flex-grow gap-3 p-2 rounded-md shadow-sm border bg-white">
         <div className="flex flex-col gap-2 grow">
           {__typename === NODE_MUTATED_EVENT && <NodeEvent {...props} />}
 
diff --git a/frontend/app/src/entities/events/ui/global-events.tsx b/frontend/app/src/entities/events/ui/global-events.tsx
index ea8747c51f..4dc630de5f 100644
--- a/frontend/app/src/entities/events/ui/global-events.tsx
+++ b/frontend/app/src/entities/events/ui/global-events.tsx
@@ -23,7 +23,7 @@ export const GlobalEvents = () => {
   });
 
   return (
-    <div className="flex flex-col gap-2 p-2">
+    <div className="flex flex-col gap-2 p-2 overflow-auto">
       {activities?.map((activity) => (
         <Event key={activity.id} {...activity} />
       ))}
diff --git a/frontend/app/src/entities/nodes/object/ui/objects-table/objects-table-manager.tsx b/frontend/app/src/entities/nodes/object/ui/objects-table/objects-table-manager.tsx
index 792dff05b9..f3925ba088 100644
--- a/frontend/app/src/entities/nodes/object/ui/objects-table/objects-table-manager.tsx
+++ b/frontend/app/src/entities/nodes/object/ui/objects-table/objects-table-manager.tsx
@@ -31,7 +31,7 @@ export function ObjectsTableManager({ schema }: ObjectsTableManagerProps) {
 
   return (
     <>
-      <div className="flex items-center h-14 px-3">
+      <div className="flex items-center h-14 px-3 shrink-0">
         <FilterSearchInput schema={schema} />
 
         {filters.length > 0 && (
diff --git a/frontend/app/src/entities/nodes/object/ui/objects-table/objects-table.tsx b/frontend/app/src/entities/nodes/object/ui/objects-table/objects-table.tsx
index 4790410bda..86a5ec75f9 100644
--- a/frontend/app/src/entities/nodes/object/ui/objects-table/objects-table.tsx
+++ b/frontend/app/src/entities/nodes/object/ui/objects-table/objects-table.tsx
@@ -59,7 +59,7 @@ export const ObjectsTable = ({
 
   return (
     <div
-      className="grid content-start h-[calc(100vh-14rem)] overflow-auto min-w-full"
+      className="grid content-start overflow-auto"
       onScroll={(e) => fetchMoreOnBottomReached(e.currentTarget)}
       ref={tableContainerRef}
       style={{
@@ -89,7 +89,7 @@ export const ObjectsTable = ({
 
       {(isPending || isFetchingNextPage) && (
         <>
-          {[...Array(15)].map((_, rowIndex) => (
+          {[...Array(20)].map((_, rowIndex) => (
             <React.Fragment key={`skeleton-row-${rowIndex}`}>
               {[...Array(allHeaders.length)].map((_, colIndex) => (
                 <TableCell
diff --git a/frontend/app/src/entities/tasks/ui/task-status.tsx b/frontend/app/src/entities/tasks/ui/task-status.tsx
index bf7cec261e..d1d37f99b1 100644
--- a/frontend/app/src/entities/tasks/ui/task-status.tsx
+++ b/frontend/app/src/entities/tasks/ui/task-status.tsx
@@ -31,7 +31,7 @@ export function TaskStatus() {
   const commonButtonProps: LinkButtonProps = {
     size: "square",
     variant: "ghost",
-    className: "h-8 w-8 bg-neutral-50 border border-neutral-200 rounded-lg relative",
+    className: "h-8 w-8 bg-neutral-50 border border-neutral-200 rounded-lg relative shrink-0",
     to: constructPath("/tasks", [{ name: QSP.FILTER, value: JSON.stringify([filter]) }]),
   };
 
diff --git a/frontend/app/src/pages/graphql/index.tsx b/frontend/app/src/pages/graphql/index.tsx
index e8802a4cdc..703ede6da3 100644
--- a/frontend/app/src/pages/graphql/index.tsx
+++ b/frontend/app/src/pages/graphql/index.tsx
@@ -39,6 +39,7 @@ const GraphqlSandboxPage = () => {
 
   return (
     <GraphiQL
+      className="rounded-lg border"
       defaultEditorToolsVisibility
       query={query ?? undefined}
       plugins={[explorerPlugin({ showAttribution: false })]}
diff --git a/frontend/app/src/pages/objects/layout.tsx b/frontend/app/src/pages/objects/layout.tsx
index fc39a3a83d..a4a424af39 100644
--- a/frontend/app/src/pages/objects/layout.tsx
+++ b/frontend/app/src/pages/objects/layout.tsx
@@ -78,7 +78,7 @@ const ObjectPageLayout = () => {
   }
 
   return (
-    <Content.Card>
+    <Content.Card className="flex flex-col">
       <ObjectHeader schema={schema} objectId={objectid} />
 
       <Outlet />
diff --git a/frontend/app/src/pages/objects/object-details.tsx b/frontend/app/src/pages/objects/object-details.tsx
index 5b34a77709..d2791475f2 100644
--- a/frontend/app/src/pages/objects/object-details.tsx
+++ b/frontend/app/src/pages/objects/object-details.tsx
@@ -1,5 +1,4 @@
-import { ARTIFACT_OBJECT, GRAPHQL_QUERY_OBJECT, TASK_OBJECT } from "@/config/constants";
-import ArtifactsDetails from "@/entities/artifacts/ui/artifact-details";
+import { GRAPHQL_QUERY_OBJECT, TASK_OBJECT } from "@/config/constants";
 import { useObjectDetails } from "@/entities/nodes/hooks/useObjectDetails";
 import ObjectItemDetails from "@/entities/nodes/object-item-details/object-item-details-paginated";
 import { genericsState, profilesAtom, schemaState } from "@/entities/schema/stores/schema.atom";
@@ -71,10 +70,6 @@ export const Component = () => {
     return <Navigate to={constructPath(`/objects/${objectKind}`)} />;
   }
 
-  if (objectKind === ARTIFACT_OBJECT) {
-    return <ArtifactsDetails artifactId={objectid} />;
-  }
-
   if (objectKind === GRAPHQL_QUERY_OBJECT) {
     return <GraphqlQueryDetailsPage graphqlQueryId={objectid} />;
   }
diff --git a/frontend/app/src/pages/proposed-changes/details.tsx b/frontend/app/src/pages/proposed-changes/details.tsx
index aab6238dc2..750c56ef18 100644
--- a/frontend/app/src/pages/proposed-changes/details.tsx
+++ b/frontend/app/src/pages/proposed-changes/details.tsx
@@ -178,7 +178,7 @@ export function Component() {
   }
 
   return (
-    <Content.Card className="min-h-[calc(100%-1rem)] flex flex-col">
+    <Content.Card className="flex flex-col">
       <Content.CardTitle
         title={proposedChangesData.display_label}
         description={
diff --git a/frontend/app/src/pages/resource-manager/index.tsx b/frontend/app/src/pages/resource-manager/index.tsx
index 54a9b7be41..0ff5dae592 100644
--- a/frontend/app/src/pages/resource-manager/index.tsx
+++ b/frontend/app/src/pages/resource-manager/index.tsx
@@ -13,7 +13,7 @@ const ResourceManagerPage = () => {
   if (!resourcePoolSchema) return <LoadingIndicator className="h-full" />;
 
   return (
-    <Content.Card>
+    <Content.Card className="flex flex-col">
       <ObjectHeader schema={resourcePoolSchema} />
 
       <ObjectsTableManager schema={resourcePoolSchema} />
diff --git a/frontend/app/src/pages/resource-manager/resource-pool-details.tsx b/frontend/app/src/pages/resource-manager/resource-pool-details.tsx
index a60d88e149..b809ff9361 100644
--- a/frontend/app/src/pages/resource-manager/resource-pool-details.tsx
+++ b/frontend/app/src/pages/resource-manager/resource-pool-details.tsx
@@ -138,7 +138,7 @@ const ResourcePoolContent = ({ id, schema }: ResourcePoolContentProps) => {
         }
       />
 
-      <div className="p-2 flex items-start h-[calc(100%-64px)] overflow-hidden">
+      <div className="p-2 flex items-start overflow-hidden">
         <aside className="inline-flex flex-col gap-2 shrink-0 mr-1">
           <Card className="shrink-0">
             <CardWithBorder.Title className="flex items-center justify-between gap-1">
diff --git a/frontend/app/src/pages/schema.tsx b/frontend/app/src/pages/schema.tsx
index 47d62f19ef..00ae6e5c44 100644
--- a/frontend/app/src/pages/schema.tsx
+++ b/frontend/app/src/pages/schema.tsx
@@ -12,7 +12,7 @@ function SchemaPage() {
   const profiles = useAtomValue(profilesAtom);
 
   return (
-    <Content.Card className="h-[calc(100%-1rem)] overflow-auto flex flex-col">
+    <Content.Card className="h-[calc(100%-1rem)] flex flex-col">
       <Content.CardTitle
         title="Schema Visualizer"
         badgeContent={nodes.length + generics.length + profiles.length}
diff --git a/frontend/app/src/shared/components/account-menu.tsx b/frontend/app/src/shared/components/account-menu.tsx
index b16f35743a..88b640f413 100644
--- a/frontend/app/src/shared/components/account-menu.tsx
+++ b/frontend/app/src/shared/components/account-menu.tsx
@@ -9,7 +9,7 @@ import { useAuth } from "@/entities/authentication/ui/useAuth";
 import { IModelSchema, genericsState } from "@/entities/schema/stores/schema.atom";
 import { getProfileDetails } from "@/entities/user-profile/api/getProfileDetails";
 import { constructPath } from "@/shared/api/rest/fetch";
-import { Button } from "@/shared/components/buttons/button-primitive";
+import { Button, LinkButton } from "@/shared/components/buttons/button-primitive";
 import { Avatar } from "@/shared/components/display/avatar";
 import { AppVersion } from "@/shared/components/layout/app-version";
 import { Skeleton } from "@/shared/components/skeleton";
@@ -90,12 +90,13 @@ const UnauthenticatedAccountMenu = () => {
 
   return (
     <DropdownMenu>
-      <Link
-        className="flex items-center h-14 w-full rounded-lg p-2 gap-2 hover:bg-indigo-50 overflow-hidden shrink-0"
+      <LinkButton
+        variant="ghost"
+        className="p-2 h-auto w-full rounded-lg gap-2 hover:bg-indigo-50 overflow-hidden shrink-0"
         to="/login"
         state={{ from: location }}
       >
-        <div className="bg-indigo-50 rounded-full h-10 w-10 flex items-center justify-center overflow-hidden border border-white shrink-0">
+        <div className="bg-indigo-50 rounded-full size-9 flex items-center justify-center overflow-hidden border border-white shrink-0">
           <Icon icon="mdi:user" className="text-5xl relative top-1 text-neutral-600" />
         </div>
 
@@ -119,7 +120,7 @@ const UnauthenticatedAccountMenu = () => {
             <Icon icon="mdi:dots-vertical" className="text-lg" />
           </Button>
         </DropdownMenuTrigger>
-      </Link>
+      </LinkButton>
 
       <DropdownMenuContent align="end" side="right">
         <CommonMenuItems />
@@ -175,7 +176,7 @@ const AuthenticatedAccountMenu = ({
           className="h-auto w-full justify-start gap-2 hover:bg-indigo-50 rounded-lg p-2 overflow-hidden text-left shrink-0"
           data-testid="authenticated-menu-trigger"
         >
-          <Avatar name={profile?.name?.value} className="h-10 w-10 shrink-0" />
+          <Avatar name={profile?.name?.value} className="size-9 shrink-0" />
 
           <div className="group-data-[collapsed=true]/sidebar:hidden overflow-hidden">
             <div className="font-semibold text-sm truncate">{profile?.label?.value}</div>
@@ -211,8 +212,8 @@ const AuthenticatedAccountMenu = ({
 
 const AccountMenuSkeleton = () => {
   return (
-    <div className="flex items-center gap-2 p-2 shrink-0">
-      <Skeleton className="rounded-full h-10 w-10" />
+    <div className="flex items-center gap-2 p-2 shrink-0 border border-transparent">
+      <Skeleton className="rounded-full size-9" />
 
       <div className="flex-grow space-y-2 group-data-[collapsed=true]/sidebar:hidden">
         <Skeleton className="h-4 w-4/5" />
diff --git a/frontend/app/src/shared/components/layout/content.tsx b/frontend/app/src/shared/components/layout/content.tsx
index cf4dbaeace..ae4b0ddbfe 100644
--- a/frontend/app/src/shared/components/layout/content.tsx
+++ b/frontend/app/src/shared/components/layout/content.tsx
@@ -49,7 +49,7 @@ export const ContentTitle = ({
 };
 
 export const ContentCard = ({ className, ...props }: CardProps) => {
-  return <Card className={classNames("p-0 m-2 overflow-hidden", className)} {...props} />;
+  return <Card className={classNames("p-0 overflow-auto", className)} {...props} />;
 };
 
 export type ContentCardTitleProps = {
diff --git a/frontend/app/src/shared/components/layout/header.tsx b/frontend/app/src/shared/components/layout/header.tsx
index 95f1dd13dc..a5174effb5 100644
--- a/frontend/app/src/shared/components/layout/header.tsx
+++ b/frontend/app/src/shared/components/layout/header.tsx
@@ -1,18 +1,11 @@
-import InfrahubLogo from "@/assets/infrahub-logo.svg";
 import { TaskStatus } from "@/entities/tasks/ui/task-status";
-import { constructPath } from "@/shared/api/rest/fetch";
 import BranchSelector from "@/shared/components/branch-selector";
 import BreadcrumbNavigation from "@/shared/components/layout/breadcrumb-navigation/breadcrumb-navigation";
 import { TimeFrameSelector } from "@/shared/components/time-selector";
-import { Link } from "react-router";
 
 export default function Header() {
   return (
-    <header className="px-6 py-3 flex items-center gap-2 border-b bg-white">
-      <Link to={constructPath("/")} className="h-8 w-8">
-        <img src={InfrahubLogo} alt="Infrahub logo" />
-      </Link>
-
+    <header className="p-3 flex items-center gap-2 border bg-white rounded-lg">
       <TimeFrameSelector />
 
       <BranchSelector />
diff --git a/frontend/app/src/shared/components/layout/layout.tsx b/frontend/app/src/shared/components/layout/layout.tsx
index c88383bfb7..3cb488f14f 100644
--- a/frontend/app/src/shared/components/layout/layout.tsx
+++ b/frontend/app/src/shared/components/layout/layout.tsx
@@ -19,15 +19,15 @@ function Layout() {
   }, [branches.length, branchInQueryString]);
 
   return (
-    <div className="h-screen w-screen overflow-hidden bg-stone-100 text-stone-800">
-      <Header />
-
-      <div className="flex items-stretch h-[calc(100vh-57px)]">
+    <div className="h-screen w-screen  text-stone-800 p-px bg-stone-100">
+      <div className="h-full w-full flex gap-px">
         <Sidebar />
 
-        <main className="flex-grow overflow-auto">
+        <div className="flex flex-col gap-px h-full grow overflow-hidden">
+          <Header />
+
           <Outlet />
-        </main>
+        </div>
       </div>
     </div>
   );
diff --git a/frontend/app/src/shared/components/layout/menu-navigation/components/menu-section-object.tsx b/frontend/app/src/shared/components/layout/menu-navigation/components/menu-section-object.tsx
index 459644527d..5736f85184 100644
--- a/frontend/app/src/shared/components/layout/menu-navigation/components/menu-section-object.tsx
+++ b/frontend/app/src/shared/components/layout/menu-navigation/components/menu-section-object.tsx
@@ -117,9 +117,8 @@ const TopLevelMenuItem: React.FC<{
         side="left"
         align="start"
         sideOffset={isCollapsed ? 6 : 12}
-        className="h-[calc(100vh-57px)] mt-[57px] min-w-[275px] px-4 py-5 bg-white border rounded-r-lg rounded-l-none shadow-none relative -top-px overflow-auto data-[side=right]:slide-in-from-left-[100px]"
+        className="min-w-60 max-h-[calc(100vh-7rem)] overflow-auto"
       >
-        <h3 className="text-xl font-medium text-neutral-800 mb-5">{item.label}</h3>
         {item.children.map((child) => (
           <RecursiveObjectMenuItem key={child.identifier} item={child} isCollapsed={isCollapsed} />
         ))}
diff --git a/frontend/app/src/shared/components/layout/menu-navigation/menu-navigation.tsx b/frontend/app/src/shared/components/layout/menu-navigation/menu-navigation.tsx
index 258e7cd78b..be4b7cf644 100644
--- a/frontend/app/src/shared/components/layout/menu-navigation/menu-navigation.tsx
+++ b/frontend/app/src/shared/components/layout/menu-navigation/menu-navigation.tsx
@@ -24,7 +24,7 @@ export default function MenuNavigation({ isCollapsed }: MenuNavigationProps) {
       <ScrollArea>
         <MenuSectionObject items={menu.sections.object} isCollapsed={isCollapsed} />
       </ScrollArea>
-      <Divider className="p-0" />
+      <Divider />
       <MenuSectionInternal items={menu.sections.internal} isCollapsed={isCollapsed} />
     </>
   );
diff --git a/frontend/app/src/shared/components/layout/sidebar.tsx b/frontend/app/src/shared/components/layout/sidebar.tsx
index 7b748b53ec..ada6f1f185 100644
--- a/frontend/app/src/shared/components/layout/sidebar.tsx
+++ b/frontend/app/src/shared/components/layout/sidebar.tsx
@@ -1,11 +1,17 @@
+import InfrahubWithTextLogo from "@/assets/Infrahub-SVG-hori.svg";
+import InfrahubLogo from "@/assets/infrahub-logo.svg";
 import { SIDEBAR_COLLAPSED_KEY } from "@/config/localStorage";
+import { constructPath } from "@/shared/api/rest/fetch";
 import { AccountMenu } from "@/shared/components/account-menu";
 import { Button } from "@/shared/components/buttons/button-primitive";
 import MenuNavigation from "@/shared/components/layout/menu-navigation/menu-navigation";
 import { SearchAnywhere } from "@/shared/components/search/search-anywhere";
+import { Divider } from "@/shared/components/ui/divider";
+import { focusVisibleStyle } from "@/shared/components/ui/style";
 import { useLocalStorage } from "@/shared/hooks/useLocalStorage";
 import { classNames } from "@/shared/utils/common";
-import { Icon } from "@iconify-icon/react";
+import { PanelLeftCloseIcon, PanelLeftOpenIcon } from "lucide-react";
+import { Link } from "react-router";
 
 export default function Sidebar() {
   const [collapsed, setCollapsed] = useLocalStorage(SIDEBAR_COLLAPSED_KEY);
@@ -16,28 +22,48 @@ export default function Sidebar() {
     <nav
       data-collapsed={booleanCollapsed}
       className={classNames(
-        "flex flex-col gap-3 shrink-0",
-        "relative -top-px",
-        "w-[256px] border rounded-lg py-5 px-4 bg-white",
+        "flex flex-col shrink-0",
+        "relative",
+        "w-[256px] border rounded-lg p-3 bg-white",
         "group/sidebar transition-all",
-        booleanCollapsed && "w-[72px] px-2 items-center"
+        booleanCollapsed && "w-auto px-2 items-center"
       )}
       data-testid="sidebar"
     >
-      <Button
-        variant="outline"
-        size="icon"
-        className={classNames(
-          "transition-all absolute -right-3.5 top-6",
-          booleanCollapsed ? "rotate-180" : "hidden group-hover/sidebar:inline-flex"
+      <div className="flex justify-between items-center mb-3">
+        <Link to={constructPath("/")} className={classNames(focusVisibleStyle, "rounded-md")}>
+          <img
+            src={booleanCollapsed ? InfrahubLogo : InfrahubWithTextLogo}
+            alt="Infrahub logo"
+            className={"h-8 px-1 m-0.5"}
+          />
+        </Link>
+
+        {booleanCollapsed ? (
+          <Button
+            variant="outline"
+            size="icon"
+            className="absolute -right-3.5 top-11 transition-all hidden group-hover/sidebar:inline-flex"
+            onClick={() => setCollapsed(JSON.stringify(!booleanCollapsed))}
+          >
+            <PanelLeftOpenIcon className="size-4 text-neutral-600" />
+          </Button>
+        ) : (
+          <Button
+            variant="ghost"
+            size="sm"
+            className="p-1 text-gray-400 hover:text-neutral-600"
+            onClick={() => setCollapsed(JSON.stringify(!booleanCollapsed))}
+          >
+            <PanelLeftCloseIcon className="size-5" />
+          </Button>
         )}
-        onClick={() => setCollapsed(JSON.stringify(!booleanCollapsed))}
-      >
-        <Icon icon="mdi:chevron-left" className="text-xl text-neutral-600" />
-      </Button>
+      </div>
 
       <SearchAnywhere isCollapsed={booleanCollapsed} />
 
+      <Divider />
+
       <MenuNavigation isCollapsed={booleanCollapsed} />
 
       <AccountMenu />
diff --git a/frontend/app/src/shared/components/time-selector.tsx b/frontend/app/src/shared/components/time-selector.tsx
index 39c1ac6100..794df28fe1 100644
--- a/frontend/app/src/shared/components/time-selector.tsx
+++ b/frontend/app/src/shared/components/time-selector.tsx
@@ -58,6 +58,7 @@ export const TimeFrameSelector = () => {
         maxDate={new Date()}
         filterTime={(date) => isPast(date)}
         popperPlacement="bottom-start"
+        popperClassName="!z-50"
       />
 
       <Transition