Merge pull request #10 from AVGVSTVS96/mobileDropdown

Add second dropdown for all menu items under 640px, update layout and margins for small screens

src/components/BlogIndex.astro

@@ -14,14 +14,14 @@ interface Props {
 <ul class={`list-none pl-0 ${className}`}>
   {
     displayPosts.map((post) => (
-      <li class="flex flex-col justify-between border-b-[0.5px] p-2.5 sm:flex-row dark:border-slate-400/20">
-        <div class="mb-2 text-slate-600/75 sm:mb-0 dark:text-slate-200/60">
+      <li class="grid grid-cols-1 border-b-[0.5px] p-2.5 sm:grid-cols-3 dark:border-slate-400/20">
+        <div class="col-span-1 self-center text-slate-600/75 dark:text-slate-200/60">
           {post.frontmatter.pubDate}
         </div>
-        <div>
+        <div class="col-span-2 sm:text-right">
           <a
             href={post.url}
-            class="text-xl font-[600] text-slate-700 underline decoration-sky-500 decoration-2 underline-offset-[5px] hover:text-slate-600/80 hover:decoration-sky-300 dark:text-slate-200 dark:decoration-sky-500 dark:hover:text-slate-200/75 dark:hover:underline dark:hover:decoration-sky-600/80">
+            class="block text-xl font-[600] text-slate-700 underline decoration-sky-500 decoration-2 underline-offset-[5px] hover:text-slate-600/80 hover:decoration-sky-300 dark:text-slate-200 dark:decoration-sky-500 dark:hover:text-slate-200/75 dark:hover:underline dark:hover:decoration-sky-600/80">
             {post.frontmatter.title}
           </a>
         </div>

src/components/Card.astro

@@ -11,7 +11,7 @@ let { variant, displayHr } = Astro.props;
 ---
 
 <div
-  class={`prose prose-slate dark:prose-invert max-w-3xl p-6 prose-h2:font-semibold prose-h2:opacity-80 dark:prose-h2:opacity-60 ${
+  class={`prose prose-slate dark:prose-invert max-w-3xl mx-4 p-6 prose-h2:font-semibold prose-h2:opacity-80 dark:prose-h2:opacity-60 ${
     variant === 'borderless' ? '' : 'border-card'
   }`}>
   <h1 class="mb-2">{Astro.props.title}</h1>

src/components/NavBar.astro

@@ -5,7 +5,7 @@ import ThemeToggle from './subComponents/ThemeToggle.astro';
 ---
 
 <div
-  class="navbar-container sticky top-0 z-10 mb-8 w-full border-b border-slate-400/50 bg-white px-3 py-1 sm:px-6 md:px-10 md:py-2 xl:px-14 dark:border-slate-400/40 dark:bg-slate-950">
+  class="navbar-container sticky top-0 z-10 mb-8 w-full border-b border-slate-400/50 bg-white  px-4 sm:px-6 md:px-10 py-2 xl:px-14 dark:border-slate-400/40 dark:bg-slate-950">
   <div class="button-container flex items-center justify-between gap-6">
     <a href="/">
       <img
@@ -16,21 +16,38 @@ import ThemeToggle from './subComponents/ThemeToggle.astro';
       <img
         src="../astroLogoSmall.svg"
         alt="Astro Logo"
-        class="astro-icon h-8 w-8 opacity-80 sm:block md:hidden"
+        class="astro-icon h-8 w-8 opacity-80 block md:hidden"
       />
     </a>
-    <div class="md:text-md flex lg:text-lg">
-      <Button name="Home" link="/" />
-      <Button name="About" link="/about" />
-      <Button name="Blog" link="/blog" />
-      <DropdownMenu
-        name="Projects"
-        links={[
-          { name: 'Minimal Typography', url: '/designProject' },
-          { name: 'Old Flask Site', url: '/flaskSite' },
-        ]}
-      />
-      <ThemeToggle />
+    <div class="button-theme-container flex">
+      <div class="md:text-md hidden sm:flex lg:text-lg">  
+        <Button name="Home" link="/" />
+        <Button name="About" link="/about" />
+        <Button name="Blog" link="/blog" />
+        <DropdownMenu
+          name="Projects"
+          links={[
+            { name: 'Minimal Typography', url: '/designProject' },
+            { name: 'Old Flask Site', url: '/flaskSite' },
+          ]}
+          showCaret={true}
+          icon={false}
+        />
+      </div>
+      <div class="flex sm:hidden">
+        <DropdownMenu
+          name="hamburger"
+          links={[
+            { name: 'Home', url: '/' },
+            { name: 'About', url: '/about' },
+            { name: 'Blog', url: '/blog' },
+            { name: 'Minimal Typography', url: '/designProject' },
+            { name: 'Old Flask Site', url: '/flaskSite' },
+          ]}
+          showCaret={false}
+          icon={true} />
+      </div>
+        <ThemeToggle />
     </div>
   </div>
 </div>

src/components/subComponents/Button.astro

@@ -5,17 +5,19 @@ interface Props {
   id?: string;
   showCaret?: boolean;
   class?: string;
+  icon?: boolean;
 }
 
-const { name, link, id, showCaret = false, class: className } = Astro.props;
+const { name, link, id, showCaret = false, class: className, icon = false } = Astro.props;
+import { Icon } from 'astro-icon/components';
 ---
 
 <a
   href={link}
   id={id}
   class=`mx-2 flex rounded-lg px-3 py-2 font-normal dark:text-slate-200 hover:bg-slate-200/50 dark:hover:bg-slate-800 hover:text-opacity-100 transition-color duration-200 max-w-max ${className} ${showCaret ? 'pr-1.5' : ''}`>
   <button class="flex" aria-label={name}>
-    {name}
+    {icon ? <Icon name={name} title={name} size={26} /> : name}
     {
       showCaret && (
         <svg

src/components/subComponents/DropdownMenu.astro

@@ -7,18 +7,18 @@ interface Link {
 interface Props {
   name: string;
   links: Link[];
-  showCaret?: boolean;
+  showCaret: boolean;
+  icon: boolean;
 }
 
-const { name = 'Dropdown', links = [], showCaret = false } = Astro.props;
+const { name = 'Dropdown', links = [], showCaret = false, icon = false } = Astro.props;
 import Button from './Button.astro';
 ---
 
-<div class="relative">
-  <Button name={name} id="dropdown-button" showCaret={showCaret} />
+<div class="relative dropdown">
+  <Button name={name} class="dropdown-button" showCaret={showCaret} icon={icon} /> 
   <div
-    id="dropdown"
-    class="absolute mt-1 hidden text-balance rounded-md bg-slate-200/50 p-[0.5px] backdrop-blur-md sm:ml-2 md:w-40 dark:bg-slate-800">
+    class="dropdown-content absolute mt-1 hidden text-balance rounded-md bg-slate-200/50 p-[0.5px] backdrop-blur-md sm:ml-2 md:w-40 dark:bg-slate-800">
     {
       links.map((link) => (
         <a
@@ -32,17 +32,23 @@ import Button from './Button.astro';
 </div>
 
 <script>
-  const button = document.getElementById('dropdown-button');
-  const dropdown = document.getElementById('dropdown');
+  const dropdowns = document.querySelectorAll('.dropdown');
+
+dropdowns.forEach((dropdown) => {
+  const button = dropdown.querySelector('.dropdown-button');
+  const content = dropdown.querySelector('.dropdown-content');
 
   button.addEventListener('click', (event) => {
-    dropdown.classList.toggle('hidden');
+    content.classList.toggle('hidden');
     button.classList.toggle('dropdown-active');
     event.stopPropagation();
   });
 
   document.addEventListener('click', () => {
-    button.classList.remove('dropdown-active');
-    dropdown.classList.add('hidden');
+    if (!dropdown.contains(event.target as Node)) {
+      button.classList.remove('dropdown-active');
+      content.classList.add('hidden');
+    }
   });
+});
 </script>

src/layouts/MDLayout.astro

@@ -35,7 +35,7 @@ import '/src/styles/global.css';
     </script>
   </head>
   <NavBar />
-  <div class="flex justify-center">
+  <div class="flex justify-center mx-6">
     <div class="xl:w-[240px]"></div>
     <article
       class="prose max-w-sm dark:prose-invert prose-h1:pt-2

src/pages/blog.astro

@@ -10,7 +10,7 @@ import MainLayout from '../layouts/MainLayout.astro';
         class="mb-4 text-4xl font-extrabold text-slate-700 dark:text-slate-100">
         Blog Posts
       </h1>
-      <BlogIndex class="w-[500px] sm:w-[560px] md:w-[720px] lg:w-[860px]" />
+      <BlogIndex class="sm:w-[560px] md:w-[720px] lg:w-[860px]" />
     </div>
   </div>
 </MainLayout>

src/pages/index.astro

@@ -31,7 +31,7 @@ import BlogIndex from '../components/BlogIndex.astro';
           pilot high-performance drones.
         </p>
       </Card>
-      <div class="mt-8 p-6">
+      <div class="mt-8 p-6 mx-4">
         <div class="prose mb-3 dark:prose-invert">
           <h1 class="">Latest Posts</h1>
         </div>