Fix Layout Issues on Desktop and Mobile

src/components/Button.jsx

@@ -1,9 +1,12 @@
 export const Button = ({onClick, sticky = false, children}) => {
-  // Base classes
-  const baseClasses = "inline-block py-2 px-5 font-bold text-black border-2 border-black";
   // If we want the button to be sticky, flip the colors
-  const dynamicClasses = sticky ? `border-dotted hover:border-solid` : `border-solid hover:border-dotted`;
+  const dynamicBorder = sticky ? `border-dotted hover:border-solid` : `border-solid hover:border-dotted`;
 
   // Return a styled button, where the text is passed as child prop
-  return <button onClick={onClick} className={`${baseClasses} ${dynamicClasses}`}>{children}</button>;
+  return (<button
+    onClick={onClick}
+    className={`inline-block py-2 px-3 font-bold text-black border-2 border-black ${dynamicBorder}`}>
+      {children}
+    </button>
+  );
 };

src/components/HamburgerMenu.jsx

@@ -0,0 +1,30 @@
+import { useState } from "react";
+
+export const HamburgerMenu = ({children}) => {
+    const [checked, setChecked] = useState(false);
+    return (
+        <div>
+            <label htmlFor="hamburger" className="md:hidden">
+                <input type="checkbox" checked={checked} onChange={e => setChecked(e.target.checked)} id="hamburger" className="peer hidden"/>
+                <span className="block m-1 h-1 w-8 bg-black rounded-lg peer-checked:rotate-[135deg] peer-checked:translate-x-[2.5px] peer-checked:translate-y-[10px] ease-in-out duration-[250ms]"></span>
+                <span className="block m-1 h-1 w-8 bg-black rounded-lg peer-checked:opacity-0 ease-in-out duration-[250ms]"></span>
+                <span className="block m-1 h-1 w-8 bg-black rounded-lg peer-checked:rotate-[-135deg] peer-checked:translate-x-[3px] peer-checked:translate-y-[-6px] ease-in-out duration-[250ms]"></span>
+            </label>
+            {/* The navigation bar on mobile-sized screens, hidden behind a hamburger menu */}
+            {checked && (
+                // TODO: Style this as a half-page overlay
+                <nav className="md:hidden">
+                    <ul className="list-none inline-flex justify-around items-center gap-12 text-xl text-center">
+                        {children}
+                    </ul>
+                </nav>
+            )}
+            {/* The navigation bar on desktop-sized screens */}
+            <nav className="hidden md:block">
+                <ul className="list-none inline-flex justify-around items-center gap-12 text-xl text-center">
+                    {children}
+                </ul>
+            </nav>
+        </div>
+    );
+};

src/components/SplitPane.jsx

