From c4f094d22b35b343dcf25ea3a18444677147d771 Mon Sep 17 00:00:00 2001
From: Austin Pearce <JukeboxRhino@users.noreply.github.com>
Date: Tue, 18 Mar 2025 09:18:22 -0400
Subject: [PATCH] fix: BrandBanner to use NavLink (#4536)

* Fix BrandBanner to use NavLink

* Apply suggestions from code review

---------

Co-authored-by: Johnny <yourselfhosted@gmail.com>
---
 web/src/components/BrandBanner.tsx | 10 +---------
 web/src/components/Navigation.tsx  |  4 +++-
 2 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/web/src/components/BrandBanner.tsx b/web/src/components/BrandBanner.tsx
index 1c4746f30..443015ab1 100644
--- a/web/src/components/BrandBanner.tsx
+++ b/web/src/components/BrandBanner.tsx
@@ -1,6 +1,3 @@
-import useCurrentUser from "@/hooks/useCurrentUser";
-import useNavigateTo from "@/hooks/useNavigateTo";
-import { Routes } from "@/router";
 import { workspaceStore } from "@/store/v2";
 import { cn } from "@/utils";
 import UserAvatar from "./UserAvatar";
@@ -12,18 +9,13 @@ interface Props {
 
 const BrandBanner = (props: Props) => {
   const { collapsed } = props;
-  const navigateTo = useNavigateTo();
-  const currentUser = useCurrentUser();
   const workspaceGeneralSetting = workspaceStore.state.generalSetting;
   const title = workspaceGeneralSetting.customProfile?.title || "Memos";
   const avatarUrl = workspaceGeneralSetting.customProfile?.logoUrl || "/full-logo.webp";
 
   return (
     <div className={cn("relative w-full h-auto shrink-0", props.className)}>
-      <div
-        className={cn("w-auto flex flex-row justify-start items-center text-gray-800 dark:text-gray-400", collapsed ? "px-1" : "px-3")}
-        onClick={() => navigateTo(currentUser ? Routes.ROOT : Routes.EXPLORE)}
-      >
+      <div className={cn("w-auto flex flex-row justify-start items-center text-gray-800 dark:text-gray-400", collapsed ? "px-1" : "px-3")}>
         <UserAvatar className="shrink-0" avatarUrl={avatarUrl} />
         {!collapsed && <span className="ml-2 text-lg font-medium text-slate-800 dark:text-gray-300 shrink truncate">{title}</span>}
       </div>
diff --git a/web/src/components/Navigation.tsx b/web/src/components/Navigation.tsx
index 758a6d5a6..f760ba86c 100644
--- a/web/src/components/Navigation.tsx
+++ b/web/src/components/Navigation.tsx
@@ -80,7 +80,9 @@ const Navigation = observer((props: Props) => {
       )}
     >
       <div className="w-full px-1 py-1 flex flex-col justify-start items-start space-y-2 overflow-auto hide-scrollbar shrink">
-        <BrandBanner className="mb-2" collapsed={collapsed} />
+        <NavLink className="mb-2" to={currentUser ? Routes.ROOT : Routes.EXPLORE}>
+          <BrandBanner collapsed={collapsed} />
+        </NavLink>
         {navLinks.map((navLink) => (
           <NavLink
             className={({ isActive }) =>