💄 style: Add DraggableSideNav

Author: canisminor1990

src/Avatar/style.ts

@@ -11,6 +11,7 @@ export const useStyles = createStyles(({ stylish, css, token, prefixCls }) => {
     `,
     outlined: stylish.variantOutlinedWithoutHover,
     root: css`
+      flex: none;
       background: transparent;
       &.${prefixCls}-avatar {
         user-select: none;

src/DraggablePanel/DraggablePanel.tsx

@@ -37,6 +37,8 @@ const DraggablePanel = memo<DraggablePanelProps>(
     placement = 'right',
     resize,
     style,
+    showBorder = true,
+    showHandleHighlight = false,
     showHandleWideArea = DEFAULT_SHOW_HANDLE_WIDE_AREA,
     size,
     defaultSize: customizeDefaultSize,
@@ -73,7 +75,7 @@ const DraggablePanel = memo<DraggablePanelProps>(
         : placement;
     }, [direction, placement]);
 
-    const { styles, cx } = useStyles({ headerHeight, showHandleWideArea });
+    const { styles, cx } = useStyles({ headerHeight, showBorder, showHandleWideArea });
 
     const [isExpand, setIsExpand] = useControlledState(defaultExpand, {
       onChange: onExpandChange,
@@ -305,9 +307,12 @@ const DraggablePanel = memo<DraggablePanelProps>(
         handleClasses={
           canResizing
             ? {
-                [reversePlacement(internalPlacement)]: handleVariants({
-                  placement: reversePlacement(internalPlacement),
-                }),
+                [reversePlacement(internalPlacement)]: cx(
+                  handleVariants({
+                    placement: reversePlacement(internalPlacement),
+                  }),
+                  showHandleHighlight && styles.handleHighlight,
+                ),
               }
             : {}
         }

src/DraggablePanel/demos/index.tsx

@@ -26,6 +26,8 @@ export default () => {
         options: ['left', 'right', 'top', 'bottom'],
         value: 'left',
       },
+      showBorder: true,
+      showHandleHighlight: false,
       showHandleWhenCollapsed: false,
     },
     { store },

src/DraggablePanel/style.ts

@@ -10,23 +10,27 @@ const LAYOUT = {
 export const useStyles = createStyles(
   (
     { prefixCls, token, stylish },
-    { headerHeight, showHandleWideArea }: { headerHeight: number; showHandleWideArea: boolean },
+    {
+      headerHeight,
+      showBorder,
+      showHandleWideArea,
+    }: { headerHeight: number; showBorder: boolean; showHandleWideArea: boolean },
   ) => {
     const prefix = `${prefixCls}-draggable-panel`;
 
     // Base styles
     const borderStyles = {
       borderBottom: css`
-        border-block-end-width: 1px;
+        border-block-end-width: ${showBorder ? '1px' : '0'};
       `,
       borderLeft: css`
-        border-inline-start-width: 1px;
+        border-inline-start-width: ${showBorder ? '1px' : '0'};
       `,
       borderRight: css`
-        border-inline-end-width: 1px;
+        border-inline-end-width: ${showBorder ? '1px' : '0'};
       `,
       borderTop: css`
-        border-block-start-width: 1px;
+        border-block-start-width: ${showBorder ? '1px' : '0'};
       `,
     };
 
@@ -81,8 +85,16 @@ export const useStyles = createStyles(
         z-index: 50;
         transition: all 0.2s ${token.motionEaseOut};
       }
+    `;
+
+    const handleHighlightStyle = css`
+      &:hover {
+        &::before {
+          background: ${token.colorPrimary};
+          box-shadow: 0 0 8px ${token.colorPrimary}40;
+        }
+      }
 
-      &:hover,
       &:active {
         &::before {
           background: ${token.colorPrimary} !important;
@@ -290,6 +302,7 @@ export const useStyles = createStyles(
       ...borderStyles,
       ...floatPositions,
       ...handleStyles,
+      handleHighlight: handleHighlightStyle,
       ...toggleStyles,
       ...componentStyles,
     };

src/DraggablePanel/type.ts

@@ -29,6 +29,12 @@ export interface DraggablePanelProps extends DivProps {
   pin?: boolean;
   placement: PlacementType;
   resize?: RndProps['enableResizing'];
+  /**
+   * Whether to show border
+   * @default true
+   */
+  showBorder?: boolean;
+  showHandleHighlight?: boolean;
   showHandleWhenCollapsed?: boolean;
   showHandleWideArea?: boolean;
   size?: Partial<Size>;