fix: BrandBanner to use NavLink (#4536)

* Fix BrandBanner to use NavLink

* Apply suggestions from code review

---------

Co-authored-by: Johnny <[email protected]>

Author: JukeboxRhino

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>

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 }) =>