feat: Add Sticky Navigation and Custom Scrollbar for Jobs Page (#571)

code100x · Nov 3, 2024 · 2ed4b46 · 2ed4b46
1 parent 6517a3b
commit 2ed4b46
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 16 deletions.
diff --git a/src/app/jobs/page.tsx b/src/app/jobs/page.tsx
@@ -17,30 +17,39 @@ const page = async ({ searchParams }: { searchParams: JobQuerySchemaType }) => {
   }
   const parsedSearchParams = parsedData.data;
   return (
-    <div className="container grid sm:gap-6 gap-4 mt-12">
+    <div className="container relative grid sm:gap-6 gap-4 mt-12">
       <div className="grid gap-2">
         <h1 className="text-3xl sm:text-4xl font-bold">Explore Jobs</h1>
         <p className="text-sm font-medium text-slate-500 dark:text-slate-400">
           Explore thousands of remote and onsite jobs that match your skills and
           aspirations.
         </p>
       </div>
+
       <div className="flex gap-6">
-        <div className="hidden sm:block border  h-fit rounded-lg w-[310px] ">
-          <JobFilters searchParams={parsedSearchParams} />
+        <div className="hidden w-[310px] rounded-lg sm:block border h-[calc(100vh-100px)] overflow-y-auto scrollbar-custom sticky top-[5.5rem]">
+          <div className=" ">
+            <JobFilters searchParams={parsedSearchParams} />
+          </div>
         </div>
-        <div className="grow">
-          <JobsHeader searchParams={parsedSearchParams} />
-          <Suspense
-            key={JSON.stringify(parsedSearchParams)}
-            fallback={
-              <div className="flex justify-center items-center h-full gap-5 ">
-                <Loader />
-              </div>
-            }
-          >
-            <AllJobs searchParams={parsedSearchParams} />
-          </Suspense>
+
+        <div className="grow flex flex-col bg-background">
+          <div className="sticky top-[4.5rem] bg-background dark:bg-background z-10 py-4">
+            <JobsHeader searchParams={parsedSearchParams} />
+          </div>
+
+          <div className="grow bg-background">
+            <Suspense
+              key={JSON.stringify(parsedSearchParams)}
+              fallback={
+                <div className="flex justify-center items-center h-full gap-5">
+                  <Loader />
+                </div>
+              }
+            >
+              <AllJobs searchParams={parsedSearchParams} />
+            </Suspense>
+          </div>
         </div>
       </div>
     </div>

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -1,5 +1,7 @@
 import type { Config } from 'tailwindcss';
 const { fontFamily } = require('tailwindcss/defaultTheme');
+import plugin from 'tailwindcss/plugin';
+
 const {
   default: flattenColorPalette,
 } = require('tailwindcss/lib/util/flattenColorPalette');
@@ -119,7 +121,35 @@ const config = {
       },
     },
   },
-  plugins: [require('tailwindcss-animate'), addVariablesForColors],
+  plugins: [
+    require('tailwindcss-animate'),
+    addVariablesForColors,
+    plugin(({ addUtilities }) => {
+      addUtilities({
+        '.scrollbar-hide': {
+          '-ms-overflow-style': 'none',
+          'scrollbar-width': 'none',
+          '&::-webkit-scrollbar': {
+            display: 'none',
+          },
+        },
+        '.scrollbar-custom': {
+          '&::-webkit-scrollbar': {
+            width: '12px',
+          },
+          '&::-webkit-scrollbar-thumb': {
+            backgroundColor: '#1d2839', // Customize thumb color
+            borderRadius: '6px',
+            border: '3px solid transparent', // Add space around thumb
+            backgroundClip: 'content-box', // Adjust thumb size
+          },
+          '&::-webkit-scrollbar-track': {
+            background: 'transparent', // Hide track
+          },
+        },
+      });
+    }),
+  ],
 } satisfies Config;
 
 export default config;