Improve sidebar and button hover styles, add current page highlighting in ProfileSummary, and update router reference to asPath.

web/components/buttons/copy-link-button.tsx

@@ -47,7 +47,11 @@ export function CopyLinkOrShareButton(props: {
     >
       <Button
         onClick={onClick}
-        className={clsx(className, '', isSuccess && 'duration-[25ms]')}
+        className={clsx(
+          className,
+          'text-primary-700 hover:text-primary-800',
+          isSuccess && 'duration-[25ms]',
+        )}
         disabled={!url}
         size={size}
         color={color ?? 'gray-white'}

web/components/nav/profile-summary.tsx

@@ -5,8 +5,11 @@ import {useProfile} from 'web/hooks/use-profile'
 import {User} from 'web/lib/firebase/users'
 import {trackCallback} from 'web/lib/service/analytics'
 
-export function ProfileSummary(props: {user: User; className?: string}) {
-  const {user, className} = props
+export function ProfileSummary(props: {user: User; className?: string; currentPage?: string}) {
+  const {user, className, currentPage} = props
+
+  const isSelected = currentPage === `/${user.username}`
+  // console.log(isSelected, currentPage, `/${user.username}`)
 
   const profile = useProfile()
 
@@ -15,15 +18,16 @@ export function ProfileSummary(props: {user: User; className?: string}) {
       href={profile === null ? '/signup' : `/${user.username}`}
       onClick={trackCallback('sidebar: profile')}
       className={clsx(
-        'hover:bg-canvas-900 text-ink-700 group flex w-full shrink-0 flex-row items-center truncate rounded-xl py-3',
+        'hover:bg-canvas-900 text-ink-700 group flex w-full shrink-0 flex-row items-center truncate rounded-xl py-3 transition-all',
         className,
+        isSelected && 'bg-canvas-900',
       )}
     >
       <div className="w-2 shrink" />
       <Avatar avatarUrl={profile?.pinned_url ?? ''} username={user.username} noLink />
       <div className="mr-1 w-2 shrink-[2]" />
       <div className="shrink-0 grow" data-testid="sidebar-username">
-        <div className="group-hover:text-primary-700">{user.name}</div>
+        <div className="group-hover:text-primary-200">{user.name}</div>
       </div>
       <div className="w-2 shrink" />
     </Link>

web/components/nav/sidebar-item.tsx

@@ -28,7 +28,9 @@ export function SidebarItem(props: {item: Item; currentPage?: string}) {
   }
 
   const sidebarClass = clsx(
-    isCurrentPage ? 'bg-canvas-900 text-primary-600' : 'sidebar-text hover:text-primary-600',
+    isCurrentPage
+      ? 'bg-canvas-900 text-primary-600'
+      : 'sidebar-text hover:text-primary-700 hover:translate-x-[2px]',
     'group flex items-center rounded-xl px-3 py-2 text-sm font-medium',
     'focus-visible:bg-ink-100 outline-none transition-all',
   )
@@ -39,8 +41,8 @@ export function SidebarItem(props: {item: Item; currentPage?: string}) {
         <item.icon
           className={clsx(
             isCurrentPage
-              ? 'text-primary-700'
-              : 'text-[#574f45] group-hover:text-primary-700 group-hover:translate-x-[2px]',
+              ? 'text-primary-600'
+              : 'sidebar-text group-hover:text-primary-700 group-hover:translate-x-[2px]',
             '-ml-1 mr-3 h-6 w-6 flex-shrink-0 transition-all',
           )}
           aria-hidden="true"

web/components/nav/sidebar.tsx

@@ -26,7 +26,8 @@ export default function Sidebar(props: {
 }) {
   const {className, isMobile, style} = props
   const router = useRouter()
-  const currentPage = router.pathname
+  const currentPage = router.asPath
+  // console.log(router)
 
   const user = useUser()
   const profile = useProfile()
@@ -56,13 +57,13 @@ export default function Sidebar(props: {
       {user && !isMobile && (
         <>
           <div className="h-px bg-canvas-900 mb-4" />
-          <ProfileSummary user={user} className="mb-3 text-white" />
+          <ProfileSummary user={user} className="mb-3 text-white" currentPage={currentPage} />
         </>
       )}
 
       <div className="h-px bg-canvas-900 mb-4" />
 
-      <div className="mb-4 flex flex-col gap-1 !overflow-y-auto">
+      <div className="mb-4 flex flex-col gap-1 overflow-y-auto overflow-x-hidden">
         {navOptions.map((item) => (
           <SidebarItem key={item.key} item={item} currentPage={currentPage} />
         ))}