From 461661afc63dfb3cd1199ff27dbc7ae6ac11a7c5 Mon Sep 17 00:00:00 2001
From: barnabasmolnar <barnabas@excalidraw.com>
Date: Tue, 18 Apr 2023 17:11:36 +0200
Subject: [PATCH] Styling.

---
 src/components/dropdownMenu/DropdownMenu.scss | 13 ++++++++++
 .../dropdownMenu/DropdownMenuSubTrigger.tsx   | 12 +++++-----
 src/components/icons.tsx                      |  9 +++++++
 src/packages/excalidraw/example/App.tsx       | 24 +++++++++++++++++--
 4 files changed, 50 insertions(+), 8 deletions(-)

diff --git a/src/components/dropdownMenu/DropdownMenu.scss b/src/components/dropdownMenu/DropdownMenu.scss
index 7f2b268c6..cbdefa366 100644
--- a/src/components/dropdownMenu/DropdownMenu.scss
+++ b/src/components/dropdownMenu/DropdownMenu.scss
@@ -9,6 +9,19 @@
     // position: absolute;
     max-width: 250px;
 
+    &__submenu-trigger {
+      &[aria-expanded="true"] {
+        .dropdown-menu-item {
+          background-color: var(--button-hover-bg);
+        }
+      }
+    }
+
+    &__submenu-trigger-icon {
+      margin-left: auto;
+      opacity: 0.5;
+    }
+
     .radix-menuitem {
       &:focus-visible {
         outline: none;
diff --git a/src/components/dropdownMenu/DropdownMenuSubTrigger.tsx b/src/components/dropdownMenu/DropdownMenuSubTrigger.tsx
index 5d3087566..8387cb6e4 100644
--- a/src/components/dropdownMenu/DropdownMenuSubTrigger.tsx
+++ b/src/components/dropdownMenu/DropdownMenuSubTrigger.tsx
@@ -2,29 +2,29 @@ import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import React from "react";
 import MenuItemContent from "./DropdownMenuItemContent";
 import { getDropdownMenuItemClassName } from "./common";
+import { ChevronRight } from "../icons";
 
 const DropdownMenuSubTrigger = ({
   children,
   icon,
-  shortcut,
   className,
   ...rest
 }: {
   children: React.ReactNode;
   icon?: JSX.Element;
-  shortcut?: string;
   className?: string;
 } & React.HTMLAttributes<HTMLDivElement>) => {
   return (
-    <DropdownMenuPrimitive.SubTrigger className="radix-menuitem">
+    <DropdownMenuPrimitive.SubTrigger className="radix-menuitem dropdown-menu__submenu-trigger">
       <div
         {...rest}
         className={getDropdownMenuItemClassName(className)}
         title={rest.title ?? rest["aria-label"]}
       >
-        <MenuItemContent icon={icon} shortcut={shortcut}>
-          {children}
-        </MenuItemContent>
+        <MenuItemContent icon={icon}>{children}</MenuItemContent>
+        <div className="dropdown-menu__submenu-trigger-icon">
+          {ChevronRight}
+        </div>
       </div>
     </DropdownMenuPrimitive.SubTrigger>
   );
diff --git a/src/components/icons.tsx b/src/components/icons.tsx
index 784e81024..7a984615d 100644
--- a/src/components/icons.tsx
+++ b/src/components/icons.tsx
@@ -71,6 +71,15 @@ const modifiedTablerIconProps: Opts = {
 
 // -----------------------------------------------------------------------------
 
+//tabler-icons: chevron-right
+export const ChevronRight = createIcon(
+  <g strokeWidth="1.5">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <polyline points="9 6 15 12 9 18" />
+  </g>,
+  tablerIconProps,
+);
+
 // tabler-icons: present
 export const PlusPromoIcon = createIcon(
   <g strokeWidth="1.5">
diff --git a/src/packages/excalidraw/example/App.tsx b/src/packages/excalidraw/example/App.tsx
index 6bb7f192b..24376aff6 100644
--- a/src/packages/excalidraw/example/App.tsx
+++ b/src/packages/excalidraw/example/App.tsx
@@ -574,15 +574,35 @@ export default function App({ appTitle, useCustom, customArgs }: AppProps) {
         </MainMenu.Group>
         {/* <MainMenu.Separator /> */}
         <MainMenu.Sub>
-          <MainMenu.Sub.Trigger>Another submenu trigger</MainMenu.Sub.Trigger>
-          <MainMenu.Sub.Content>
+          <MainMenu.Sub.Trigger className="custom-classname">
+            Another submenu trigger
+          </MainMenu.Sub.Trigger>
+          <MainMenu.Sub.Content className="custom-classname-for-content">
             <MainMenu.Sub.Item
+              title="Sub item"
               onSelect={() => window.alert("You clicked on sub item")}
             >
               Sub item
             </MainMenu.Sub.Item>
           </MainMenu.Sub.Content>
         </MainMenu.Sub>
+        <MainMenu.Sub>
+          <MainMenu.Sub.Trigger>Trigger me</MainMenu.Sub.Trigger>
+          <MainMenu.Sub.Content>
+            <MainMenu.Sub>
+              <MainMenu.Sub.Trigger>Trigger me inside</MainMenu.Sub.Trigger>
+              <MainMenu.Sub.Content>
+                <MainMenu.Sub.Item
+                  onSelect={() => {
+                    alert("wow, nested submenus!");
+                  }}
+                >
+                  Item wow
+                </MainMenu.Sub.Item>
+              </MainMenu.Sub.Content>
+            </MainMenu.Sub>
+          </MainMenu.Sub.Content>
+        </MainMenu.Sub>
         <MainMenu.ItemCustom>
           <button
             style={{ height: "2rem" }}