feat: Toolbar sticky position

kudos-ink · Jan 14, 2024 · 1cbf902 · 1cbf902
1 parent 6d2c5b6
commit 1cbf902
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 40 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -73,9 +73,7 @@ export default function RootLayout({
         <Providers themeProps={{ attribute: "class", defaultTheme: "kudos" }}>
           <div className="bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-default from-0% to-background to-80% relative flex flex-col h-screen">
             <Navbar />
-            <main className="container mx-auto max-w-7xl py-16 px-6 flex-grow">
-              {children}
-            </main>
+            <main className="py-16 flex-grow">{children}</main>
             <footer className="py-6 px-6 md:px-8 md:py-0">
               <div className="container flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
                 <p className="text-balance text-center text-sm leading-loose text-muted-foreground md:text-left">

diff --git a/app/page.tsx b/app/page.tsx
@@ -26,23 +26,23 @@ export default async function Home({ searchParams }: IHomeProps) {
   };
 
   return (
-    <div>
-      <section className="flex flex-col items-center text-center pt-10 pb-28">
+    <>
+      <section className="flex flex-col items-center text-center pt-10 pb-26 px-6 container mx-auto max-w-7xl">
         <h1 className={title()}>Find Collaborations,</h1>
         <h1 className={title()}>Collect Kudos</h1>
       </section>
-      <div className="flex flex-col gap-4">
+      <div className="flex flex-col">
         <Toolbar searchParams={searchParams} />
-        <div>
+        <section className="px-6 container mx-auto max-w-7xl">
           <ContributionsTable
             items={items}
             queries={{
               page_size: 10,
               filter,
             }}
           />
-        </div>
+        </section>
       </div>
-    </div>
+    </>
   );
 }
diff --git a/components/contributions-table/table.tsx b/components/contributions-table/table.tsx
@@ -132,9 +132,6 @@ export const Table = ({ items, queries = {} }: ITableProps) => {
 
   return (
     <>
-      <div className="py-4 px-3 bg-default-100 border-small rounded-t-md">
-        <span className="text-lg font-bold">Good First Contributions</span>
-      </div>
       <NuiTable
         hideHeader
         aria-label="Example table with infinite pagination"

diff --git a/components/filters/toolbar.tsx b/components/filters/toolbar.tsx
@@ -5,14 +5,19 @@ import {
   PROJECTS_OPTIONS,
 } from "@/data/filters";
 import { useFilters } from "@/hooks/useFilters";
+import useSticky from "@/hooks/useSticky";
 import { SearchParams } from "@/types/filters";
 import ClearFilters from "./clear-filters";
 import SelectFilter from "./select-filter";
+import { useRef } from "react";
 interface IToolbarProps {
   searchParams: SearchParams;
 }
 
 const Toolbar = ({ searchParams }: IToolbarProps) => {
+  const toolbarRef = useRef<HTMLDivElement>(null);
+  const isToolbarSticky = useSticky(toolbarRef);
+
   const { filters, updateFilter, clearFilter, clearAllFilters } = useFilters({
     initialParams: searchParams,
   });
@@ -27,34 +32,46 @@ const Toolbar = ({ searchParams }: IToolbarProps) => {
   const numberOfFilters = Object.keys(filters).length;
 
   return (
-    <div className="flex flex-col gap-4 items-start overflow-hidden lg:flex-row lg:items-center">
-      <div className="flex flex-nowrap overflow-x-auto gap-4 w-full sm:w-auto">
-        <SelectFilter
-          placeholder="Languages"
-          mainEmoji="🌐"
-          options={LANGUAGES_OPTIONS}
-          selectedKey={filters.languages}
-          onSelect={handleSelect("languages")}
-        />
-        <SelectFilter
-          placeholder="Interests"
-          mainEmoji="🪄"
-          options={INTERESTS_OPTIONS}
-          selectedKey={filters.interests}
-          onSelect={handleSelect("interests")}
-        />
-        <SelectFilter
-          placeholder="Projects"
-          mainEmoji="🖥️"
-          options={PROJECTS_OPTIONS}
-          selectedKey={filters.projects}
-          onSelect={handleSelect("projects")}
-        />
-      </div>
+    <div
+      className={`sticky top-0 z-10 bg-background ${
+        isToolbarSticky ? "bg-background" : "bg-transparent"
+      }`}
+      ref={toolbarRef}
+    >
+      <div className="container mx-auto max-w-7xl px-6 pt-6 flex flex-col gap-4">
+        <div className="flex flex-col gap-4 items-start overflow-hidden lg:flex-row lg:items-center">
+          <div className="flex flex-nowrap overflow-x-auto gap-4 w-full sm:w-auto">
+            <SelectFilter
+              placeholder="Languages"
+              mainEmoji="🌐"
+              options={LANGUAGES_OPTIONS}
+              selectedKey={filters.languages}
+              onSelect={handleSelect("languages")}
+            />
+            <SelectFilter
+              placeholder="Interests"
+              mainEmoji="🪄"
+              options={INTERESTS_OPTIONS}
+              selectedKey={filters.interests}
+              onSelect={handleSelect("interests")}
+            />
+            <SelectFilter
+              placeholder="Projects"
+              mainEmoji="🖥️"
+              options={PROJECTS_OPTIONS}
+              selectedKey={filters.projects}
+              onSelect={handleSelect("projects")}
+            />
+          </div>
 
-      {numberOfFilters > 1 && (
-        <ClearFilters onClear={clearAllFilters} value="Clear all filters" />
-      )}
+          {numberOfFilters > 1 && (
+            <ClearFilters onClear={clearAllFilters} value="Clear all filters" />
+          )}
+        </div>
+        <div className="py-4 px-3 bg-default-100 border-small rounded-t-md">
+          <span className="text-lg font-bold">Good First Contributions</span>
+        </div>
+      </div>
     </div>
   );
 };

diff --git a/components/navbar.tsx b/components/navbar.tsx
@@ -15,7 +15,7 @@ import { SITE_CONFIG } from "@/data/config";
 
 export const Navbar = () => {
   return (
-    <NextUINavbar maxWidth="xl" position="sticky" isBordered>
+    <NextUINavbar maxWidth="xl" position="static" isBordered>
       <NavbarContent className="basis-1/5 sm:basis-full" justify="start">
         <NavbarBrand as="li" className="gap-3 max-w-fit">
           <NextLink className="flex justify-start items-center gap-1" href="/">

diff --git a/hooks/useSticky.tsx b/hooks/useSticky.tsx
@@ -0,0 +1,25 @@
+import { useState, useEffect, RefObject } from "react";
+
+const useSticky = (ref: RefObject<HTMLElement>) => {
+  const [isSticky, setIsSticky] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (ref.current) {
+        const boundingRect = ref.current.getBoundingClientRect();
+        const isElementTopAboveViewport = boundingRect.top <= 0;
+        setIsSticky(isElementTopAboveViewport);
+      }
+    };
+
+    window.addEventListener("scroll", handleScroll);
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, [ref]);
+
+  return isSticky;
+};
+
+export default useSticky;