feat: profile sticky header

Author: ImLunaHey

src/components/navigation/navbar/index.tsx

@@ -3,7 +3,7 @@ import { useAuth } from '../../../lib/bluesky/hooks/use-auth';
 import { useBlueskyStore } from '../../../lib/bluesky/store';
 import { CreatePost } from '../../create-post';
 import { cn } from '@/lib/utils';
-import { useScollVisible } from '@/hooks/use-scroll-visible';
+import { useScrollVisible } from '@/hooks/use-scroll-visible';
 import { Avatar } from '../../ui/avatar';
 import { useProfile } from '@/lib/bluesky/hooks/use-profile';
 import { HomeLink } from './home-link';
@@ -13,16 +13,19 @@ import { NotificationsLink } from './notifications-link';
 import { SettingsLink } from './settings-link';
 import { ProfileLink } from './profile-link';
 import { LoginButton } from './login-button';
+import { useRef } from 'react';
 
 export const Navbar = () => {
   const { isAuthenticated } = useAuth();
   const location = useLocation();
-  const isVisible = useScollVisible();
+  const ref = useRef<HTMLDivElement>(null);
+  const isVisible = useScrollVisible(ref);
   const handle = useBlueskyStore((state) => state.session?.handle);
   const { data: profile } = useProfile({ handle });
 
   return (
     <div
+      ref={ref}
       className={cn(
         'bg-background text-foreground sticky',
         // base

src/components/sticky-header.tsx

@@ -1,7 +1,7 @@
 import { ArrowLeftIcon } from 'lucide-react';
 import { Button } from './ui/button';
 import { cn } from '@/lib/utils';
-import { useScollVisible } from '@/hooks/use-scroll-visible';
+import { useScrollVisible } from '@/hooks/use-scroll-visible';
 
 export const StickyHeader = ({
   children,
@@ -12,7 +12,7 @@ export const StickyHeader = ({
   backButton?: boolean;
   className?: string;
 }) => {
-  const isVisible = useScollVisible();
+  const isVisible = useScrollVisible();
 
   return (
     <div

src/hooks/use-scroll-visible.ts

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 
-export const useScollVisible = () => {
+export const useScrollVisible = () => {
   const [isVisible, setIsVisible] = useState(true);
   const [lastScrollY, setLastScrollY] = useState(0);
 

src/routes/profile/$handle/index.lazy.tsx

@@ -24,6 +24,7 @@ import { Handle } from '@/components/ui/handle';
 import { Avatar } from '@/components/ui/avatar';
 import { Banner } from '@/components/ui/banner';
 import { ErrorBoundary } from '@/components/error-boundary';
+import { StickyHeader } from '@/components/sticky-header';
 
 export const Route = createLazyFileRoute('/profile/$handle/')({
   component: Profile,
@@ -235,7 +236,7 @@ function Profile() {
               setSelectedTab(selectedId);
             }}
           >
-            <div>
+            <StickyHeader backButton={false} className="border-none p-0">
               <TabList label="Profile tabs">
                 {[
                   {
@@ -254,7 +255,7 @@ function Profile() {
                   <Tab name={name} id={id} selectedTab={selectedTab} key={id} />
                 ))}
               </TabList>
-            </div>
+            </StickyHeader>
             <Ariakit.TabPanel tabId="all">
               <All />
             </Ariakit.TabPanel>