Merge pull request #126 from J11tendra/feature/responsive-design

Feature/responsive design (#77)

package.json

@@ -12,7 +12,8 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@faker-js/faker": "^8.4.1",
-    "@headlessui/react": "^2.0.4",
+    "@headlessui/react": "^2.1.2",
+    "@heroicons/react": "^2.1.4",
     "@monaco-editor/react": "^4.6.0",
     "@mui/icons-material": "^5.15.19",
     "@mui/material": "^5.15.19",
@@ -38,7 +39,7 @@
     "react-icons": "^5.2.1",
     "react-tabs": "^6.0.2",
     "snarkdown": "^2.0.0",
-    "sweetalert2": "^11.11.0",
+    "sweetalert2": "^11.6.13",
     "tailwindcss": "3.4.4",
     "uuid": "^10.0.0"
   }

src/app/codeedit/page.jsx

@@ -2,10 +2,11 @@ import React from "react";
 //import Footer from "@/app/components/Footer";
 import { NavBar } from "@/app/components/navbar";
 import Editor from "./components/Editor";
+import Nav from "../components/nav";
 const page = () => {
   return (
     <div className=" max-h-[100vh] overflow-hidden">
-      <NavBar title={"Box Shadow generator"} />
+      <Nav />
       <Editor />
     </div>
   );

src/app/components/Footer/index.jsx

@@ -3,17 +3,17 @@ import { FaGithub, FaHome } from "react-icons/fa";
 import Link from "next/link";
 const Footer = () => {
   return (
-    <footer class="w-[26rem] md:w-[40rem] max-w-full bg-white rounded-lg shadow-lg m-4 dark:bg-gray-800 fixed bottom-0">
-      <div class="w-full mx-auto max-w-screen-xl p-4 md:flex md:items-center md:justify-between">
-        <span class="text-sm text-gray-500 sm:text-center dark:text-gray-400">
+    <footer class="w-[26rem] md:w-[40rem] max-w-full bg-white rounded-lg shadow-lg m-4 dark:bg-gray-800 fixed bottom-0 min-w-80">
+      <div class="w-full mx-auto max-w-screen-xl p-4 flex justify-center flex-col items-center md:flex-row md:justify-between">
+        <span class="text-sm text-gray-500 text-center dark:text-gray-400">
           © {new Date().getFullYear()}{" "}
           <Link href="/" class="hover:underline">
             WebDevTools
           </Link>
           . All Rights Reserved.
         </span>{" "}
         &emsp;
-        <ul class="flex flex-wrap items-center mt-3 text-sm font-medium text-gray-500 dark:text-gray-400 sm:mt-0">
+        <ul class="flex flex-wrap items-center justify-center mt-3 text-sm font-medium text-gray-500 dark:text-gray-400 sm:mt-0">
           <li>
             <Link
               href="/"

src/app/components/hamburger-menu.jsx

@@ -0,0 +1,101 @@
+"use client";
+
+import Link from "next/link";
+import { FaCode, FaMarkdown, FaInfo } from "react-icons/fa";
+import { IoMdGitPullRequest } from "react-icons/io";
+import Search from "./search";
+import {
+  Dialog,
+  DialogBackdrop,
+  DialogPanel,
+  TransitionChild,
+} from "@headlessui/react";
+import { XMarkIcon } from "@heroicons/react/24/outline";
+
+export default function HamburgerMenu({ open, togglePanel }) {
+  return (
+    <Dialog
+      open={open}
+      onClose={togglePanel}
+      className="relative z-10 lg:hidden"
+    >
+      <DialogBackdrop
+        transition
+        className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity duration-500 ease-in-out data-[closed]:opacity-0"
+      />
+
+      <div className="fixed inset-0 overflow-hidden">
+        <div className="absolute inset-0 overflow-hidden">
+          <div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">
+            <DialogPanel
+              transition
+              className="pointer-events-auto relative w-screen max-w-md transform transition duration-500 ease-in-out data-[closed]:translate-x-full sm:duration-700"
+            >
+              <TransitionChild>
+                <div className="absolute left-0 top-0 -ml-8 flex pr-2 pt-4 duration-500 ease-in-out data-[closed]:opacity-0 sm:-ml-10 sm:pr-4">
+                  <button
+                    type="button"
+                    onClick={togglePanel}
+                    className="relative rounded-md text-gray-300 hover:text-white focus:outline-none focus:ring-2 focus:ring-white"
+                  >
+                    <span className="absolute -inset-2.5" />
+                    <span className="sr-only">Close panel</span>
+                    <XMarkIcon aria-hidden="true" className="h-6 w-6" />
+                  </button>
+                </div>
+              </TransitionChild>
+              <div className="flex h-full flex-col overflow-y-scroll bg-white py-6 shadow-xl min-w-72 dark:bg-gray-800">
+                <div className="px-4 sm:px-6"></div>
+                <div className="relative mt-6 flex-1 flex flex-col justify-between gap-8 px-4 sm:px-6">
+                  <div className="flex flex-col gap-8 mt-3">
+                    <Search />
+                    <Link
+                      href="/codeedit"
+                      className="text-white  text-[0.57rem] font-bold  sm:text-sm p-4 bg-blue-500 hover:bg-blue-700 hover:text-white transition-all duration-700 rounded-lg flex items-center justify-center gap-2"
+                    >
+                      <p className="flex items-center justify-center gap-2">
+                        <FaCode fontSize={20} />
+                        Code Editor
+                      </p>
+                    </Link>
+                    <Link
+                      href="/MD"
+                      className="text-white  text-[0.57rem] font-bold  sm:text-sm p-4 bg-blue-500 hover:bg-blue-700 hover:text-white transition-all duration-700 rounded-lg flex items-center justify-center gap-2"
+                    >
+                      <p className="flex items-center justify-center gap-2">
+                        {" "}
+                        <FaMarkdown fontSize={20} />
+                        Markdown Editor
+                      </p>
+                    </Link>
+                    <Link
+                      href="/about"
+                      className="text-white font-bold text-[0.6rem]  sm:text-sm p-4 bg-blue-500 hover:bg-blue-700 hover:text-white transition-all duration-700 rounded-lg flex items-center justify-center gap-2"
+                    >
+                      <FaInfo fontSize={15} />
+                      About
+                    </Link>
+                    <Link
+                      href="/contribute"
+                      className="text-white font-bold text-[0.6rem]  sm:text-sm  p-4 bg-blue-500 hover:bg-blue-700 hover:text-white transition-all duration-700 rounded-lg flex items-center justify-center gap-2"
+                    >
+                      <IoMdGitPullRequest fontSize={20} />
+                      Contribute
+                    </Link>
+                  </div>
+                  <span class="text-sm text-gray-500 text-center dark:text-gray-400">
+                    © {new Date().getFullYear()}{" "}
+                    <Link href="/" class="hover:underline">
+                      WebDevTools
+                    </Link>
+                    . All Rights Reserved.
+                  </span>
+                </div>
+              </div>
+            </DialogPanel>
+          </div>
+        </div>
+      </div>
+    </Dialog>
+  );
+}

src/app/components/nav.jsx

@@ -1,13 +1,16 @@
+"use client";
+
 import React, { useState, useRef, useEffect } from "react";
 import Search from "./search";
+import HamburgerMenu from "./hamburger-menu";
 import SearchIcon from "@mui/icons-material/Search";
-import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import { FaTools, FaCode, FaMarkdown, FaInfo } from "react-icons/fa";
 import { IoMdGitPullRequest } from "react-icons/io";
 import Link from "next/link";
 export default function Nav() {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const [toggle, setToggle] = useState(false);
+  const [open, setOpen] = useState(false);
   const dropdownRef = useRef(null);
 
   const toggleDropdown = () => {
@@ -31,8 +34,12 @@ export default function Nav() {
     };
   }, []);
 
+  const togglePanel = () => {
+    setOpen((prev) => !prev);
+  };
+
   return (
-    <nav className="bg-blue-500 py-2 px-4 flex items-center justify-around gap-1 w-full relative mb-10 max-h-[10vh]">
+    <nav className="bg-blue-500 py-2 px-4 flex items-center justify-between lg:justify-around gap-1 w-full relative mb-10 max-h-[10vh] min-w-80">
       <div className="flex flex-0 items-center flex-shrink">
         <Link
           href="/"
@@ -48,7 +55,7 @@ export default function Nav() {
         </div>
       </div>
 
-      <div className="relative">
+      <div className="relative hidden md:block">
         <button
           onClick={toggleDropdown}
           className="text-white focus:outline-none text-[0.58rem] font-bold sm:font-bold items-center sm:text-sm flex md:text-sm  flex-1 p-2 hover:bg-blue-700 transition-all duration-700 rounded-lg"
@@ -133,7 +140,7 @@ export default function Nav() {
         )}
       </div>
 
-      <div className="flex ml-1 justify-center gap-2  md:gap-4 items-center">
+      <div className="flex ml-1 justify-center gap-2  md:gap-4 items-center hidden lg:flex">
         <Link
           href="/codeedit"
           className="text-white  text-[0.57rem] font-bold  sm:text-sm p-2 hover:bg-blue-700 transition-all duration-700 rounded-lg"
@@ -186,6 +193,18 @@ export default function Nav() {
           </div>
         </div>
       </div>
+
+      <div
+        className="flex flex-col gap-2 lg:hidden cursor-pointer"
+        onClick={togglePanel}
+      >
+        <span className="w-8 h-0.5 bg-white"></span>
+        <span className="w-8 h-0.5 bg-white"></span>
+        <span className="w-8 h-0.5 bg-white"></span>
+      </div>
+
+      {/*  */}
+      <HamburgerMenu open={open} togglePanel={togglePanel} />
     </nav>
   );
 }

src/app/components/search.jsx

@@ -58,7 +58,7 @@ export default function Search() {
           onChange={handleInputChange}
           type="search"
           id="search"
-          class="grow bg-gray-50 border outline-none border-none  dark:bg-gray-700 text-gray-900 text-sm block w-full p-1.5 px-2   dark:placeholder-gray-400 dark:text-white"
+          className="grow bg-gray-50 border outline-none border-none  dark:bg-gray-700 text-gray-900 text-sm block w-full p-1.5 px-2   dark:placeholder-gray-400 dark:text-white"
           placeholder="Search"
           required
         />

src/app/customizer/CupcakeIpsumGenerator/page.jsx

@@ -1,6 +1,6 @@
 "use client";
+import Nav from "@/app/components/nav";
 import React, { useState } from "react";
-import { Navbar } from "react-bootstrap";
 
 export default function ButtonCustomizer() {
   const [cupcakes, setCupcakes] = useState(1);
@@ -20,8 +20,8 @@ export default function ButtonCustomizer() {
   };
 
   return (
-    <main>
-      <Navbar title="Cupcake Ipsum Generator" />
+    <main className="min-w-80">
+      <Nav />
       <section className="flex items-center justify-center h-screen">
         <div className="bg-slate-800 p-10 w-full max-w-5xl overflow-y-scroll max-h-96">
           <label htmlFor="cupcakes">Number of cupcakes:</label>

src/app/customizer/LoremIpsumGenerator/page.jsx

@@ -2,7 +2,7 @@
 import React, { useState } from "react";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import CloseIcon from "@mui/icons-material/Close";
-import { NavBar } from "@/app/components/navbar";
+import Nav from "@/app/components/nav";
 
 export default function ButtonCustomizer() {
   const [paragraphs, setParagraphs] = useState(1);
@@ -26,8 +26,8 @@ export default function ButtonCustomizer() {
   };
 
   return (
-    <main className="h-screen flex flex-col gap-10">
-      <NavBar title={"Lorem Ipsum generator"} />
+    <main className="h-screen flex flex-col gap-10 min-w-80">
+      <Nav />
       <section className="flex items-center justify-center">
         <div className="bg-slate-800 p-10 w-full max-w-5xl overflow-y-scroll max-h-96">
           <div className="flex justify-center pb-5 flex-wrap gap-4 md:justify-between">

src/app/customizer/box-shadow-generator/page.jsx

@@ -3,7 +3,7 @@ import React, { useState } from "react";
 import InputRange from "@/app/components/Input/InputRange";
 import Footer from "@/app/components/Footer";
 import Swal from "sweetalert2";
-import { NavBar } from "@/app/components/navbar";
+import Nav from "@/app/components/nav";
 
 const page = () => {
   const [shadow, setShadow] = useState({
@@ -36,8 +36,8 @@ const page = () => {
   };
   return (
     <div>
-      <NavBar title={"Box Shadow generator"} />
-      <main className=" max-w-6xl m-auto">
+      <Nav />
+      <main className=" max-w-6xl m-auto min-w-80">
         <div className="flex flex-col gap-3 mt-10 items-center">
           <h1 className="text-5xl font-extrabold text-center">
             Box Shadow Generator

src/app/customizer/button/page.jsx

@@ -1,5 +1,5 @@
 "use client";
-import { NavBar } from "@/app/components/navbar";
+import Nav from "@/app/components/nav";
 import React, { use, useState } from "react";
 import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
 import "react-tabs/style/react-tabs.css";
@@ -183,7 +183,7 @@ export default function ButtonCustomizer() {
   ];
 
   return (
-    <div>
+    <div className="min-w-80">
       <section className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
         <button style={buttonStyles} className="text-4xl">
           Customized Button
@@ -378,7 +378,7 @@ export default function ButtonCustomizer() {
           </div>
         </div>
       )}
-      <NavBar title={"Button customizer"} />
+      <Nav />
 
       <button
         className="m-3 bg-red-700 p-5 rounded"

src/app/customizer/colorPicker/page.jsx

@@ -3,7 +3,7 @@ import React, { useState, useEffect } from "react";
 import toast, { Toaster } from "react-hot-toast";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import { HexColorPicker } from "react-colorful";
-import { NavBar } from "@/app/components/navbar";
+import Nav from "@/app/components/nav";
 
 export default function colorPicker() {
   const [hexColor, setHexColor] = useState("#ffffff");
@@ -39,9 +39,9 @@ export default function colorPicker() {
   }, [hexColor]);
 
   return (
-    <main>
-      <NavBar title={"Color picker"} />
-      <div className="grid grid-rows-2 grid-cols-1 sm:grid-cols-2 sm:grid-rows-1 sm:gap-x-8 h-[100vh] w-[100vw] items-center overflow-hidden">
+    <main className="min-w-80">
+      <Nav />
+      <div className="grid grid-rows-2 grid-cols-1 sm:grid-cols-2 sm:grid-rows-1 sm:gap-x-8 h-[100vh] w-[100vw] items-center overflow-hidden min-w-80">
         <div className="flex justify-center items-center sm:flex sm:justify-end sm:items-center">
           <span className="custom-color-picker">
             <HexColorPicker color={hexColor} onChange={setHexColor} />