Don't rely on Astro.url

Author: ysthakur

src/components/header/tablet/Menu.astro

@@ -3,11 +3,24 @@ import { PAGES, SOCIAL_MEDIA_LINKS } from "../../../consts";
 import HeaderLink from "../HeaderLink.astro";
 import MenuItem from "./MenuItem.astro";
 import ThemeDropdown from "./ThemeDropdown.astro";
+
+interface Props {
+  /**
+   * The title of the current page
+   */
+  title: string;
+  /**
+   * Whether the current page is a blog post
+   */
+  isBlogPost: boolean;
+}
+
+const { title, isBlogPost } = Astro.props;
 ---
 
 <div id="laptop-header" class="header">
   <nav class="menu">
-    {PAGES.map((page) => <MenuItem {...page} />)}
+    {PAGES.map((page) => <MenuItem curr={title} isBlogPost={isBlogPost} {...page} />)}
   </nav>
   <div class="text-start social-media-icons">
     {

src/components/header/tablet/MenuItem.astro

@@ -4,16 +4,25 @@
 import HeaderLink from "../HeaderLink.astro";
 
 interface Props {
+  /**
+   * The title of the current page
+   */
+  curr: string;
+  /**
+   * Whether the current page is a blog post
+   */
+  isBlogPost: boolean;
   link: string;
   name: string;
   leetName: string;
 }
 
-const { link, name, leetName } = Astro.props;
+const { curr, isBlogPost, link, name, leetName } = Astro.props;
+const selected = curr === name || (isBlogPost && name === "Blog");
 ---
 
 <HeaderLink link={link} title={name}>
-  <span class="item" class:list={[{ selected: Astro.url.pathname == link }]}>
+  <span class="item" class:list={[{ selected }]}>
     {leetName}
   </span>
 </HeaderLink>

src/layouts/BaseLayout.astro

@@ -5,7 +5,13 @@ import HomeLink from "../components/header/HomeLink.astro";
 import TabletHeader from "../components/header/tablet/Menu.astro";
 import MobileHeader from "../components/header/mobile/Menu.astro";
 
-const { frontmatter } = Astro.props;
+interface Props {
+  frontmatter?: { title: string };
+  title: string;
+  isBlogPost: boolean;
+}
+
+const { frontmatter, isBlogPost } = Astro.props;
 let { title } = Astro.props;
 // If a title wasn't explicitly passed in, get it from the frontmatter
 if (!title && frontmatter && "title" in frontmatter) {
@@ -23,7 +29,7 @@ if (!title && frontmatter && "title" in frontmatter) {
     <header>
       <HomeLink />
       <MobileHeader />
-      <TabletHeader />
+      <TabletHeader title={title} isBlogPost={isBlogPost} />
     </header>
     <main>
       <slot />

src/layouts/BlogPost.astro

@@ -9,7 +9,7 @@ const { title, description, author, pubDate, updatedDate, heroImage } =
   Astro.props;
 ---
 
-<BaseLayout title={title} description={description}>
+<BaseLayout title={title} isBlogPost={true} description={description}>
   <article>
     <div class="hero-image">
       {heroImage && <img width={1020} height={510} src={heroImage} alt="" />}