Hamburger button for nav menu in small screens

Author: wiseodd

.astro/content-modules.mjs

@@ -1,62 +1,62 @@
 
 export default new Map([
-["src/content/post/annealed-importance-sampling.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fannealed-importance-sampling.mdx&astroContentModuleFlag=true")],
-["src/content/post/bayesian-regression.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fbayesian-regression.mdx&astroContentModuleFlag=true")],
-["src/content/post/batchnorm.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fbatchnorm.mdx&astroContentModuleFlag=true")],
 ["src/content/post/autoencoders.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fautoencoders.mdx&astroContentModuleFlag=true")],
-["src/content/post/chentsov-theorem.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fchentsov-theorem.mdx&astroContentModuleFlag=true")],
+["src/content/post/batchnorm.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fbatchnorm.mdx&astroContentModuleFlag=true")],
+["src/content/post/bayesian-regression.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fbayesian-regression.mdx&astroContentModuleFlag=true")],
 ["src/content/post/boundary-seeking-gan.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fboundary-seeking-gan.mdx&astroContentModuleFlag=true")],
+["src/content/post/brouwers-fixed-point.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fbrouwers-fixed-point.mdx&astroContentModuleFlag=true")],
+["src/content/post/chentsov-theorem.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fchentsov-theorem.mdx&astroContentModuleFlag=true")],
 ["src/content/post/conditional-gan-tensorflow.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fconditional-gan-tensorflow.mdx&astroContentModuleFlag=true")],
 ["src/content/post/conditional-vae.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fconditional-vae.mdx&astroContentModuleFlag=true")],
+["src/content/post/annealed-importance-sampling.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fannealed-importance-sampling.mdx&astroContentModuleFlag=true")],
 ["src/content/post/contractive-autoencoder.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fcontractive-autoencoder.mdx&astroContentModuleFlag=true")],
-["src/content/post/brouwers-fixed-point.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fbrouwers-fixed-point.mdx&astroContentModuleFlag=true")],
+["src/content/post/convnet-maxpool-layer.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fconvnet-maxpool-layer.mdx&astroContentModuleFlag=true")],
+["src/content/post/deploying-wagtail.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fdeploying-wagtail.mdx&astroContentModuleFlag=true")],
 ["src/content/post/conv-probit.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fconv-probit.mdx&astroContentModuleFlag=true")],
 ["src/content/post/convnet-conv-layer.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fconvnet-conv-layer.mdx&astroContentModuleFlag=true")],
 ["src/content/post/coupled-gan.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fcoupled-gan.mdx&astroContentModuleFlag=true")],
-["src/content/post/deploying-wagtail.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fdeploying-wagtail.mdx&astroContentModuleFlag=true")],
-["src/content/post/convnet-maxpool-layer.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fconvnet-maxpool-layer.mdx&astroContentModuleFlag=true")],
-["src/content/post/developing-wagtail.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fdeveloping-wagtail.mdx&astroContentModuleFlag=true")],
 ["src/content/post/dropout.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fdropout.mdx&astroContentModuleFlag=true")],
-["src/content/post/fisher-information.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Ffisher-information.mdx&astroContentModuleFlag=true")],
 ["src/content/post/forward-reverse-kl.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fforward-reverse-kl.mdx&astroContentModuleFlag=true")],
+["src/content/post/developing-wagtail.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fdeveloping-wagtail.mdx&astroContentModuleFlag=true")],
+["src/content/post/fisher-information.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Ffisher-information.mdx&astroContentModuleFlag=true")],
 ["src/content/post/gan-pytorch.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fgan-pytorch.mdx&astroContentModuleFlag=true")],
+["src/content/post/gan-tensorflow.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fgan-tensorflow.mdx&astroContentModuleFlag=true")],
 ["src/content/post/gaussian-anomaly-detection.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fgaussian-anomaly-detection.mdx&astroContentModuleFlag=true")],
 ["src/content/post/gibbs-sampling.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fgibbs-sampling.mdx&astroContentModuleFlag=true")],
