contact form css in light mode; active class on sidebar menu items

Author: xkeshav

src/components/ContactSection.astro

@@ -26,22 +26,22 @@
           <form id="contactForm" action="" class="contact-form mt-[20px]">
             <input
               type="text"
-              name=""
+              name="name"
               placeholder="First name"
-              class="formInputBg mt-[5px] w-full rounded-[5px] p-[10px]"
+              class="light:border-2 mt-[5px] w-full rounded-[5px] p-[10px] dark:border-2"
             />
             <input
               type="email"
-              name=""
+              name="email"
               placeholder="Email"
-              class="formInputBg mt-[5px] w-full rounded-[5px] p-[10px]"
+              class="light:border-2 mt-[5px] w-full rounded-[5px] p-[10px] md:mt-[10px] md:p-[15px] dark:border-2"
             />
             <textarea
-              name=""
+              name="message"
               cols="30"
               rows="10"
               placeholder="Message"
-              class="formInputBg mt-[5px] h-[100px] w-full rounded-[10px] p-[10px] md:h-[120px]"></textarea>
+              class="light:border-2 mt-[5px] h-[100px] w-full rounded-[10px] p-[10px] md:h-[120px]"></textarea>
             <button class="mt-[5px] h-[40px] rounded-[5px] bg-[#ffcc00] px-[20px] text-[#111]"> Send </button>
           </form>
         </div>

src/components/Link.astro

@@ -1,7 +1,27 @@
 ---
-const { href, name } = Astro.props;
+interface Props {
+  href: string;
+  name: string;
+  class?: string;
+}
+
+const { href, name, class: className } = Astro.props;
 ---
 
-<a class="link" href={href} aria-label={name}>
+<a class:list={["link", className]} href={href} aria-label={name}>
   <span>{name}</span>
 </a>
+
+<style>
+  .link {
+    @apply relative inline-block px-2 py-1 text-current no-underline transition-colors duration-200;
+  }
+
+  .link:hover {
+    @apply text-current opacity-80;
+  }
+
+  .link span {
+    @apply relative z-10;
+  }
+</style>

src/layouts/Navigation.astro

@@ -7,6 +7,15 @@ interface Props {
 }
 
 const { pages } = Astro.props;
+const currentPath = Astro.url.pathname;
+
+// Helper function to check if a path is active (exact match or active parent)
+const isActive = (path: string) => {
+  if (path === "/") {
+    return currentPath === "/";
+  }
+  return currentPath === path || currentPath.startsWith(`${path}/`);
+};
 ---
 
 <nav class="nav">
@@ -16,9 +25,43 @@ const { pages } = Astro.props;
         .filter((p) => p.isActive)
         .map((p) => (
           <li class="nav__list__item">
-            <Link href={p.path} name={p.name} />
+            <Link href={p.path} name={p.name!} class={isActive(p.path) ? "active" : ""} />
           </li>
         ))
     }
   </ul>
 </nav>
+
+<style>
+  .nav {
+    @apply flex items-center;
+  }
+
+  .nav__list {
+    @apply m-0 flex list-none gap-4 p-0;
+  }
+
+  .nav__list__item {
+    @apply relative;
+  }
+
+  /* Active link styles */
+  .nav__list__item :global(a.active) {
+    @apply relative;
+  }
+
+  .nav__list__item :global(a.active)::after {
+    content: "";
+    @apply absolute bottom-0 left-0 h-0.5 w-full scale-x-100 transform bg-current;
+    animation: borderSlide 0.3s ease-out;
+  }
+
+  @keyframes borderSlide {
+    from {
+      transform: scaleX(0);
+    }
+    to {
+      transform: scaleX(1);
+    }
+  }
+</style>