feat: added color palette generator for light and dark theme, added sidebar collapse for less than 'md' screen

package.json

@@ -10,6 +10,7 @@
     "postinstall": "prisma generate"
   },
   "dependencies": {
+    "@ant-design/colors": "^7.0.2",
     "@clerk/nextjs": "^4.25.7",
     "@headlessui/react": "^1.7.17",
     "@heroicons/react": "^2.0.18",

src/app/components/common/ToolList.tsx

@@ -60,6 +60,10 @@ export const toolList: ToolOption[] = [
     name: "Color Converter",
     path: "/tools/color-converter",
   },
+  {
+    name: "Color Palette Generator",
+    path: "/tools/color-palette-generator",
+  },
   {
     name: "Hash Generator",
     path: "/tools/hash-generator",
@@ -101,55 +105,78 @@ export const toolList: ToolOption[] = [
 export default function ToolList() {
   const pathname = usePathname();
   return (
-    <div className="w-72 bg-gray-700 flex shrink-0 flex-col overflow-y-scroll">
-      <SignedIn>
-        <div className={"px-2 my-4 flex justify-between w-full"}>
-          <UserButton afterSignOutUrl="/tools/json-validator" />
-          <Button intent={"secondary"} href={"/tools/history"}>
-            View History
-          </Button>
-        </div>
-      </SignedIn>
-      <SignedOut>
-        <div className={"mx-2 my-4 flex flex-col gap-4"}>
-          <Button fullWidth intent={"primary"} href={"/sign-in"}>
-            Log in / Sign-up
-          </Button>
-          <p className={"text-xs text-gray-200"}>
-            {" "}
-            You only have to create an account if you want to upgrade to
-            DevToolbox Pro which saves your history so you can keep track of all
-            the actions you have done.
-          </p>
-        </div>
-      </SignedOut>
-      <Link
-        className={`w-full border-y py-3 px-4 hover:bg-gray-600`}
-        href={`https://github.com/YourAverageTechBro/DevToolboxWeb`}
-        target="_blank"
+    <>
+      <label
+        htmlFor="sidebar-toggle"
+        className="bg-indigo-500 md:hidden text-white px-2 py-1 rounded-md hover:bg-indigo-600 cursor-pointer absolute top-2 right-2"
       >
-        <div className={"flex items-center gap-2 "}>
-          <StarIcon className={"w-6 h-6"} />
-          Star Us On Github
-        </div>
-      </Link>
-      {toolList
-        .sort((a, b) => {
-          if (a.name < b.name) return -1;
-          else if (a.name > b.name) return 1;
-          return 0;
-        })
-        .map((toolOption) => (
-          <Link
-            className={`w-full border-b py-3 px-4 hover:bg-gray-600 ${
-              pathname === toolOption.path && "bg-gray-500"
-            }`}
-            key={toolOption.name}
-            href={toolOption.path}
-          >
-            <p> {toolOption.name}</p>
-          </Link>
-        ))}
-    </div>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="lucide lucide-menu"
+        >
+          <line x1="4" x2="20" y1="12" y2="12" />
+          <line x1="4" x2="20" y1="6" y2="6" />
+          <line x1="4" x2="20" y1="18" y2="18" />
+        </svg>
+      </label>
+      <input type="checkbox" id="sidebar-toggle" className="peer hidden" />
+      <div className="w-0 peer-checked:w-72 md:w-72 bg-gray-700 flex shrink-0 flex-col no-scrollbar overflow-y-scroll transition-all">
+        <SignedIn>
+          <div className={"px-2 my-4 flex justify-between w-full"}>
+            <UserButton afterSignOutUrl="/tools/json-validator" />
+            <Button intent={"secondary"} href={"/tools/history"}>
+              View History
+            </Button>
+          </div>
+        </SignedIn>
+        <SignedOut>
+          <div className={"mx-2 my-4 flex flex-col gap-4"}>
+            <Button fullWidth intent={"primary"} href={"/sign-in"}>
+              Log in / Sign-up
+            </Button>
+            <p className={"text-xs text-gray-200"}>
+              You only have to create an account if you want to upgrade to
+              DevToolbox Pro which saves your history so you can keep track of
+              all the actions you have done.
+            </p>
+          </div>
+        </SignedOut>
+        <Link
+          className={`w-full border-y py-3 px-4 hover:bg-gray-600`}
+          href={`https://github.com/YourAverageTechBro/DevToolboxWeb`}
+          target="_blank"
+        >
+          <div className={"flex items-center gap-2 "}>
+            <StarIcon className={"w-6 h-6"} />
+            Star Us On Github
+          </div>
+        </Link>
+        {toolList
+          .sort((a, b) => {
+            if (a.name < b.name) return -1;
+            else if (a.name > b.name) return 1;
+            return 0;
+          })
+          .map((toolOption) => (
+            <Link
+              className={`w-full border-b py-3 px-4 hover:bg-gray-600 ${
+                pathname === toolOption.path && "bg-gray-500"
+              }`}
+              key={toolOption.name}
+              href={toolOption.path}
+            >
+              <p> {toolOption.name}</p>
+            </Link>
+          ))}
+      </div>
+    </>
   );
 }

src/app/globals.css

@@ -25,3 +25,15 @@ body {
     )
     rgb(var(--background-start-rgb));
 }
+
+@layer utilities {
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  /* Hide scrollbar for IE, Edge and Firefox */
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+}

src/app/tools/color-palette-generator/ColorPaletteGeneratorComponent.tsx

@@ -0,0 +1,86 @@
+"use client";
+import { useEffect, useState } from "react";
+import { generate } from "@ant-design/colors";
+
+export default function ColorPaletteGenerator() {
+  const [baseColor, setBaseColor] = useState<string>("#b512e2");
+  const [lightPalette, setLightPalette] = useState<string[]>([]);
+  const [darkPalette, setDarkPalette] = useState<string[]>([]);
+  const generatePalettes = () => {
+    let lp = generate(baseColor);
+    let dP = generate(baseColor, {
+      theme: "dark",
+      backgroundColor: "#141414",
+    });
+
+    setLightPalette(lp);
+    setDarkPalette(dP);
+  };
+
+  useEffect(() => {
+    generatePalettes();
+  }, []);
+
+  return (
+    <div className="space-y-4">
+      <h1 className="text-lg font-semibold">Color Palette Generator</h1>
+      <div className="flex items-center gap-2 p-2 border rounded bg-white">
+        <label htmlFor="color" className="text-black">
+          Input:
+        </label>
+        <input
+          type="color"
+          name="color"
+          id="color"
+          value={baseColor}
+          onChange={(e) => {
+            setBaseColor(e.target.value);
+          }}
+        />
+        <span className="border text-black px-1 text-sm uppercase">
+          {baseColor}
+        </span>
+        <button
+          onClick={generatePalettes}
+          className="bg-indigo-500 hover:bg-indigo-400 text-white text-sm px-2 py-1 ml-auto rounded"
+        >
+          Generate
+        </button>
+      </div>
+
+      <div className="p-2 border rounded space-y-4 bg-white">
+        <div className="text-center space-y-2 border rounded-md shadow-md py-2">
+          <h2 className="text-lg text-black font-semibold">Light Theme</h2>
+          <div className="flex flex-wrap gap-3 justify-center">
+            {lightPalette.map((color, idx) => (
+              <div key={idx} className="flex flex-col items-center gap-1">
+                <div
+                  className="w-14 h-14 rounded"
+                  style={{ backgroundColor: color }}
+                ></div>
+                <div className="text-xs text-black uppercase">{color}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+        <div
+          className="text-center space-y-2 border rounded-md shadow-md py-2"
+          style={{ backgroundColor: "#141414" }}
+        >
+          <h2 className="text-lg font-semibold">Dark Theme</h2>
+          <div className="flex flex-wrap gap-3 justify-center">
+            {darkPalette.map((color, idx) => (
+              <div key={idx} className="flex flex-col items-center gap-1">
+                <div
+                  className="w-14 h-14 rounded"
+                  style={{ backgroundColor: color }}
+                ></div>
+                <div className="text-xs uppercase">{color}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/tools/color-palette-generator/page.tsx

@@ -0,0 +1,18 @@
+import ColorPaletteGeneratorComponent from "./ColorPaletteGeneratorComponent";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Dev Toolbox - Color Palette Generator",
+  description:
+    "Light and Dark theme color palette generator. Powered by @ant-designs/color.",
+  keywords: ["color", "palette", "generator", "light", "dark"],
+  openGraph: {
+    title: "Dev Toolbox - Color Palette Generator",
+    description:
+      "Light and Dark theme color palette generator. Powered by @ant-designs/color.",
+  },
+};
+const ColorPaletteGenerator = () => {
+  return <ColorPaletteGeneratorComponent />;
+};
+export default ColorPaletteGenerator;

src/app/tools/layout.tsx

@@ -6,16 +6,10 @@ export default function ToolsLayout({
   children: React.ReactNode;
 }) {
   return (
-    <div className={"h-full w-full flex gap-4"}>
-      {" "}
+    <div className={"h-full w-full flex"}>
       <ToolList />
-      <div
-        className={"pt-4 px-4 flex-1 overflow-x-hidden"}
-      >
-        <div style={{height: "calc(100% - 2rem)"}}>
-          {" "}
-          {children}{" "}
-        </div>
+      <div className={"pt-14 md:pt-4 px-4 flex-1 overflow-x-hidden"}>
+        <div style={{ height: "calc(100% - 2rem)" }}>{children}</div>
       </div>
     </div>
   );