refactor(in-app-menu): refactor in-app-menu plugin (#1710)

Co-authored-by: JellyBrick <shlee1503@naver.com>

src/plugins/in-app-menu/renderer/MenuButton.tsx

@@ -0,0 +1,42 @@
+import { JSX, splitProps } from 'solid-js';
+import { css } from 'solid-styled-components';
+
+const menuStyle = css`
+  -webkit-app-region: none;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+
+  padding: 2px 8px;
+  border-radius: 4px;
+
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  &:active {
+    scale: 0.9;
+  }
+
+  &[data-selected="true"] {
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+`;
+
+export type MenuButtonProps = JSX.HTMLAttributes<HTMLLIElement> & {
+  text?: string;
+  selected?: boolean;
+};
+export const MenuButton = (props: MenuButtonProps) => {
+  const [local, leftProps] = splitProps(props, ['text']);
+
+  return (
+    <li {...leftProps} class={menuStyle} data-selected={props.selected}>
+      {local.text}
+    </li>
+  );
+};