added slider button for topbar

src/App.css

@@ -6,16 +6,6 @@
 .tooltip {
   --tooltip-spacing: 30px;
 }
-/* Hide scrollbar for Chrome, Safari and Opera */
-.example::-webkit-scrollbar {
-  display: none;
-}
-
-/* Hide scrollbar for IE, Edge and Firefox */
-.example {
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
-}
 
 .\[\&_svg\]\:size-4 svg {
   width: 1.3rem !important;

src/components/Panel/TopBar.jsx

@@ -1,13 +1,12 @@
+import { useContext, useRef, useState } from "react";
 import TextCustomization from "../EachComponent/Customization/TextCustomization";
 import LockObject from "../EachComponent/Customization/LockObject";
-import { ScrollArea, ScrollBar } from "../ui/scroll-area";
 import OpacityCustomization from "../EachComponent/Customization/OpacityCustomization";
 import CanvasContext from "../Context/canvasContext/CanvasContext";
-import { useContext } from "react";
 import { ObjectShortcut } from "../ObjectShortcut";
 import ActiveObjectContext from "../Context/activeObject/ObjectContext";
 import { Button } from "../ui/button";
-import { ImagePlus } from "lucide-react";
+import { ImagePlus, ChevronLeft, ChevronRight } from "lucide-react";
 import { RxBorderWidth } from "react-icons/rx";
 import { LuFlipVertical } from "react-icons/lu";
 import { SlTarget } from "react-icons/sl";
@@ -22,16 +21,56 @@ export function TopBar() {
   const activeObjectType = activeObject?.type;
   const hasClipPath = !!activeObject?.clipPath;
   const customClipPath = activeObject?.isClipPath;
+  const scrollContainerRef = useRef(null);
+  const [showScrollButtons, setShowScrollButtons] = useState(false);
+
+  const scroll = (direction) => {
+    const container = scrollContainerRef.current;
+    if (container) {
+      const scrollAmount = 200; // Adjust this value to change scroll distance
+      container.scrollBy({
+        left: direction * scrollAmount,
+        behavior: "smooth",
+      });
+    }
+  };
+
   return (
-    <div>
+    <div
-      <ScrollArea
+      className={`!absolute top-2 -translate-x-1/2 z-40 ${
-        className={`!absolute top-2 -translate-x-1/2 z-40 h-28 ${
         selectedPanel !== ""
-            ? "md:w-[475px] left-[41%] lg:w-[700px] lg:left-[43%] mdxl:left-[45%] xl:w-[900px] xl:left-[46%] 2xl:left-[50%]"
+          ? "md:w-[465px] left-[41%] lg:w-[700px] lg:left-[43%] mdxl:left-[45%] xl:w-[900px] xl:left-[46%] 2xl:left-[50%]"
           : "w-[500px] lg:w-[600px] xl:w-[900px] lg:left-[41%] xl:left-[50%]"
-        }   `}
+      }`}
+      onMouseEnter={() => setShowScrollButtons(true)}
+      onMouseLeave={() => setShowScrollButtons(false)}
     >
-        <div className="bg-white shadow-sm mx-auto px-4 py-2 flex justify-center items-center gap-2">
+      <div className="relative h-full hidden xl:block">
+        {showScrollButtons && (
+          <>
+            <Button
+              className="absolute left-0 top-1/2 -translate-y-1/2 z-10 bg-accent"
+              onClick={() => scroll(-1)}
+              variant="ghost"
+              size="icon"
+            >
+              <ChevronLeft className="h-4 w-4" />
+            </Button>
+            <Button
+              className="absolute right-0 top-1/2 -translate-y-1/2 z-10 bg-accent"
+              onClick={() => scroll(1)}
+              variant="ghost"
+              size="icon"
+            >
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+          </>
+        )}
+        <div
+          ref={scrollContainerRef}
+          className="w-full h-full overflow-x-auto scrollbar-hide"
+        >
+          <div className="bg-white shadow-sm mx-auto px-4 xl:px-10 py-2 flex justify-start items-center gap-2 min-w-max h-full">
             <div>
               <TextCustomization />
             </div>
@@ -69,7 +108,6 @@ export function TopBar() {
                         strokeWidth="2"
                         fill="none"
                       />
-
                       <path d="M14 14 L19 19" stroke="black" strokeWidth="2" />
                       <path
                         d="M15 15 Q16 12, 19 11"
@@ -77,7 +115,6 @@ export function TopBar() {
                         strokeWidth="2"
                         fill="none"
                       />
-
                       <line
                         x1="3"
                         y1="17"
@@ -97,6 +134,7 @@ export function TopBar() {
                     </svg>
                   </Button>
                 </a>
+                <Tooltip id="canvas" content="Canvas Settings" place="bottom" />
               </div>
 
               <div className="flex items-center gap-2">
@@ -108,12 +146,13 @@ export function TopBar() {
                       <Button
                         variant="ghost"
                         size="icon"
-                      className={"rounded-full"}
+                        className="rounded-full"
                         onClick={() => setSelectedPanel("color")}
                         style={{ backgroundColor: textColor?.fill || "black" }}
                       ></Button>
                     </a>
                   )}
+                <Tooltip id="color-gr" content="Color" place="bottom" />
 
                 {!customClipPath && (
                   <a data-tooltip-id="stroke">
@@ -127,6 +166,7 @@ export function TopBar() {
                     </Button>
                   </a>
                 )}
+                <Tooltip id="stroke" content="Stroke" place="bottom" />
                 {(activeObject || activeObject.type === "group") && (
                   <a data-tooltip-id="group-obj">
                     <Button
@@ -139,6 +179,7 @@ export function TopBar() {
                     </Button>
                   </a>
                 )}
+                <Tooltip id="group-obj" content="Group Object" place="bottom" />
               </div>
 
               <div className="h-6 w-px bg-gray-200" />
@@ -153,7 +194,7 @@ export function TopBar() {
                     <LuFlipVertical />
                   </Button>
                 </a>
-
+                <Tooltip id="flip" content="Object flip" place="bottom" />
                 {activeObject?.type !== "group" && (
                   <a data-tooltip-id="position">
                     <Button
@@ -165,6 +206,11 @@ export function TopBar() {
                     </Button>
                   </a>
                 )}
+                <Tooltip
+                  id="position"
+                  content="Object position"
+                  place="bottom"
+                />
                 <a data-tooltip-id="shadow">
                   <Button
                     variant="ghost"
@@ -174,28 +220,21 @@ export function TopBar() {
                     <RiShadowLine />
                   </Button>
                 </a>
+                <Tooltip id="shadow" content="Shadow color" place="bottom" />
               </div>
             </div>
             <OpacityCustomization />
             <div className="h-4 w-px bg-border mx-2" />
 
             <div>
-            <ObjectShortcut value={"default"} />
+              <ObjectShortcut value="default" />
             </div>
             <div className="ml-4">
               <LockObject />
             </div>
           </div>
-        <ScrollBar orientation="horizontal" />
+        </div>
-      </ScrollArea>
+      </div>
-
-      <Tooltip id="color-gr" content="Color" place="bottom" />
-      <Tooltip id="stroke" content="Stroke" place="bottom" />
-      <Tooltip id="position" content="Object position" place="bottom" />
-      <Tooltip id="shadow" content="Shadow color" place="bottom" />
-      <Tooltip id="flip" content="Object flip" place="bottom" />
-      <Tooltip id="group-obj" content="Group Object" place="bottom" />
-      <Tooltip id="canvas" content="Canvas Settings" place="bottom" />
     </div>
   );
 }