fix: close sheet nav with hash url

mickasmt · Sep 15, 2023 · 6746597 · 6746597
1 parent 1be50fc
commit 6746597
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 5 deletions.
diff --git a/src/components/layout/header.astro b/src/components/layout/header.astro
@@ -15,7 +15,7 @@ const { items, className } = Astro.props;
 
 <header
   class={cn(
-    "flex items-center h-14 md:h-18 z-50 sticky top-0 bg-background",
+    "flex items-center h-16 md:h-18 z-50 sticky top-0 bg-background",
     className
   )}
 >

diff --git a/src/components/layout/sheet-mobile-nav.tsx b/src/components/layout/sheet-mobile-nav.tsx
@@ -43,7 +43,12 @@ export function SheetMobileNav() {
               {mergedMainNav.map(
                 (item) =>
                   item.href && (
-                    <a key={item.href} href={item.href} className="text-muted-foreground">
+                    <a
+                      key={item.href}
+                      href={item.href}
+                      className="text-muted-foreground"
+                      onClick={() => item.href.startsWith("/#") ? setOpen(false) : undefined}
+                    >
                       {item.title}
                     </a>
                   )
@@ -58,7 +63,10 @@ export function SheetMobileNav() {
                       <React.Fragment key={item.href + idx}>
                         {!item.disabled &&
                           (item.href ? (
-                            <a href={item.href} className="text-muted-foreground">
+                            <a
+                              href={item.href}
+                              className="text-muted-foreground"
+                            >
                               {item.title}
                             </a>
                           ) : (

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -20,12 +20,12 @@ import { cn } from "@/lib/utils";
       <h1
         class="font-heading text-3xl sm:text-5xl md:text-6xl lg:text-7xl balance-text"
       >
-        A starter template built using Astro 3.0 <span class="font-sans font-bold">+</span> shadcn<span class="font-sans font-bold">/</span>ui.
+        A mordern example app built using Astro 3.0 <span class="font-sans font-bold">+</span> shadcn<span class="font-sans font-bold">/</span>ui.
       </h1>
       <p
         class="max-w-[42rem] leading-normal text-muted-foreground sm:text-xl sm:leading-8 balance-text"
       >
-        I&apos;m building a starter template with Astro 3.0 and based on
+        I&apos;m building a mordern example app with Astro 3.0 and based on
         shadcn-ui/taxonomy. Follow along as we figure this out together.
       </p>
       <div class="space-x-4">

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -85,6 +85,11 @@
     @apply border-border;
   }
 
+  html {
+    /* scroll-padding-top: 4rem; */
+    @apply scroll-pt-16 lg:scroll-pt-0;
+  }
+
   body {
     @apply bg-background text-foreground font-sans;
     font-feature-settings: "rlig" 1, "calt" 1;