Feature/shoeb00/collapsable menu

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: {

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>