From a75ea92087c34ec16720d53f5de51f33770e2c9e Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sat, 24 Jul 2021 23:31:43 +0800
Subject: [PATCH] refactor: nav and sidebar active status

---
 .../Content/Personal/Friends/AddFriend.tsx    |  2 +-
 web/src/routes/Main/Content/SidebarItem.tsx   |  4 ++--
 web/src/routes/Main/Navbar/GroupNav.tsx       | 11 +--------
 web/src/routes/Main/Navbar/NavItem.tsx        | 23 ++++++++++++++++---
 web/src/routes/Main/Navbar/index.tsx          |  4 +---
 5 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/web/src/routes/Main/Content/Personal/Friends/AddFriend.tsx b/web/src/routes/Main/Content/Personal/Friends/AddFriend.tsx
index 7cad7b87..db0e49bd 100644
--- a/web/src/routes/Main/Content/Personal/Friends/AddFriend.tsx
+++ b/web/src/routes/Main/Content/Personal/Friends/AddFriend.tsx
@@ -82,7 +82,7 @@ const SelfIdentify: React.FC = React.memo(() => {
 
       <div className="rounded-md border border-black border-opacity-30 px-4 py-3 bg-black bg-opacity-10 text-center">
         <div>您的个人唯一标识</div>
-        <Typography.Title level={4} copyable={true}>
+        <Typography.Title level={4} copyable={true} className="select-text">
           {uniqueName}
         </Typography.Title>
       </div>
diff --git a/web/src/routes/Main/Content/SidebarItem.tsx b/web/src/routes/Main/Content/SidebarItem.tsx
index 67d17979..d0ad91de 100644
--- a/web/src/routes/Main/Content/SidebarItem.tsx
+++ b/web/src/routes/Main/Content/SidebarItem.tsx
@@ -21,9 +21,9 @@ export const SidebarItem: React.FC<SidebarItemProps> = React.memo((props) => {
     <Link to={to}>
       <div
         className={clsx(
-          'w-full hover:bg-white hover:bg-opacity-20 cursor-pointer text-white rounded px-2 h-11 flex items-center text-base group',
+          'w-full hover:bg-white hover:bg-opacity-20 cursor-pointer text-white rounded px-2 h-11 flex items-center text-base group mb-0.5',
           {
-            'bg-opacity-20': isActive,
+            'bg-white bg-opacity-20': isActive,
           }
         )}
       >
diff --git a/web/src/routes/Main/Navbar/GroupNav.tsx b/web/src/routes/Main/Navbar/GroupNav.tsx
index c3d31ab5..73a8c4fd 100644
--- a/web/src/routes/Main/Navbar/GroupNav.tsx
+++ b/web/src/routes/Main/Navbar/GroupNav.tsx
@@ -3,7 +3,6 @@ import { openModal } from '@/components/Modal';
 import { ModalCreateGroup } from '@/components/modals/CreateGroup';
 import { Icon } from '@iconify/react';
 import React, { useCallback, useMemo } from 'react';
-import { useHistory } from 'react-router';
 import { GroupInfo, useAppSelector } from 'tailchat-shared';
 import { NavbarNavItem } from './NavItem';
 
@@ -17,11 +16,6 @@ function useGroups(): GroupInfo[] {
 
 export const GroupNav: React.FC = React.memo(() => {
   const groups = useGroups();
-  const history = useHistory();
-
-  const handleToGroup = useCallback((groupId: string) => {
-    history.push(`/main/group/${groupId}`);
-  }, []);
 
   const handleCreateGroup = useCallback(() => {
     openModal(<ModalCreateGroup />);
@@ -31,10 +25,7 @@ export const GroupNav: React.FC = React.memo(() => {
     <div className="space-y-2">
       {Array.isArray(groups) &&
         groups.map((group) => (
-          <NavbarNavItem
-            key={group._id}
-            onClick={() => handleToGroup(group._id)}
-          >
+          <NavbarNavItem key={group._id} to={`/main/group/${group._id}`}>
             <Avatar
               shape="square"
               size={48}
diff --git a/web/src/routes/Main/Navbar/NavItem.tsx b/web/src/routes/Main/Navbar/NavItem.tsx
index 9aa29a20..8293ce16 100644
--- a/web/src/routes/Main/Navbar/NavItem.tsx
+++ b/web/src/routes/Main/Navbar/NavItem.tsx
@@ -1,21 +1,38 @@
 import type { ClassValue } from 'clsx';
 import clsx from 'clsx';
 import React from 'react';
+import { useLocation } from 'react-router';
+import { Link } from 'react-router-dom';
 
 export const NavbarNavItem: React.FC<{
   className?: ClassValue;
+  to?: string;
   onClick?: () => void;
 }> = React.memo((props) => {
-  return (
+  const { className, to } = props;
+  const location = useLocation();
+  const isActive = typeof to === 'string' && location.pathname.startsWith(to);
+
+  const inner = (
     <div
       className={clsx(
-        'w-12 h-12 hover:rounded-lg transition-all rounded-1/2 cursor-pointer flex items-center justify-center overflow-hidden',
-        props.className
+        'w-12 h-12 hover:rounded-lg transition-all cursor-pointer flex items-center justify-center overflow-hidden',
+        className,
+        {
+          'rounded-1/2': !isActive,
+          'rounded-lg': isActive,
+        }
       )}
       onClick={props.onClick}
     >
       {props.children}
     </div>
   );
+
+  if (typeof to === 'string') {
+    return <Link to={to}>{inner}</Link>;
+  }
+
+  return inner;
 });
 NavbarNavItem.displayName = 'NavbarNavItem';
diff --git a/web/src/routes/Main/Navbar/index.tsx b/web/src/routes/Main/Navbar/index.tsx
index 877e5ddc..6705705c 100644
--- a/web/src/routes/Main/Navbar/index.tsx
+++ b/web/src/routes/Main/Navbar/index.tsx
@@ -4,20 +4,18 @@ import { Icon } from '@iconify/react';
 import { Avatar } from '@/components/Avatar';
 import { NavbarNavItem } from './NavItem';
 import { GroupNav } from './GroupNav';
-import { useHistory } from 'react-router';
 
 /**
  * 导航栏组件
  */
 export const Navbar: React.FC = React.memo(() => {
   const userInfo = useAppSelector((state) => state.user.info);
-  const history = useHistory();
 
   return (
     <div className="w-18 bg-gray-900 flex flex-col justify-start items-center pt-4 pb-4 p-1">
       {/* Navbar */}
       <div className="flex-1">
-        <NavbarNavItem onClick={() => history.push('/main/personal')}>
+        <NavbarNavItem to={'/main/personal'}>
           <Avatar
             shape="square"
             size={48}