Refactor MenuItems to use styled components

Author: devklick

src/components/MenuItems/MenuItems.scss

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import useSystemSettings from "../../stores/systemSettingsStore";
 
-import "./MenuItems.scss";
+import { StyledItemsContent, StyledItems, StyledMenuItem } from "./styles";
 
 export interface MenuItemsProps {
   items: Array<MenuItemProps>;
@@ -15,31 +15,32 @@ export interface MenuItemProps {
   items?: Array<MenuItemProps>;
 }
 
-function MenuItems({ items, position, positionType }: MenuItemsProps) {
+function MenuItems({
+  items,
+  position: { x, y },
+  positionType,
+}: MenuItemsProps) {
   const settings = useSystemSettings();
   return (
-    <div
-      className="menu-items"
-      style={{
-        left: position.x,
-        top: position.y,
-        backgroundColor: settings.mainColor,
-        position: positionType,
-      }}
+    <StyledItems
+      left={x}
+      top={y}
+      backgroundColor={settings.mainColor}
+      position={positionType}
     >
-      <div className="menu-items__content">
+      <StyledItemsContent>
         {items.map((item, i) => (
           <MenuItem
             title={item.title}
             action={item.action}
             items={item.items}
             itemNo={i + 1}
-            position={{ ...position }}
+            position={{ x, y }}
             key={`${item.title}-${i}`}
           />
         ))}
-      </div>
-    </div>
+      </StyledItemsContent>
+    </StyledItems>
   );
 }
 
@@ -124,22 +125,21 @@ function MenuItem({
   }
 
   return (
-    <div
+    <StyledMenuItem
       ref={elementRef}
-      className="menu-item"
       onClick={handleOnClick}
       onMouseEnter={handleOnMouseEnter}
       onMouseLeave={handleOnMouseLeave}
     >
-      <span className="menu-item__title">{title}</span>
+      <span>{title}</span>
       {items && open && (
         <MenuItems
           items={items}
           position={{ ...elementPosition.current }}
           positionType="absolute"
         />
       )}
-    </div>
+    </StyledMenuItem>
   );
 }
 

src/components/MenuItems/MenuItems.tsx

@@ -0,0 +1,28 @@
+import styled from "@emotion/styled";
+
+interface StyledMenuItemsProps {
+  position: "relative" | "absolute";
+  left: number;
+  top: number;
+  backgroundColor: string;
+}
+
+export const StyledItems = styled.div<StyledMenuItemsProps>`
+  width: auto;
+  white-space: nowrap;
+  box-sizing: border-box;
+  box-shadow: 0 0 2px rgb(0, 0, 0, 0.5);
+  left: ${(props) => props.left}px;
+  top: ${(props) => props.top}px;
+  background-color: ${(props) => props.backgroundColor};
+  position: ${(props) => props.position};
+`;
+
+export const StyledItemsContent = styled.div`
+  box-sizing: border-box;
+`;
+
+export const StyledMenuItem = styled.div`
+  padding: 5px 12px;
+  height: 20px;
+`;

src/components/MenuItems/styles.ts

@@ -19,7 +19,7 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
-    "types": ["@emotion/react/types/css-prop"]
+    "types": ["@emotion/react/types/css-prop", "@types/node"]
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]