Add wrapper for Radix DropdownMenu

components/DropdownMenuContent/index.scss

@@ -0,0 +1,188 @@
+.Menu {
+  transform-origin: --radix-dropdown-menu-content-transform-origin;
+  background: var(--menu-bg);
+  border-radius: 6px;
+  box-shadow: 0 1px 4px rgb(0 0 0 / 8%);
+  box-sizing: border-box;
+  min-width: 15vw;
+  margin: 0 $unit-2x;
+  // top: $unit-8x; // This shouldn't be hardcoded. How to calculate it?
+  // Also, add space that doesn't make the menu disappear if you move your mouse slowly
+  z-index: 15;
+
+  @include breakpoint(phone) {
+    left: $unit-2x;
+    right: $unit-2x;
+  }
+}
+
+.MenuItem {
+  color: var(--text-tertiary);
+  font-weight: $normal;
+
+  @include breakpoint(phone) {
+    cursor: pointer;
+  }
+
+  &:hover:not(.disabled) {
+    background: var(--menu-bg-item-hover);
+    color: var(--text-primary);
+    cursor: pointer;
+
+    a {
+      color: var(--text-primary);
+
+      &:hover {
+        text-decoration: none;
+      }
+
+      &:visited {
+        color: var(--text-primary);
+      }
+    }
+
+    @include breakpoint(phone) {
+      background: inherit;
+      color: inherit;
+      cursor: default;
+
+      a {
+        color: inherit;
+      }
+    }
+  }
+
+  &.profile > div {
+    padding: 6px 12px;
+  }
+
+  &.language {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    gap: $unit;
+    padding-right: $unit;
+
+    span {
+      flex-grow: 1;
+    }
+
+    .Switch {
+      $height: 24px;
+
+      background: $grey-60;
+      border-radius: calc($height / 2);
+      border: none;
+      position: relative;
+      width: 44px;
+      height: $height;
+
+      &:hover {
+        cursor: pointer;
+      }
+
+      .Thumb {
+        $diameter: 18px;
+
+        background: $grey-100;
+        border-radius: calc($diameter / 2);
+        display: block;
+        height: $diameter;
+        width: $diameter;
+        position: absolute;
+        top: 3px;
+        left: 3px;
+        z-index: 3;
+
+        &:hover {
+          cursor: pointer;
+        }
+
+        &[data-state='checked'] {
+          background: $grey-100;
+          left: 23px;
+        }
+      }
+
+      .left,
+      .right {
+        color: $grey-100;
+        font-size: 10px;
+        font-weight: $bold;
+        position: absolute;
+        z-index: 2;
+      }
+
+      .left {
+        top: 6px;
+        left: 6px;
+      }
+
+      .right {
+        top: 6px;
+        right: 5px;
+      }
+    }
+  }
+
+  a {
+    color: $grey-50;
+
+    &:hover {
+      text-decoration: none;
+    }
+
+    &:visited {
+      color: $grey-50;
+    }
+  }
+
+  & > a,
+  & > span {
+    display: block;
+    padding: 12px 12px;
+  }
+
+  & > div {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    padding: 10px 12px;
+
+    &:hover {
+      i.tag {
+        background: var(--tag-bg);
+        color: var(--tag-text);
+      }
+    }
+
+    span {
+      flex-grow: 1;
+    }
+
+    img {
+      $diameter: 32px;
+      border-radius: calc($diameter / 2);
+      height: $diameter;
+      width: $diameter;
+    }
+  }
+}
+
+.MenuGroup {
+  border-bottom: 1px solid var(--menu-separator);
+
+  &:first-child .MenuItem:first-child:hover {
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+  }
+
+  &:last-child .MenuItem:last-child:hover {
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+}

components/DropdownMenuContent/index.tsx

@@ -0,0 +1,37 @@
+import React, { PropsWithChildren } from 'react'
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
+import classNames from 'classnames'
+
+import './index.scss'
+
+interface Props extends DropdownMenuPrimitive.DropdownMenuContentProps {}
+
+export const DropdownMenu = DropdownMenuPrimitive.Root
+export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+export const DropdownMenuLabel = DropdownMenuPrimitive.Label
+export const DropdownMenuItem = DropdownMenuPrimitive.Item
+export const DropdownMenuGroup = DropdownMenuPrimitive.Group
+export const DropdownMenuSeparator = DropdownMenuPrimitive.Separator
+
+export const DropdownMenuContent = React.forwardRef<HTMLDivElement, Props>(
+  ({ children, ...props }: PropsWithChildren<Props>, forwardedRef) => {
+    const classes = classNames(props.className, {
+      Menu: true,
+    })
+    return (
+      <DropdownMenuPrimitive.Portal>
+        <DropdownMenuPrimitive.Content
+          {...props}
+          className={classes}
+          ref={forwardedRef}
+        >
+          {children}
+        </DropdownMenuPrimitive.Content>
+      </DropdownMenuPrimitive.Portal>
+    )
+  }
+)
+
+DropdownMenuContent.defaultProps = {
+  sideOffset: 4,
+}