From 7fee7031cef234236f46569175fabcf31c8ccf66 Mon Sep 17 00:00:00 2001
From: rbshh <rishi.shah@dealerbest.com>
Date: Mon, 22 Dec 2025 09:49:38 +0100
Subject: [PATCH] feat: enhance notification sidebar header with back
 navigation and styling improvements

---
 .../sidebar/header/root.tsx                   | 38 +++++++++++++------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/apps/web/core/components/workspace-notifications/sidebar/header/root.tsx b/apps/web/core/components/workspace-notifications/sidebar/header/root.tsx
index 29d7c186f53..e9be24217c3 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/header/root.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/header/root.tsx
@@ -1,8 +1,11 @@
 import { observer } from "mobx-react";
+import Link from "next/link";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { InboxIcon } from "@plane/propel/icons";
+import { getButtonStyling } from "@plane/propel/button";
+import { ChevronLeftIcon, InboxIcon } from "@plane/propel/icons";
 import { Breadcrumbs, Header } from "@plane/ui";
+import { cn } from "@plane/utils";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 // local imports
@@ -22,17 +25,28 @@ export const NotificationSidebarHeader = observer(function NotificationSidebarHe
   return (
     <Header className="my-auto bg-surface-1">
       <Header.LeftItem>
-        <Breadcrumbs>
-          <Breadcrumbs.Item
-            component={
-              <BreadcrumbLink
-                label={t("notification.label")}
-                icon={<InboxIcon className="h-4 w-4 text-primary" />}
-                disableTooltip
-              />
-            }
-          />
-        </Breadcrumbs>
+        <div className="flex items-center gap-2">
+          <Link
+            href={`/${workspaceSlug}`}
+            className={cn(
+              getButtonStyling("secondary", "base"),
+              "flex items-center justify-center gap-2 text-tertiary rounded-lg h-6 w-6 p-1 hover:bg-surface-2 hover:text-secondary"
+            )}
+          >
+            <ChevronLeftIcon className="h-4 w-4" />
+          </Link>
+          <Breadcrumbs>
+            <Breadcrumbs.Item
+              component={
+                <BreadcrumbLink
+                  label={t("notification.label")}
+                  icon={<InboxIcon className="h-4 w-4 text-primary" />}
+                  disableTooltip
+                />
+              }
+            />
+          </Breadcrumbs>
+        </div>
       </Header.LeftItem>
       <Header.RightItem>
         <NotificationSidebarHeaderOptions workspaceSlug={workspaceSlug} />