feat: contents menu style

Author: winverse

packages/nextra-editor/css/styles.css

@@ -19,7 +19,7 @@ html {
     'calt' 1,
     'ss01' 1;
   -webkit-tap-highlight-color: transparent;
-  @apply nx-overflow-hidden;
+  /* @apply nx-overflow-hidden; */
 }
 
 body {

packages/nextra-editor/package.json

@@ -106,8 +106,8 @@
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
     "@types/title": "^3.4.3",
-    "@typescript-eslint/eslint-plugin": "^7.5.0",
-    "@typescript-eslint/parser": "^7.6.0",
+    "@typescript-eslint/eslint-plugin": "^7.11.0",
+    "@typescript-eslint/parser": "^7.11.0",
     "@vitejs/plugin-react": "^4.1.0",
     "concurrently": "^8.0.0",
     "eslint": "^9.5.0",

packages/nextra-editor/src/components/sidebar/index.tsx

@@ -115,6 +115,7 @@ export function Sidebar({
 
   return (
     <>
+      <div id="menu-root"></div>
       {includePlaceholder && asPopover ? (
         <div className="nx-h-0 nx-w-80 nx-shrink-0 max-xl:nx-hidden" />
       ) : null}
@@ -132,8 +133,7 @@ export function Sidebar({
           'nextra-sidebar-container nx-flex nx-flex-col',
           'motion-reduce:nx-transform-none md:nx-shrink-0',
           'nx-transform-gpu nx-transition-all nx-ease-in-out',
-          'print:nx-hidden',
-          'nx-relative nx-select-none nx-overflow-hidden',
+          'nx-relative nx-select-none',
           showSidebar ? 'md:nx-w-80' : 'md:nx-w-20',
           asPopover ? 'md:nx-hidden' : 'md:nx-relative md:nx-top-0 md:nx-self-start',
           menu

packages/nextra-editor/src/components/sidebar/sidebar-controller/control-menu.tsx

@@ -1,28 +1,42 @@
-import useOutsideClick from '@/hooks/use-outside-click'
+import { EditIcon } from '@/nextra/icons/edit'
+import { TrashIcon } from '@/nextra/icons/trash'
 import cn from 'clsx'
-import { forwardRef, RefObject } from 'react'
+import { forwardRef } from 'react'
 
 type Props = {
   isOpen: boolean
+  position: { top: number; left: number }
 }
 
 const style = {
-  list: cn('nx-w-full nx-p-3 hover:nx-bg-gray-100'),
+  list: cn(
+    'nx-w-full nx-flex nx-items-center nx-p-3 hover:nx-bg-gray-100 dark:hover:nx-bg-neutral-700',
+    'nx-cursor-pointer nx-select-none',
+  ),
+  svg: cn('nx-mr-2'),
 }
 
-const ControlMenu = forwardRef<HTMLDivElement, Props>(({ isOpen }, ref) => {
+const ControlMenu = forwardRef<HTMLDivElement, Props>(({ isOpen, position }, ref) => {
   return (
     <div
       ref={ref}
       className={cn(
-        'nx-absolute nx-right-0 nx-top-0 nx-z-10 nx-py-2',
-        'nx-bg-white',
-        isOpen ? 'nx-visible' : 'nx-invisible',
+        'nx-absolute nx-z-20 nx-w-[150px] nx-rounded-md nx-py-2 nx-shadow-lg',
+        'nx-text-sm',
+        'nx-bg-white nx-text-gray-600',
+        'dark:nx-bg-neutral-800 dark:nx-text-gray-300',
       )}
+      style={{ top: position.top, left: 280, display: isOpen ? 'block' : 'none' }}
     >
       <ul>
-        <li className={style.list}>이름 바꾸기</li>
-        <li className={style.list}>삭제</li>
+        <li className={style.list}>
+          <EditIcon className={style.svg} />
+          <span>이름 바꾸기</span>
+        </li>
+        <li className={style.list}>
+          <TrashIcon className={style.svg} />
+          <span>삭제</span>
+        </li>
       </ul>
     </div>
   )

packages/nextra-editor/src/components/sidebar/sortable-tree/index.tsx

@@ -308,7 +308,7 @@ function SortableTree({ items, sidebarRef, showSidebar, onItemsChanged }: Props)
         >
           <div
             className={cn(
-              'nx-overflow-y-auto nx-overflow-x-hidden',
+              'nx-overflow-y-auto',
               'nx-grow nx-px-4 md:nx-h-[calc(100vh-var(--nextra-navbar-height)-var(--nextra-menu-height))]',
               'nx-pb-4',
               showSidebar ? 'nextra-scrollbar' : 'no-scrollbar',

packages/nextra-editor/src/components/sidebar/sortable-tree/sortable-item.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties, forwardRef, MouseEventHandler, useEffect, useState } from 'react'
+import { CSSProperties, forwardRef, useEffect, useState } from 'react'
 import cn from 'clsx'
 import { ActionType, useSidebar } from '@/contexts/sidebar'
 import { useRouter } from 'next/router'
@@ -10,10 +10,12 @@ import type { SortableItemProps } from './types'
 import ControlInput from '../sidebar-controller/control-input'
 import ControlMenu from '../sidebar-controller/control-menu'
 import useOutsideClick from '@/hooks/use-outside-click'
+import { createPortal } from 'react-dom'
 
 export const SortableItem = forwardRef<HTMLDivElement, SortableItemProps>((props, ref) => {
   const { isDragging, overItem, setOverItem } = useDndTree()
   const { focusedItem, setFocusedItem, showMenuId, setShowMenuId } = useSidebar()
+  const [mousePosition, setMousePosition] = useState({ top: 0, left: 0 })
   const [isEdit, setIsEdit] = useState<boolean>(false)
 
   const router = useRouter()
@@ -32,7 +34,6 @@ export const SortableItem = forwardRef<HTMLDivElement, SortableItemProps>((props
     clone,
     isOver,
     transform,
-    disabled,
   } = props
 
   const isControlAction = ['newPage', 'newFolder', 'newSeparator'].includes(item.type)
@@ -53,6 +54,7 @@ export const SortableItem = forwardRef<HTMLDivElement, SortableItemProps>((props
     if (showMenuId === item.id) {
       setShowMenuId(null)
     } else {
+      setMousePosition({ top: e.clientY, left: e.clientX })
       setShowMenuId(item.id)
     }
   }
@@ -92,7 +94,10 @@ export const SortableItem = forwardRef<HTMLDivElement, SortableItemProps>((props
       className={cn('nx-relative')}
       onContextMenu={onOpenMenu}
     >
-      <ControlMenu isOpen={showMenuId === item.id} ref={menuRef} />
+      {createPortal(
+        <ControlMenu ref={menuRef} isOpen={showMenuId === item.id} position={mousePosition} />,
+        document.getElementById('menu-root')!,
+      )}
       <div
         ref={ref}
         {...handleProps}

packages/nextra-editor/src/nextra/icons/edit.tsx

@@ -0,0 +1,12 @@
+import { ComponentProps, ReactElement } from 'react'
+
+export function EditIcon(props: ComponentProps<'svg'>): ReactElement {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+      <path
+        fill="currentColor"
+        d="M13.23 1h-1.46L3.52 9.25l-.16.22L1 13.59L2.41 15l4.12-2.36l.22-.16L15 4.23V2.77zM2.41 13.59l1.51-3l1.45 1.45zm3.83-2.06L4.47 9.76l8-8l1.77 1.77z"
+      />
+    </svg>
+  )
+}

packages/nextra-editor/src/nextra/icons/trash.tsx

@@ -0,0 +1,14 @@
+import type { ComponentProps, ReactElement } from 'react'
+
+export function TrashIcon(props: ComponentProps<'svg'>): ReactElement {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M10 3h3v1h-1v9l-1 1H4l-1-1V4H2V3h3V2a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1zM9 2H6v1h3zM4 13h7V4H4zm2-8H5v7h1zm1 0h1v7H7zm2 0h1v7H9z"
+        clipRule="evenodd"
+      />
+    </svg>
+  )
+}