-["src/content/post/gan-tensorflow.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fgan-tensorflow.mdx&astroContentModuleFlag=true")],
 ["src/content/post/gleam-use.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fgleam-use.mdx&astroContentModuleFlag=true")],
 ["src/content/post/infogan.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Finfogan.mdx&astroContentModuleFlag=true")],
 ["src/content/post/gleam-aoc-2024.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fgleam-aoc-2024.mdx&astroContentModuleFlag=true")],
 ["src/content/post/hessian-invariance.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fhessian-invariance.mdx&astroContentModuleFlag=true")],
 ["src/content/post/hessian-curvatures.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fhessian-curvatures.mdx&astroContentModuleFlag=true")],
+["src/content/post/kl-mle.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fkl-mle.mdx&astroContentModuleFlag=true")],
 ["src/content/post/laplace.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Flaplace.mdx&astroContentModuleFlag=true")],
+["src/content/post/jekyll-fb-share.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fjekyll-fb-share.mdx&astroContentModuleFlag=true")],
 ["src/content/post/lda-gibbs.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Flda-gibbs.mdx&astroContentModuleFlag=true")],
 ["src/content/post/least-squares-gan.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fleast-squares-gan.mdx&astroContentModuleFlag=true")],
 ["src/content/post/levelset-method.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Flevelset-method.mdx&astroContentModuleFlag=true")],
 ["src/content/post/lstm-backprop.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Flstm-backprop.mdx&astroContentModuleFlag=true")],
 ["src/content/post/manifold-gaussians.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fmanifold-gaussians.mdx&astroContentModuleFlag=true")],
-["src/content/post/kl-mle.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fkl-mle.mdx&astroContentModuleFlag=true")],
 ["src/content/post/levelset-segmentation.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Flevelset-segmentation.mdx&astroContentModuleFlag=true")],
 ["src/content/post/metropolis-hastings.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fmetropolis-hastings.mdx&astroContentModuleFlag=true")],
 ["src/content/post/minkowski-dirichlet.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fminkowski-dirichlet.mdx&astroContentModuleFlag=true")],
 ["src/content/post/mayer-vietoris-sphere.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fmayer-vietoris-sphere.mdx&astroContentModuleFlag=true")],
-["src/content/post/jekyll-fb-share.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fjekyll-fb-share.mdx&astroContentModuleFlag=true")],
-["src/content/post/natural-gradient.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fnatural-gradient.mdx&astroContentModuleFlag=true")],
-["src/content/post/optimization-riemannian-manifolds.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Foptimization-riemannian-manifolds.mdx&astroContentModuleFlag=true")],
-["src/content/post/nn-optimization.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fnn-optimization.mdx&astroContentModuleFlag=true")],
 ["src/content/post/mle-vs-map.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fmle-vs-map.mdx&astroContentModuleFlag=true")],
+["src/content/post/optimization-riemannian-manifolds.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Foptimization-riemannian-manifolds.mdx&astroContentModuleFlag=true")],
 ["src/content/post/parallel-monte-carlo.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fparallel-monte-carlo.mdx&astroContentModuleFlag=true")],
+["src/content/post/natural-gradient.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fnatural-gradient.mdx&astroContentModuleFlag=true")],
+["src/content/post/nn-optimization.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fnn-optimization.mdx&astroContentModuleFlag=true")],
+["src/content/post/nn-sgd.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fnn-sgd.mdx&astroContentModuleFlag=true")],
 ["src/content/post/rejection-sampling.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Frejection-sampling.mdx&astroContentModuleFlag=true")],
-["src/content/post/plotting.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fplotting.mdx&astroContentModuleFlag=true")],
 ["src/content/post/residual-net.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fresidual-net.mdx&astroContentModuleFlag=true")],
-["src/content/post/nn-sgd.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fnn-sgd.mdx&astroContentModuleFlag=true")],
 ["src/content/post/scrapy-long-running.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fscrapy-long-running.mdx&astroContentModuleFlag=true")],
-["src/content/post/slice-sampling.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fslice-sampling.mdx&astroContentModuleFlag=true")],
+["src/content/post/plotting.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fplotting.mdx&astroContentModuleFlag=true")],
 ["src/content/post/theano-pde.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Ftheano-pde.mdx&astroContentModuleFlag=true")],
