Blurred header, darker challenges, etc.

Author: ky28059

app/(home)/page.tsx

@@ -3,7 +3,7 @@ import Timer from '@/app/(home)/Timer';
 
 export default function Home() {
     return (
-        <main className="container py-24 flex flex-col items-center">
+        <main className="container pt-36 pb-24 flex flex-col items-center">
             <img src="/assets/logo.svg" />
             <Timer />
             todo

app/NavBar.tsx

@@ -1,9 +1,14 @@
+'use client'
+
+import {useScroll} from '@/hooks/useScroll';
 import NavLink from '@/app/NavLink';
 
 
 export default function NavBar() {
+    const scroll = useScroll();
+
     return (
-        <nav className="flex justify-center pt-2">
+        <nav className={'flex justify-center pt-3 pb-2 fixed w-full top-0 transition duration-200' + (scroll > 0 ? ' bg-black/30 backdrop-blur-md' : '')}>
             <NavLink href="/">Home</NavLink>
             <NavLink href="/scoreboard">Scoreboard</NavLink>
             <NavLink href="/challenges">Challenges</NavLink>

app/challenges/Challenge.tsx

@@ -1,6 +1,6 @@
 export default function Challenge() {
     return (
-        <div className="bg-black/30 px-6 py-4 rounded">
+        <div className="bg-black/50 px-6 py-4 rounded">
             <div className="flex justify-between">
                 <h3 className="font-semibold">
                     web/foo

app/challenges/Challenges.tsx

@@ -3,7 +3,9 @@ import Challenge from '@/app/challenges/Challenge';
 
 export default function Challenges() {
     return (
-        <div className="flex-grow flex flex-col gap-2">
+        <div className="flex-grow flex flex-col gap-3">
+            <Challenge />
+            <Challenge />
             <Challenge />
             <Challenge />
             <Challenge />

app/challenges/Filters.tsx

@@ -2,16 +2,19 @@ import type {ReactNode} from 'react';
 
 export default function Filters() {
     return (
-        <div className="bg-black/20 px-6 py-4 rounded w-80 h-max">
+        <div className="bg-black/30 px-6 py-4 rounded w-80 h-max sticky top-32">
             <h2 className="font-semibold mb-1">Filters</h2>
 
-            <div className="flex flex-col gap-1 pl-2">
+            <div className="flex flex-col gap-1 pl-2 mb-3">
                 <FilterOption>crypto</FilterOption>
                 <FilterOption>misc</FilterOption>
                 <FilterOption>pwn</FilterOption>
                 <FilterOption>rev</FilterOption>
                 <FilterOption>web</FilterOption>
             </div>
+            <div className="pl-2">
+                <FilterOption>Show solved</FilterOption>
+            </div>
         </div>
     )
 }

app/challenges/page.tsx

@@ -4,7 +4,7 @@ import Challenges from '@/app/challenges/Challenges';
 
 export default function ChallengesPage() {
     return (
-        <div className="container py-24 flex gap-4">
+        <div className="container pt-32 pb-24 flex gap-4">
             <Filters />
             <Challenges />
         </div>

hooks/useScroll.ts

@@ -0,0 +1,15 @@
+import {useEffect, useState} from 'react';
+
+
+// Returns the current vertical scroll of the window, in pixels.
+export function useScroll() {
+    const [scroll, setScroll] = useState(0);
+
+    useEffect(() => {
+        setScroll(window.scrollY);
+        document.addEventListener('scroll', () => setScroll(window.scrollY));
+        return () => document.removeEventListener('scroll', () => setScroll(window.scrollY));
+    }, []);
+
+    return scroll;
+}