profile dropdown colors, toolbar bringing up subtoolbar

src/components/features/ProfileDropdown.tsx

@@ -69,43 +69,36 @@ export function ProfileDropdown() {
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <MenuItems
-          static
-          className="absolute right-[-5px] mt-2.5 w-36 overflow-hidden rounded-lg bg-secondary shadow-lg focus:outline-none"
-        >
-          <MenuItem key={0}>
-            {({ active }) => (
-              <a
-                className={twMerge(
-                  "duration-50 bg-action/60 group flex w-full items-center gap-2 px-3 py-[10px] text-start text-sm font-medium text-white transition-all",
-                  active && "bg-action-500/80",
-                )}
-                href={profileUrl}
-                target="_blank"
-                rel="noreferrer"
-              >
-                <FontAwesomeIcon icon={faUser} />
-                My Profile
-              </a>
-            )}
-          </MenuItem>
-          {options.map((option, index) => (
-            <MenuItem key={index + 1}>
-              {({ active }) => (
-                <button
-                  className={twMerge(
-                    "duration-50 bg-action/60 group flex w-full items-center gap-2 px-3 py-[10px] text-start text-sm font-medium text-white transition-all",
-                    active && "bg-action-500/80",
-                  )}
-                  onClick={() => option.onClick()}
+        <div className="absolute -right-2 mt-2.5 w-fit rounded-xl border border-ui-border bg-ui-panel shadow-lg">
+          <MenuItems static className="flex flex-col py-2 focus:outline-none">
+            <MenuItem key={0}>
+              {() => (
+                <a
+                  className="duration-50 group flex w-full items-center gap-2 text-nowrap px-4 py-2 text-start text-sm font-medium transition-all"
+                  href={profileUrl}
+                  target="_blank"
+                  rel="noreferrer"
                 >
-                  <FontAwesomeIcon icon={option.icon} />
-                  {option.label}
-                </button>
+                  <FontAwesomeIcon icon={faUser} />
+                  My Profile
+                </a>
               )}
             </MenuItem>
-          ))}
-        </MenuItems>
+            {options.map((option, index) => (
+              <MenuItem key={index + 1}>
+                {() => (
+                  <button
+                    className="duration-50 group flex w-full items-center gap-2 px-4 py-2 text-start text-sm font-medium transition-all"
+                    onClick={() => option.onClick()}
+                  >
+                    <FontAwesomeIcon icon={option.icon} />
+                    {option.label}
+                  </button>
+                )}
+              </MenuItem>
+            ))}
+          </MenuItems>
+        </div>
       </Transition>
     </Menu>
   );

src/components/features/ToolbarMain/ToolbarButtons.tsx

@@ -1,3 +1,5 @@
+import { ButtonHTMLAttributes } from "react";
+import { twMerge } from "tailwind-merge";
 import {
   FontAwesomeIcon,
   FontAwesomeIconProps,
@@ -6,13 +8,26 @@ import { IconDefinition } from "@fortawesome/pro-thin-svg-icons";
 
 export const ToolbarButtons = ({
   icon,
+  onClick,
+  buttonProps = { className: "" },
   iconProps,
 }: {
   icon: IconDefinition;
+  onClick?: () => void;
+  buttonProps?: ButtonHTMLAttributes<HTMLButtonElement>;
   iconProps?: Omit<FontAwesomeIconProps, "icon">;
 }) => {
+  const { className: buttonClassName, ...restButtonProps } = buttonProps;
+  const mergedButtonClasses = twMerge(
+    "size-10 rounded-2xl p-2 hover:bg-secondary-500 hover:text-white",
+    buttonClassName,
+  );
   return (
-    <button className="size-10 rounded-2xl p-2 hover:bg-secondary-500 hover:text-white">
+    <button
+      className={mergedButtonClasses}
+      onClick={onClick}
+      {...restButtonProps}
+    >
       <FontAwesomeIcon icon={icon} {...iconProps} />
     </button>
   );

src/components/features/ToolbarMain/index.tsx

@@ -1,12 +1,16 @@
 // import { useSignals } from "@preact/signals-react/runtime";
+import { useState } from "react";
 import {
   faArrowRotateLeft,
   faArrowRotateRight,
   faBars,
+  faCameraRotate,
   faDownload,
-  faFloppyDisk,
   faFilePlus,
+  faFilm,
+  faFloppyDisk,
   faHand,
+  faImage,
   faLocationArrow,
   faPlus,
   faMinus,
@@ -14,6 +18,7 @@ import {
 } from "@fortawesome/pro-thin-svg-icons";
 
 import { ToolbarButtons } from "./ToolbarButtons";
+import { twMerge } from "tailwind-merge";
 
 // import { layout } from "~/signals";
 
@@ -22,9 +27,17 @@ export const ToolbarMain = () => {
   // const {
   //   signals: { isMobile, windowWidth, windowHeight },
   // } = layout;
+  const [isUploadSubmenuOpen, setIsUploadSubmenuOpen] = useState(false);
+  const panelClasses =
+    "rounded-2xl border border-ui-border bg-ui-panel p-2 shadow-xl";
   return (
     <div className="col-span-12 col-start-1 row-span-1 row-start-12 justify-center">
-      <div className="m-auto flex w-fit items-center divide-x divide-ui-border rounded-2xl border border-ui-border bg-ui-panel p-2 shadow-xl">
+      <div
+        className={twMerge(
+          "m-auto flex w-fit items-center divide-x divide-ui-border",
+          panelClasses,
+        )}
+      >
         {/* <p>
           Layout is {windowWidth.value} x {windowHeight.value},{" "}
           <b>{isMobile.value ? "Mobile" : "Not Mobile"}</b>
@@ -36,13 +49,32 @@ export const ToolbarMain = () => {
             iconProps={{ className: "fa-flip-horizontal" }}
           />
           <ToolbarButtons icon={faSquareDashed} />
-          <ToolbarButtons icon={faFilePlus} />
+          <div className="relative">
+            <ToolbarButtons
+              icon={faFilePlus}
+              onClick={() => {
+                setIsUploadSubmenuOpen(true);
+              }}
+            />
+            {isUploadSubmenuOpen && (
+              <div
+                className={twMerge(
+                  "absolute -left-2 bottom-11 z-10",
+                  panelClasses,
+                )}
+              >
+                <ToolbarButtons icon={faImage} />
+                <ToolbarButtons icon={faFilm} />
+              </div>
+            )}
+          </div>
         </div>
         <div className="flex items-center gap-2 px-2">
           <ToolbarButtons icon={faMinus} />
           <span>100%</span>
           <ToolbarButtons icon={faPlus} />
           <ToolbarButtons icon={faHand} />
+          <ToolbarButtons icon={faCameraRotate} />
         </div>
         <div className="flex items-center gap-2 px-2">
           <ToolbarButtons icon={faArrowRotateLeft} />