From f3d8a46795ed11a9fedf7717e60a5962155d8d9b Mon Sep 17 00:00:00 2001
From: Thomas Cole <thomas.patrick.cole@gmail.com>
Date: Fri, 23 Dec 2022 09:34:59 -0500
Subject: [PATCH] Started work on mobile friendly layout

---
 src/components/nav/Nav.astro             | 45 ++++++++++++++++++++++--
 src/layouts/BlogLayout.astro             |  2 +-
 src/layouts/InteractiveDemoLayout.astro  |  2 +-
 src/layouts/Layout.astro                 |  2 +-
 src/pages/blog/[page].astro              |  2 +-
 src/pages/index.astro                    |  2 +-
 src/pages/projects/[page].astro          |  2 +-
 src/pages/projects/demo/quicksort.svelte | 18 +++++++---
 src/pages/resume.astro                   |  2 +-
 9 files changed, 62 insertions(+), 15 deletions(-)

diff --git a/src/components/nav/Nav.astro b/src/components/nav/Nav.astro
index 7679b34..9146dda 100644
--- a/src/components/nav/Nav.astro
+++ b/src/components/nav/Nav.astro
@@ -4,7 +4,20 @@
     import ThemeToggle from "../misc/ThemeToggle.astro";
 ---
 
-<div class="fixed top-0 left-0 w-72 h-screen p-4 flex flex-col bg-base-200">
+<style>
+    [data-shown="true"] {
+        transform: translateX(0);
+    }
+</style>
+
+<div id="menu" data-shown=""
+    class="fixed top-0 left-0 w-72 h-screen p-4 flex flex-col bg-base-200 sm:-translate-x-full md:-translate-x-full lg:translate-x-0 xl:translate-x-0 2xl: translate-x-0 transition-all duration-100 z-50">
+
+    <button id="menu-close" class="absolute top-0 right-0 p-2 lg:hidden 2xl:hidden">
+        <span class="material-symbols-outlined">
+            close
+        </span>
+    </button>
 
     <a href="/">
         <div class="transition ease-in-out w-1/2 hover:scale-105 block mx-auto mt-3 mb-6">
@@ -40,7 +53,8 @@
             </a>
         </li>
         <li class="flex">
-            <a href="mailto:thomas.patrick.cole@gmail.com" class="w-full hover:bg-base-100 rounded transation ease-in-out duration-200">
+            <a href="mailto:thomas.patrick.cole@gmail.com"
+                class="w-full hover:bg-base-100 rounded transation ease-in-out duration-200">
                 <button class="p-2">Contact</button>
             </a>
         </li>
@@ -48,4 +62,29 @@
 
     <Divider />
     <ThemeToggle />
-</div>
\ No newline at end of file
+</div>
+
+<div
+    class="hidden h-12 w-full sm:block md:block lg:hidden xl:hidden 2xl:hidden bg-base-200 text-left transition-all duration-100">
+
+    <button id="menubtn" class="w-12 h-12 m-auto">
+        <span class="material-symbols-outlined mt-1">
+            menu
+        </span>
+    </button>
+
+</div>
+
+<script is:inline>
+    const btn = document.getElementById("menubtn");
+    const menu = document.getElementById("menu");
+    const closebtn = document.getElementById("menu-close")
+
+    btn.addEventListener('click', () => {
+        menu.dataset.shown = "true";
+    });
+
+    closebtn.addEventListener('click', () => {
+        menu.dataset.shown = "false";
+    })
+</script>
\ No newline at end of file
diff --git a/src/layouts/BlogLayout.astro b/src/layouts/BlogLayout.astro
index e44d8b8..986b9b1 100644
--- a/src/layouts/BlogLayout.astro
+++ b/src/layouts/BlogLayout.astro
@@ -6,7 +6,7 @@ const { frontmatter } = Astro.props;
 ---
 
 <Layout>
-    <main class="w-1/2 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2 mx-auto mt-4 mb-6 flex flex-col justify-center">
+    <main class="w-1/2 sm:w-5/6 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2 mx-auto mt-4 mb-6 flex flex-col justify-center">
         <img class="aspect-video object-cover mb-4" src={frontmatter.image} alt="">
         <p class="my-2 font-bold text-5xl">{frontmatter.title}</p>
         <p>{frontmatter.date}</p>
diff --git a/src/layouts/InteractiveDemoLayout.astro b/src/layouts/InteractiveDemoLayout.astro
index e44d8b8..986b9b1 100644
--- a/src/layouts/InteractiveDemoLayout.astro
+++ b/src/layouts/InteractiveDemoLayout.astro
@@ -6,7 +6,7 @@ const { frontmatter } = Astro.props;
 ---
 
 <Layout>