@@ -1,7 +1,7 @@
 export const SplitPane = ({children}) => {
   // Split the pane in half and add the children to it
   return (
-    <article className="grid grid-cols-2 gap-4 items-left place-content-stretch">
+    <article className="flex flex-col self-stretch gap-4 md:grid md:grid-cols-2 md:place-content-stretch">
       {children}
     </article>
   )

src/features/about/About.jsx

@@ -1,13 +1,13 @@
 export const About = () => {
   return (
     <main>
-      <article id="about">
-        <h1>About</h1>
+      <article className="max-w-[80%] mx-auto min-h-[15rem]">
+        <h1 className="text-2xl text-center mb-4">About</h1>
         <p>Out of personal frustration of visualizing complicated LaTeX tables generated by code, and a passion for web development, LaTeX Table Viewer came to life!</p>
         <p>Simply copy and paste your LaTeX table code into the code editor and compile your table. All compilation happens on your computer, no data/information is collected. If you need additional packages, view the full source code and add it where appropriate.</p>
         <br />
-        <h2>Credits</h2>
-        <p>This project is powered by <a href="https://github.com/SwiftLaTeX/SwiftLaTeX">SwiftLaTeX</a> and their efforts of creating a Web Assembly binary for TeXLive. I tweaked their code slightly to make it work nice with Webpack and it is freely available on <a href="https://github.com/adamkaplan0/swiftlatex-engine/tree/web_worker_compatible">GitHub</a> alongside the <a href="https://github.com/adamkaplan0/latextableviewer/">LaTeX Table Viewer</a>.</p>
+        <h2 className="text-xl text-center mb-4">Credits</h2>
+        <p>This project is powered by <a href="https://github.com/SwiftLaTeX/SwiftLaTeX" className="underline decoration-dotted hover:decoration-solid">SwiftLaTeX</a> and their efforts of creating a Web Assembly binary for TeXLive. I tweaked their code slightly to make it work nice with Webpack and it is freely available on <a href="https://github.com/adamkaplan0/swiftlatex-engine/tree/web_worker_compatible" className="underline decoration-dotted hover:decoration-solid">GitHub</a> alongside the <a href="https://github.com/adamkaplan0/latextableviewer/" className="underline decoration-dotted hover:decoration-solid">LaTeX Table Viewer</a>.</p>
       </article>
     </main>
   );

src/features/buttonBar/ButtonBar.jsx

@@ -6,7 +6,7 @@ export const ButtonBar = ({toggleVisibility, compile, showFullSourceCode}) => {
   const toggleText = showFullSourceCode ? "Hide full source code" : "Show full source code";
   return (
     <SplitPane>
-      <aside className="flex flex-row justify-end gap-2 mb-2">
+      <aside className="flex flex-row justify-center gap-2 mb-2 md:justify-end">
         <Button onClick={toggleVisibility} sticky={showFullSourceCode}>{toggleText}</Button>
         <Button onClick={compile}>Compile</Button>
         <EngineStatus />

src/features/footer/Footer.jsx

@@ -4,7 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 export const Footer = () => {
   return (
     <footer className="mt-4 mb-4">
-      <p className="text-right align-middle">Made with <FontAwesomeIcon icon={faHeart} className="text-red-500" /> by <a href="https://github.com/adamkaplan0" className="hover:underline decoration-dotted">Adam</a></p>
+      <p className="align-middle text-center md:text-right">Made with <FontAwesomeIcon icon={faHeart} className="text-red-500" /> by <a href="https://adamkaplan.org">Adam</a></p>
     </footer>
   )
 }

src/features/header/Header.jsx

@@ -1,17 +1,31 @@
 import { Link, NavLink } from "react-router-dom";
+import { HamburgerMenu } from "../../components/HamburgerMenu";
 
 
 export const Header = () => {
+  // Helper function to use the `active` class of NavLink when styling
+  const navLinkStyle = isActive => {
+    if (isActive) {
+      return "underline decoration-solid";
+    } else {
+      return "no-underline hover:underline";
+    }
+  }
+
   return (
     <header className="flex justify-between items-center mb-4">
-      <h1 className="inline-block font-bold text-4xl"><Link to="/">LaTeX Table Viewer</Link></h1>
-      <nav>
-        <ul className="list-none inline-flex justify-around items-center gap-12 text-xl text-center">
-          <li><NavLink to="/">App</NavLink></li>
-          <li><a href="https://github.com/adamkaplan0/latextableviewer">GitHub</a></li>
-          <li><NavLink to="/about">About</NavLink></li>
-        </ul>
-      </nav>
+      <h1 className="inline-block font-bold text-4xl">
+        <Link to="/"
+          className="no-underline hover:text-gray-400">
+          LaTeX Table Viewer
+        </Link>
+      </h1>
+      {/* TODO: #23 Implement a hamburger menu */}
+      <HamburgerMenu>
+        <li><NavLink to="/" className={({isActive}) => navLinkStyle(isActive)}>App</NavLink></li>
+        <li><a href="https://github.com/adamkaplan0/latextableviewer" className="no-underline hover:underline">GitHub</a></li>
+        <li><NavLink to="/about" className={({isActive}) => navLinkStyle(isActive)}>About</NavLink></li>
+      </HamburgerMenu>
     </header>
   );
 };

src/features/latexEditor/LatexEditor.jsx

@@ -17,7 +17,7 @@ export const LatexEditor = ({handleChange, sourceCode}) => {
       editorProps={{ $blockScrolling: true }}
       onChange={handleChange}
       value={sourceCode}
-      className="border border-black"
+      className="min-h-[15rem] border border-black"
     />
   );
 };

src/features/pdfPreview/PdfPreview.jsx

@@ -11,12 +11,12 @@ export const PdfPreview = () => {
   const showCompilerLog = useSelector(selectShowCompilerLog);
 
   const formattedCompilerLog = (
-    <p className="min-h-[70vh] max-h-[70vh] border border-black p-2 font-mono overflow-y-scroll">
+    <p className="border border-black p-2 font-mono overflow-y-scroll min-h-[10rem] max-h-[10rem] md:min-h-[25rem] md:max-h-[25rem]">
       <b>Compiler Log:</b><br/><br/>
       {compilerLog}
     </p>
   );
-  const pdfEmbed = <embed src={pdfUrl} width="100%" type="application/pdf" className="min-h-[70vh] border border-black"></embed>;
+  const pdfEmbed = <embed src={pdfUrl} width="100%" type="application/pdf" className="border border-black min-h-[10rem] md:min-h-[25rem]"></embed>;
 
 
   return (

src/index.css

@@ -4,41 +4,11 @@
 
 @layer base {
   body {
+    /* Center the whole app */
     @apply container mx-auto w-[90%];
   }
 
-  header a {
-    @apply hover:text-gray-400;
-    @apply hover:no-underline;
-  }
-
-  header a.active {
-    @apply underline decoration-dotted;
-  }
-
   a {
-    @apply hover:underline decoration-dotted;
-  }
-
-  #about h1 {
-    @apply text-3xl text-center mb-6;
-  }
-
-  #about h2 {
-    @apply text-2xl text-center mb-6;
-  }
-
-  #about a {
-    @apply text-link underline decoration-dotted;
-    @apply hover:no-underline hover:border-2 hover:border-dotted hover:border-link;
-  }
-
-  #about {
-    @apply max-w-[50%];
-    @apply mx-auto min-h-[500px];
-  }
-
-  #about p {
-    @apply text-xl mb-4;
+    @apply underline decoration-dotted hover:decoration-solid;
   }
 }

tailwind.config.js

@@ -3,12 +3,6 @@ module.exports = {
   content: [
     "./src/**/*.{js,jsx,ts,tsx}",
   ],
-  theme: {
-    extend: {
-      colors: {
-        'link': '#13678a'
-      },
-    }
-  },
+  theme: {},
   plugins: [],
 }