From c4c2eaf6d3d48445dc9878375cddb8208420dbe9 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Mon, 15 Aug 2022 14:42:42 +0300
Subject: [PATCH] Introduce Dropdown component with Menu

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 src/renderer/components/dropdown/dropdown.tsx | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 src/renderer/components/dropdown/dropdown.tsx

diff --git a/src/renderer/components/dropdown/dropdown.tsx b/src/renderer/components/dropdown/dropdown.tsx
new file mode 100644
index 0000000000..9cbe8ca78c
--- /dev/null
+++ b/src/renderer/components/dropdown/dropdown.tsx
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import React, { HTMLAttributes, useState } from "react";
+import { Menu } from "../menu";
+
+interface DropdownProps extends HTMLAttributes<HTMLDivElement> {
+  contentForToggle: React.ReactNode;
+}
+
+export function Dropdown(props: DropdownProps) {
+  const { id, contentForToggle, children, ...rest } = props;
+  const [opened, setOpened] = useState(false);
+  
+  const toggle = () => {
+    setOpened(!opened);
+  };
+
+  return (
+    <div {...rest}>
+      <div id={id}>
+        {contentForToggle}
+      </div>
+      <Menu
+        usePortal
+        htmlFor={id}
+        isOpen={opened}
+        close={toggle}
+        open={toggle}
+      >
+        {React.Children.toArray(children)}
+      </Menu>
+    </div>
+  );
+}