-    <main class="w-1/2 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2 mx-auto mt-4 mb-6 flex flex-col justify-center">
+    <main class="w-1/2 sm:w-5/6 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2 mx-auto mt-4 mb-6 flex flex-col justify-center">
         <img class="aspect-video object-cover mb-4" src={frontmatter.image} alt="">
         <p class="my-2 font-bold text-5xl">{frontmatter.title}</p>
         <p>{frontmatter.date}</p>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 9a59edb..7fd7ae0 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -50,7 +50,7 @@
 
 <body class="">
 	<Nav />
-	<div class="ml-72">
+	<div class="ml-72 sm:ml-0 md:ml-0 lg:ml-72 xl:ml-72 2xl:ml-72">
 		<slot />
 		<Footer/>
 	</div>
diff --git a/src/pages/blog/[page].astro b/src/pages/blog/[page].astro
index 7195705..20da54b 100644
--- a/src/pages/blog/[page].astro
+++ b/src/pages/blog/[page].astro
@@ -17,7 +17,7 @@
 ---
 
 <Layout title=" | Blog">
-    <main class="w-1/2 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2 mx-auto mt-4">
+    <main class="w-1/2 sm:w-5/6 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2 mx-auto mt-4">
         <div class="flex flex-col">
             {
             page.data.map((post: any) => (
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 0d66f1d..9a5459c 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -18,7 +18,7 @@ const projects = (await Astro.glob("./projects/*.{md,mdx}")).sort(
 ---
 
 <Layout>
-	<main class="flex flex-col m-6 w-1/2 mx-auto md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2">
+	<main class="flex flex-col m-6 w-1/2 mx-auto sm:w-5/6 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2">
 		<section>
 			<p class="text-xl py-1">Hello World 👋</p>
 			<p>I'm glad you are here!</p>
diff --git a/src/pages/projects/[page].astro b/src/pages/projects/[page].astro
index f3f23bb..9fc4474 100644
--- a/src/pages/projects/[page].astro
+++ b/src/pages/projects/[page].astro
@@ -17,7 +17,7 @@
 ---
 
 <Layout title=" | Blog">
-    <main class="w-1/2 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2 mx-auto mt-4">
+    <main class="w-1/2 sm:w-5/6 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2 mx-auto mt-4">
         <div class="flex flex-col">
             {
             page.data.map((post: any) => (
diff --git a/src/pages/projects/demo/quicksort.svelte b/src/pages/projects/demo/quicksort.svelte
index 52d540e..f05dcb3 100644
--- a/src/pages/projects/demo/quicksort.svelte
+++ b/src/pages/projects/demo/quicksort.svelte
@@ -22,7 +22,15 @@
             p5.shuffle(data, true)
             quicksort(data, 0, data.length-1);
             animArray.push(new arrayFrame(data.toString(), null, null, null));
-            p5.createCanvas(850,400)
+            
+            //setup the canvas
+            let div = p5.createDiv('');
+            div.addClass('w-full');
+            div.addClass('mx-auto');
+            div.addClass('flex');
+            div.addClass('place-content-center');
+            let canvas = p5.createCanvas(600,400);
+            canvas.parent(div);
             p5.frameRate(30);
         }
 
@@ -143,14 +151,14 @@
 </script>
 
 <P5 {sketch}/>
-<div class="flex justify-evenly">
-    <button on:click={prevFrame}>Prev Frame</button>  
+<div class="flex justify-evenly mt-6">
+    <button on:click={prevFrame}>Prev Frame</button>
     <button on:click={()=>(playpause = !playpause)}>
     {#if playpause}
         Pause
     {:else}
         Play
     {/if}
-    </button>  
+    </button>
     <button on:click={nextFrame}>Next Frame</button>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/pages/resume.astro b/src/pages/resume.astro
index 570a44a..7bad196 100644
--- a/src/pages/resume.astro
+++ b/src/pages/resume.astro
@@ -12,7 +12,7 @@
         }
     </style>
 
-    <main class="w-1/2 mx-auto md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2">
+    <main class="w-1/2 mx-auto sm:w-5/6 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2">
         <p class="font-bold text-2xl py-6">About Me</p>
         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus esse inventore iusto earum asperiores necessitatibus, dolores id cumque nesciunt libero eligendi vel reprehenderit eius officia. Veritatis dolorum illum exercitationem suscipit.</p>