From a3224a9b374631020fac736fdbb2b18960f956fc Mon Sep 17 00:00:00 2001
From: Syed Shoeb <syedshoeb886@gmail.com>
Date: Sun, 9 Jun 2024 14:49:56 +0530
Subject: [PATCH 1/2] updating button style from full rounded to md

---
 src/app/components/common/Button.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/common/Button.tsx b/src/app/components/common/Button.tsx
index 7386ccb..df30203 100644
--- a/src/app/components/common/Button.tsx
+++ b/src/app/components/common/Button.tsx
@@ -3,7 +3,7 @@ import { ComponentProps } from "react";
 import Link from "next/link";
 
 const buttonStyles = cva(
-  "flex items-center justify-center px-4 py-2 rounded-full font-medium focus:outline-none focus:ring-2 focus:ring-offset-white dark:focus:ring-offset-black focus:ring-offset-1 disabled:opacity-60 disabled:pointer-events-none hover:bg-opacity-80",
+  "flex items-center justify-center px-4 py-2 rounded-md font-medium focus:outline-none focus:ring-2 focus:ring-offset-white dark:focus:ring-offset-black focus:ring-offset-1 disabled:opacity-60 disabled:pointer-events-none hover:bg-opacity-80",
   {
     variants: {
       intent: {

From 08a1bb92b13bb76dd349e424b06cbc1905f3be28 Mon Sep 17 00:00:00 2001
From: Syed Shoeb <syedshoeb886@gmail.com>
Date: Sun, 9 Jun 2024 14:50:58 +0530
Subject: [PATCH 2/2] Creating collapse menu button, adding shortened names for
 tools and tooltip on hover

---
 src/app/components/common/ToolList.tsx | 114 ++++++++++++++++++++-----
 1 file changed, 93 insertions(+), 21 deletions(-)

diff --git a/src/app/components/common/ToolList.tsx b/src/app/components/common/ToolList.tsx
index 6aef38d..6bbe454 100644
--- a/src/app/components/common/ToolList.tsx
+++ b/src/app/components/common/ToolList.tsx
@@ -1,107 +1,173 @@
 "use client";
 
-import React from "react";
+import React, { ReactNode, useState } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { SignedIn, SignedOut, UserButton } from "@clerk/nextjs";
 import { Button } from "@/app/components/common/Button";
-import { StarIcon } from "@heroicons/react/24/outline";
+import {
+  StarIcon,
+  ArrowLeftIcon,
+  ListBulletIcon,
+  UserCircleIcon,
+} from "@heroicons/react/24/outline";
 
 export type ToolOption = {
   name: string;
+  shortenedName: string;
   path: string;
 };
+
 export const toolList: ToolOption[] = [
   {
     name: "Diff Viewer",
+    shortenedName: "Diff View",
     path: "/tools/diff-viewer",
   },
   {
     name: "JSON Validator",
+    shortenedName: "JSON Valid",
     path: "/tools/json-validator",
   },
   {
     name: "Clipboard Formatter",
+    shortenedName: "Clip For",
     path: "/tools/clipboard-formatter",
   },
   {
     name: "String Converter",
+    shortenedName: "Str Conv",
     path: "/tools/string-converter",
   },
   {
-    name: "Character/Word Counter",
+    name: "Character Counter",
+    shortenedName: "Char Count",
     path: "/tools/character-and-word-counter",
   },
   {
     name: "Unix Time Converter",
+    shortenedName: "Unix Conv",
     path: "/tools/unix-time-converter",
   },
   {
     name: "Base64 Encoder",
+    shortenedName: "B64 En",
     path: "/tools/base64encoder",
   },
   {
     name: "Base64 Image Encoder",
+    shortenedName: "B64 Im En",
     path: "/tools/base64imageencoder",
   },
   {
     name: "Url Parser",
+    shortenedName: "Url Par",
     path: "/tools/url-parser",
   },
   {
     name: "Url Encoder",
+    shortenedName: "Url En",
     path: "/tools/url-encoder",
   },
   {
     name: "Url Decoder",
+    shortenedName: "Url De",
     path: "/tools/url-decoder",
   },
   {
     name: "Color Converter",
+    shortenedName: "Color Conv",
     path: "/tools/color-converter",
   },
   {
     name: "Hash Generator",
+    shortenedName: "Hash Gen",
     path: "/tools/hash-generator",
   },
   {
     name: "Line Sort And Dedupe",
+    shortenedName: "Line Sort",
     path: "/tools/line-sort-and-dedupe",
   },
   {
     name: "Regex Checker",
+    shortenedName: "Regex Che",
     path: "/tools/regex-checker",
   },
   {
     name: "Markdown Editor",
+    shortenedName: "Mark Edit",
     path: "/tools/markdown-editor",
   },
   {
     name: "QRCode Generator",
+    shortenedName: "QRCode Gen",
     path: "/tools/qrcode-generator",
   },
   {
     name: "ASCII Converter",
+    shortenedName: "ASCII Conv",
     path: "/tools/ascii-converter",
   },
   {
     name: "CSS Unit Converter",
+    shortenedName: "CSS Conv",
     path: "/tools/css-unit-converter",
   },
   {
     name: "UUID Generator",
+    shortenedName: "UUID Gen",
     path: "/tools/uuid-generator",
   },
   {
     name: "JWT Viewer",
+    shortenedName: "JWT View",
     path: "/tools/jwt-viewer",
   },
 ];
 
+const Tooltip = ({ text, children }: { text: string; children: ReactNode }) => {
+  return (
+    <div className="relative flex flex-col items-center group">
+      <div className="absolute bottom-[50%] mb-2 hidden w-min rounded bg-gray-800 p-2 text-xs text-white group-hover:block">
+        {text}
+      </div>
+      <div>{children}</div>
+    </div>
+  );
+};
+
 export default function ToolList() {
   const pathname = usePathname();
+  const [collapsed, setCollapsed] = useState(false);
+  const toggle = () => setCollapsed(!collapsed);
+  const collapsedMenu = (
+    <div className={`m-5 flex flex-col gap-4 w-max justify-center`}>
+      <Button href={"/sign-in"}>
+        <UserCircleIcon className={"w-6 h-6"} />
+      </Button>
+      <Button onClick={toggle}>
+        <ListBulletIcon className={"w-6 h-6"} />
+      </Button>
+    </div>
+  );
+  const fullWidthMenu = (
+    <div className={`m-4 flex flex-row justify-evenly gap-4`}>
+      <Button intent={"primary"} href={"/sign-in"}>
+        Log in / Sign-up
+      </Button>
+      <Button onClick={toggle}>
+        <ArrowLeftIcon className={"w-6 h-6"} />
+      </Button>
+    </div>
+  );
+
   return (
-    <div className="w-72 bg-gray-700 flex shrink-0 flex-col overflow-y-scroll">
+    <div
+      className={`${
+        collapsed ? "w-25" : "w-72"
+      } bg-gray-700 flex shrink-0 flex-col overflow-y-scroll scroll-py-6`}
+    >
       <SignedIn>
         <div className={"px-2 my-4 flex justify-between w-full"}>
           <UserButton afterSignOutUrl="/tools/json-validator" />
@@ -111,28 +177,28 @@ export default function ToolList() {
         </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>
+        {collapsed ? collapsedMenu : fullWidthMenu}
+        {!collapsed && (
           <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>
+      {!collapsed && (
+        <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;
@@ -141,13 +207,19 @@ export default function ToolList() {
         })
         .map((toolOption) => (
           <Link
-            className={`w-full border-b py-3 px-4 hover:bg-gray-600 ${
+            className={`w-full border-b py-3 px-2 hover:bg-gray-600 ${
               pathname === toolOption.path && "bg-gray-500"
             }`}
             key={toolOption.name}
             href={toolOption.path}
           >
-            <p> {toolOption.name}</p>
+            {collapsed ? (
+              <Tooltip text={toolOption.name}>
+                <p>{toolOption.shortenedName}</p>
+              </Tooltip>
+            ) : (
+              <p>{toolOption.name}</p>
+            )}
           </Link>
         ))}
     </div>