fix 100% height header and added auth to /pokemon

src/assets/css/main.scss

@@ -94,6 +94,7 @@
 }
 
 .pokedex-page {
+  z-index: 99;
   position: relative;
   top: 50px;
   @media (min-width: 768px) {
@@ -426,7 +427,7 @@ $hdr-big-btn-width: $hdr-side-width - $hdr-logo-width - 2 * $hdr-big-btn-margin;
     margin: 0 auto; /* Remove default margin */
       --a: 8deg; 
       /* Initial mask to create the shine line */
-      mask: linear-gradient(135deg, #000c 40%, #000, #000c 60%) 100% 100% / 240% 240%;
+      mask: linear-gradient(135deg, #fffc 40%, #fff, #fffc 60%) 100% 100% / 240% 240%;
       transition: .4s; 
   transform: perspective(400px) rotate3d(var(--i, 1, -1), 0, var(--a));       
 }
@@ -444,7 +445,7 @@ $hdr-big-btn-width: $hdr-side-width - $hdr-logo-width - 2 * $hdr-big-btn-margin;
     margin: 0 auto; /* Remove default margin */
       --a: 8deg; 
       /* Initial mask to create the shine line */
-      mask: linear-gradient(135deg, #000c 40%, #000, #000c 60%) 100% 100% / 240% 240%;
+      mask: linear-gradient(135deg, #fffc 40%, #fff, #fffc 60%) 100% 100% / 240% 240%;
       transition: .4s; 
   transform: perspective(400px) rotate3d(var(--i, 1, -1), 0, var(--a));       
 }
@@ -460,7 +461,7 @@ $hdr-big-btn-width: $hdr-side-width - $hdr-logo-width - 2 * $hdr-big-btn-margin;
     margin: 0 auto; /* Remove default margin */
       --a: 8deg; 
       /* Initial mask to create the shine line */
-      mask: linear-gradient(135deg, #000d 40%, #000, #000d 60%) 100% 100% / 240% 240%;
+      mask: linear-gradient(135deg, #fffc 40%, #fff, #fffc 60%) 100% 100% / 240% 240%;
       transition: .4s; 
   transform: perspective(400px) rotate3d(var(--i, 1, -1), 0, var(--a));      
 }
@@ -483,7 +484,7 @@ $hdr-big-btn-width: $hdr-side-width - $hdr-logo-width - 2 * $hdr-big-btn-margin;
     margin: 0 auto; /* Remove default margin */
       --a: 8deg; 
       /* Initial mask to create the shine line */
-      mask: linear-gradient(135deg, #000c 40%, #000, #000c 60%) 100% 100% / 240% 240%;
+      mask: linear-gradient(135deg, #fffc 40%, #fff, #fffc 60%) 100% 100% / 240% 240%;
       transition: .4s; 
   transform: perspective(400px) rotate3d(var(--i, 1, -1), 0, var(--a));        
 }
@@ -492,9 +493,11 @@ $hdr-big-btn-width: $hdr-side-width - $hdr-logo-width - 2 * $hdr-big-btn-margin;
 .header-top { 
   /* pin to top - 0 is default */
   bottom: 0;
+  position: fixed;
   /* raise z-index to cover, higher here to allow 
      a range of z-indexes in the scrolling content */
   z-index: 100;
+  max-height: 150px;
   transform:rotate(180deg);
   /* height overflows */
   @media (min-width:768px) {
@@ -661,9 +664,9 @@ $hdr-big-btn-width: $hdr-side-width - $hdr-logo-width - 2 * $hdr-big-btn-margin;
   height: $hdr-topwell-height;
   width: 100%;
   border-radius: 0 0 $border-radius-hdr $border-radius-hdr;
-@media (min-width:768px) {
+  @media (min-width:768px) {
-    border-radius: $border-radius-hdr 0 $border-radius-hdr 0;
+      border-radius: $border-radius-hdr 0 $border-radius-hdr 0;
-}
+  }
 }
 
 /* NAV */

src/components/PokedexHeader.astro

@@ -1,9 +1,8 @@
 ---
 import '/src/assets/css/main.scss';
-import StickyFilter from './StickyFilter.astro';
 ---
 
-<header class="header-top position-fixed w-100">
+<header class="header-top w-100">
     <div class="header-wrap">
         <div class="header-content">
             <div class="header-logo d-none d-md-block">
@@ -11,10 +10,10 @@ import StickyFilter from './StickyFilter.astro';
             </div>
         </div>
         <div class="header-logo-patch d-none d-md-block"></div>
-        <nav class="nav-main horizontal-nav">
+        <nav class="nav-main horizontal-nav d-none">
         </nav>
         <div class="header-social pt-3">
-            <StickyFilter />
+            <slot />
             <div class="redCircle d-none d-md-block"></div>
             <div class="yellowCircle d-none d-md-block"></div>
             <div class="greenCircle d-none d-md-block"></div>

src/middleware.ts

@@ -1,3 +1,14 @@
-import { clerkMiddleware } from "@clerk/astro/server";
+// src/middleware.ts
+import { clerkMiddleware, createRouteMatcher } from '@clerk/astro/server';
+import type { AstroMiddlewareRequest, AstroMiddlewareResponse } from 'astro';
 
-export const onRequest = clerkMiddleware();
+const isProtectedRoute = createRouteMatcher([
+  '/pokemon',
+]);
+
+export const onRequest = clerkMiddleware((auth, context) => {
+  if (!auth().userId && isProtectedRoute(context.request)) {
+    // Redirect unauthenticated users to the sign-in page
+    return auth().redirectToSignIn(); 
+  }
+});

src/pages/index.astro

@@ -2,8 +2,6 @@
 import Layout from '../layouts/Main.astro';
 import PokedexHeader from '../components/PokedexHeader.astro';
 export const prerender = false;
-
 ---
-
 <Layout>
 <PokedexHeader />

src/pages/pokemon.astro

@@ -2,12 +2,15 @@
 import Layout from '../layouts/Main.astro';
 import CardGrid from "../components/CardGrid.astro";
 import PokedexHeader from '../components/PokedexHeader.astro';
+import StickyFilter from '../components/StickyFilter.astro';
 export const prerender = false;
 
 ---
 
 <Layout>
-<PokedexHeader />
+<PokedexHeader>
+    <StickyFilter />
+</PokedexHeader>
 <div class="container">
     <CardGrid />
     <div class="modal fade card-modal" id="cardModal" tabindex="-1" aria-labelledby="cardModalLabel" aria-hidden="true">