+["src/content/post/slice-sampling.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fslice-sampling.mdx&astroContentModuleFlag=true")],
 ["src/content/post/twitter-auth-flask.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Ftwitter-auth-flask.mdx&astroContentModuleFlag=true")],
 ["src/content/post/vae-pytorch.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fvae-pytorch.mdx&astroContentModuleFlag=true")],
 ["src/content/post/variational-autoencoder.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fvariational-autoencoder.mdx&astroContentModuleFlag=true")],
-["src/content/post/wagtail-dev-env.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fwagtail-dev-env.mdx&astroContentModuleFlag=true")],
 ["src/content/post/volume-form.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fvolume-form.mdx&astroContentModuleFlag=true")],
+["src/content/post/wagtail-dev-env.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fwagtail-dev-env.mdx&astroContentModuleFlag=true")],
 ["src/content/post/wasserstein-gan.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fwasserstein-gan.mdx&astroContentModuleFlag=true")],
 ["src/content/post/writing-advice.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpost%2Fwriting-advice.mdx&astroContentModuleFlag=true")]]);
 

src/components/layout/Header.astro

@@ -6,15 +6,16 @@
   class='mb-12 flex w-full flex-wrap pb-3 text-sm sm:flex-nowrap sm:justify-start'
 >
   <nav
-    class='items-left relative mx-auto flex w-full flex-col justify-between sm:flex sm:flex-row sm:items-center'
+    class='relative mx-auto flex w-full items-center justify-between'
     aria-label='global'
   >
     <a class='flex-none text-xl font-semibold' href='/' aria-label='Brand'
       >Agustinus Kristiadi</a
     >
 
+    <!-- Desktop menu -->
     <div
-      class='flex flex-row items-center justify-start gap-x-7 pt-3 sm:justify-center sm:pt-0'
+      class='absolute left-1/2 hidden -translate-x-1/2 transform items-center justify-center gap-x-10 text-sm md:flex md:text-lg'
     >
       <a
         href='/'
@@ -50,10 +51,13 @@
         aria-label='Nav Menu Item'
         >Blog
       </a>
+    </div>
 
+    <!-- Right side buttons container -->
+    <div class='flex items-center gap-x-2'>
       <button
         id='toggleDarkMode'
-        class='relative rounded-md border border-border p-1.5 transition-all hover:bg-border'
+        class='relative rounded-md p-1.5 transition-all hover:bg-border'
       >
         <span class='sr-only'>Dark Theme</span>
         <svg
@@ -79,10 +83,55 @@
           ></path></svg
         >
       </button>
+
+      <!-- Mobile Menu Button -->
+      <button
+        id='menu-toggle'
+        class='rounded-md p-0.5 text-[hsl(var(--foreground))] transition-all hover:bg-border md:hidden'
+      >
+        <svg
+          xmlns='http://www.w3.org/2000/svg'
+          fill='none'
+          viewBox='0 0 24 24'
+          stroke='currentColor'
+          class='h-6 w-6'
+        >
+          <path
+            stroke-linecap='round'
+            stroke-linejoin='round'
+            stroke-width='2'
+            d='M4 6h16M4 12h16M4 18h16'></path>
+        </svg>
+      </button>
+    </div>
+
+    <!-- Mobile Dropdown Menu -->
+    <div
+      id='mobile-menu'
+      class='absolute right-0 top-full z-10 mt-2 hidden w-48 rounded-md bg-background shadow-lg md:hidden'
+    >
+      <div class='py-1'>
+        <a href='/cv' class='block px-4 py-2 font-bold hover:bg-muted'>CV</a>
+        <a href='/group' class='block px-4 py-2 font-bold hover:bg-muted'>Students</a>
+        <a href='/publications' class='block px-4 py-2 font-bold hover:bg-muted'
+          >Publications</a
+        >
+        <a href='/blog' class='block px-4 py-2 font-bold hover:bg-muted'>Blog</a>
+      </div>
     </div>
   </nav>
 </header>
 
+<script>
+  // Toggle mobile menu
+  const menuToggle = document.getElementById("menu-toggle");
+  const mobileMenu = document.getElementById("mobile-menu");
+
+  menuToggle?.addEventListener("click", () => {
+    mobileMenu?.classList.toggle("hidden");
+  });
+</script>
+
 <script>
   function getCurrentTheme() {
     return localStorage.getItem("theme");