feat(ui): make NavBar responsive for smaller screens

Author: sabeerbikba

src/Home.jsx

@@ -111,22 +111,22 @@ const HeroSection = () => {
         <div className="flex flex-col sm:flex-row gap-4 justify-center items-center !mb-8">
           <a
             href="/#tools"
-            className="bg-[#4446a6] text-2xl text-white/95 inline-flex-center whitespace-nowrap text-sm font-medium transition-all h-10 rounded-md !px-6 gap-2"
+            className="max-w-[163px] bg-[#4446a6] text-2xl text-white/95 inline-flex-center whitespace-nowrap text-sm font-medium transition-all h-10 rounded-md !px-6 gap-2"
           >
             <Zap className="w-5 h-5" />
             Explore Tools
           </a>
           <ExternalLinkA
             href="https://github.com/sabeerbikba/dev.tools"
-            className="text-white hover:bg-[#4446a6]/25 border border-[#4446a6]/60 inline-flex-center whitespace-nowrap text-sm font-medium transition-all h-10 rounded-md !px-2 gap-2"
+            className="max-w-[163px] !px-[21px] text-white hover:bg-[#4446a6]/25 border border-[#4446a6]/60 inline-flex-center whitespace-nowrap text-sm font-medium transition-all h-10 rounded-md !px-2 gap-2"
             style={{
               backgroundImage:
                 "url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 fill-opacity=%220.35%22 viewBox=%220 0 100 100%22><text x=%220%22 y=%2216%22 font-size=%2216%22>⭐</text></svg>')",
               backgroundRepeat: "no-repeat",
               backgroundSize: "220px",
             }}
           >
-            Star us on GitHub ({stars})
+            Star on GitHub ({stars})
           </ExternalLinkA>
         </div>
       </div>

src/Layout.jsx

@@ -1,23 +1,28 @@
 import { Outlet, useLocation } from "react-router-dom";
 
 import cn from "@/utils/cn";
+import { mobileResponsivePaths } from "@/routes";
 import NavBar from "@/components/Nav";
 import Footer from "@/components/Footer";
 import MobileInfoModal from "@/components/MobileInfoModel";
+// import useMediaQuery from "@/hooks/useMediaQuery";
 
 const Layout = () => {
   const location = useLocation();
   const isHomePage = location.pathname === "/";
+  //   const isMobile = useMediaQuery("max-width: 640px");
 
   return (
     <>
       <MobileInfoModal />
       {!isHomePage && <NavBar />}
       <main
         className={cn(
-          !isHomePage
-            ? "!ml-[210px] text-sm !text-white h-screen"
-            : "!p-0 overflow-hidden"
+          !isHomePage &&
+            mobileResponsivePaths.includes(location.pathname) &&
+            "sm:ml-[210px]",
+          !mobileResponsivePaths.includes(location.pathname) && "ml-[210px]",
+          !isHomePage ? "text-sm !text-white h-screen" : "!p-0 overflow-hidden"
         )}
       >
         <Outlet />

src/common/Input.jsx

@@ -1,5 +1,7 @@
 import PropTypes from 'prop-types';
 
+// convert entire component styles in tailwindcss 
+
 export default function Input({
    name,
    label = '',
@@ -93,7 +95,3 @@ Input.propTypes = {
    onFocus: PropTypes.func,
    inputDisalbed: PropTypes.bool,
 };
-
-// function UPDATE_INPUT(field, value) {
-//    dispatch({ type: actionTypes.UPDATE_INPUT, field: field, value: value })
-// }

src/common/TextArea.jsx

@@ -21,7 +21,7 @@ export default function TextArea({
    };
 
    return (
-      <div className="w-full h-full">
+      <div className="size-full">
          <div className="flex items-center mb-4 gap-4">
             <p className="font-bold text-xl text-white"> {title} </p>
             <button

src/common/ToolBox.jsx

@@ -4,21 +4,22 @@ import cn from "@/utils/cn";
 const ToolBox = ({
   title,
   children,
+  mainClass = "",
   tailwindStyles = "",
   boxWidth = "50%",
   controls,
   controlsPositionEnd = false,
   border, // for development purpose
 }) => {
   const tailwind = {
-    main: cn("w-1/2 h-full ", border && "border-2 border-red-500"),
+    main: cn("w-1/2 h-full ", border && "border-2 border-red-500", mainClass),
     controlsDiv: "flex mb-4 gap-4 justify-between block",
     title: "font-bold text-xl",
     controls: cn(
       "flex gap-4 items-center w-full",
       controlsPositionEnd && "justify-end"
     ),
-    content: cn("w-full h-full p-2 overflow-y-auto ", tailwindStyles),
+    content: cn("size-full p-2 overflow-y-auto ", tailwindStyles),
   };
 
   return (
@@ -35,6 +36,7 @@ const ToolBox = ({
 ToolBox.propTypes = {
   title: PropTypes.string.isRequired,
   children: PropTypes.node.isRequired,
+  mainClass: PropTypes.string,
   tailwind: PropTypes.string,
   controls: PropTypes.node,
   boxWidth: PropTypes.string,

src/common/ToolBoxLayout.jsx

@@ -1,13 +1,15 @@
 import PropTypes from "prop-types";
+import cn from "@/utils/cn"
 
 const ToolBoxLayout = ({
    children,
    height = '100vh',
+   classNames
 }) => {
    return (
       <div
-         className="flex gap-4 p-4 w-full h-full text-white"
-         style={{ minWidth: '1620px', height: height, overflow: 'hidden' }}
+         className={cn("flex gap-4 p-4 size-full text-white", classNames)}
+         style={{ minWidth: '1620px', height, overflow: 'hidden' }}
       >
          {children}
       </div>
@@ -17,6 +19,7 @@ const ToolBoxLayout = ({
 ToolBoxLayout.propTypes = {
    children: PropTypes.node.isRequired,
    height: PropTypes.string,
+   classNames: PropTypes.string,
 }
 
 export default ToolBoxLayout;

src/components/EditorSplitViewLayout.jsx

@@ -0,0 +1,63 @@
+import { useState } from "react";
+import PropTypes from "prop-types";
+
+import cn from "@/utils/cn";
+import useMediaQuery from "@/hooks/useMediaQuery";
+
+// TODO: mobile not friendly error need to show for non responsive value
+
+const EditorSplitViewLayout = ({ editorBtns, editor, preview }) => {
+  const [enabledEditor, setEnabledEditor] = useState(true);
+    const isMobile = useMediaQuery("max-width: 640px");
+
+  const btnsBaseClass =
+    "flex justify-around h-[5%] [&>button]:w-[30%] [&>button]:h-[92%] [&>button]:rounded-sm [&>button]:cursor-pointer";
+
+  return (
+    <div className="sm:flex size-full">
+      <div
+        className={cn(
+          "sm:w-1/2 max-sm:w-full sm:h-full max-sm:h-[88%] flex flex-col bg-[#808080cc]",
+          enabledEditor || isMobile && "hidden h-0"
+        )}
+      >
+        <div className={cn(btnsBaseClass, "max-sm:hidden")}>{editorBtns}</div>
+        <div className="max-sm:h-full sm:h-[95%] max-sm:border-b max-sm:border-white">
+          {editor}
+        </div>
+      </div>
+      <div
+        className={cn(
+          "sm:w-1/2 max-sm:w-full sm:h-full max-sm:h-[88%] text-white max-sm:border-b max-sm:border-white",
+          !enabledEditor || isMobile && "hidden"
+        )}
+      >
+        {preview}
+      </div>
+      <div className={cn(btnsBaseClass, "sm:hidden mt-1")}>{editorBtns}</div>
+      <div className="flex justify-end items-center h-10 pt-2 mr-8 sm:hidden">
+        <span>Editor</span>
+        <div
+          onClick={() => setEnabledEditor((prev) => !prev)}
+          className={`mx-2 w-14 h-8 flex items-center bg-gray-300 rounded-full p-1 cursor-pointer transition-colors duration-300 ${
+            enabledEditor ? "bg-indigo-500" : "bg-gray-400"
+          }`}
+        >
+          <div
+            className={`bg-white w-6 h-6 rounded-full shadow-md transform transition-transform duration-300 ${
+              enabledEditor ? "translate-x-6" : "translate-x-0"
+            }`}
+          />
+        </div>
+        <span>Preview</span>
+      </div>
+    </div>
+  );
+};
+EditorSplitViewLayout.PropTypes = {
+  editorBtns: PropTypes.element.isRequired,
+  editor: PropTypes.element.isRequired,
+  preview: PropTypes.element.isRequired,
+};
+
+export default EditorSplitViewLayout;

src/components/MobileInfoModel.jsx

@@ -2,21 +2,27 @@ import { useState, useEffect } from "react";
 import { Monitor, Smartphone } from "lucide-react";
 import { useLocation } from "react-router-dom";
 
-import { paths } from "@/routes";
+import { mobileResponsivePaths } from "@/routes";
+import useMediaQuery from "@/hooks/useMediaQuery";
+
 
 const MobileInfoModal = () => {
   const location = useLocation();
   const [isOpen, setIsOpen] = useState(false);
   const [dismissed, setDismissed] = useState(false);
+  const isMobile = useMediaQuery("max-width: 970px");
 
   const handleContinue = () => {
     setIsOpen(false);
     setDismissed(true);
   };
 
   const checkScreenSize = () => {
-    const isMobile = window.innerWidth < 970;
-    if (paths.includes(location.pathname) && isMobile && !dismissed) {
+    if (
+      !mobileResponsivePaths.includes(location.pathname) &&
+      isMobile &&
+      !dismissed
+    ) {
       setIsOpen(true);
     } else {
       setIsOpen(false);
@@ -48,22 +54,24 @@ const MobileInfoModal = () => {
 
   return isOpen ? (
     <div className="fixed inset-0 z-50 bg-black/60 flex items-center justify-center">
-      <div className="bg-[#374151] text-white p-6 rounded-2xl shadow-2xl w-full max-w-md mx-4 relative text-center">
+      <div className="bg-[#374151] p-6 rounded-2xl shadow-2xl w-full max-w-md mx-4 relative text-center">
         <div className="flex flex-col items-center gap-4">
           <div className="bg-[#6366f1]/10 rounded-full p-4">
             <Monitor className="w-8 h-8 text-[#6366f1]" />
           </div>
-          <h2 className="text-xl font-semibold">Best Viewed on Desktop</h2>
+          <h2 className="text-xl font-semibold text-white">
+            Best Viewed on Desktop
+          </h2>
           <p className="text-sm text-gray-300">
             Dev.tools is best experienced on wider screens
           </p>
 
           <div className="flex items-center justify-center gap-4 py-2">
-            <div className="flex flex-col items-center gap-1 opacity-50">
+            <div className="flex flex-col items-center gap-1 opacity-50 text-white">
               <Smartphone className="w-6 h-6" />
               <span className="text-xs">Mobile</span>
             </div>
-            <div className="text-2xl">→</div>
+            <div className="text-2xl text-white">→</div>
             <div className="flex flex-col items-center gap-1 text-[#6366f1]">
               <Monitor className="w-6 h-6" />
               <span className="text-xs">Desktop</span>