feat: handle resize for all nav drawer placement/position

gitsindonesia · Sep 8, 2023 · 2d6980f · 2d6980f
1 parent 7544f09
commit 2d6980f
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 7 deletions.
diff --git a/packages/nav-drawer/src/NavDrawer.stories.ts b/packages/nav-drawer/src/NavDrawer.stories.ts
@@ -424,6 +424,7 @@ export const Resizeable: StoryFn<typeof NavDrawer> = (args) => ({
       color="primary"
       shadow="lg"
       resizeable
+      v-bind="args"
     >
       <p class="font-semibold p-4 truncate">
         Hover on the edge to resize

diff --git a/packages/nav-drawer/src/NavDrawer.vue b/packages/nav-drawer/src/NavDrawer.vue
@@ -139,17 +139,28 @@ const styles = computed(() => {
 });
 
 const resizerEl = ref<HTMLElement>();
-const {x} = useDraggable(resizerEl);
+const {x, y} = useDraggable(resizerEl);
 
 watch(x, (newX) => {
-  if (newX <= props.minWidth) return;
+  const newWidth = props.right ? window.innerWidth - newX : newX;
 
-  if (newX >= props.maxWidth) return;
+  if (newWidth <= props.minWidth) return;
+  if (newWidth >= props.maxWidth) return;
+  if (!drawer.value || props.bottom || props.top) return;
 
-  if (!drawer.value) return;
+  drawer.value.style.userSelect = 'none';
+  drawer.value.style.setProperty('--nav-drawer-width', `${newWidth}px`);
+});
+
+watch(y, (newY) => {
+  const newWidth = props.bottom ? window.innerHeight - newY : newY;
+
+  if (newWidth <= props.minWidth) return;
+  if (newWidth >= props.maxWidth) return;
+  if (!drawer.value || props.left || props.right) return;
 
   drawer.value.style.userSelect = 'none';
-  drawer.value.style.setProperty('--nav-drawer-width', `${newX}px`);
+  drawer.value.style.setProperty('--nav-drawer-width', `${newWidth}px`);
 });
 
 function onResizerClicked(event: any) {

diff --git a/packages/themes/src/morpheme/_nav-drawer.scss b/packages/themes/src/morpheme/_nav-drawer.scss
@@ -1,5 +1,6 @@
 :root {
   --nav-drawer-width: 248px;
+  --nav-drawer-height: 100%;
   --nav-drawer-transition: all 0.3s ease-out;
   --nav-drawer-bg-color: var(--color-white);
   --nav-drawer-text-color: var(--color-gray-800);
@@ -30,6 +31,7 @@
   box-shadow: var(--nav-drawer-shadow);
   border: var(--nav-drawer-border);
   width: var(--nav-drawer-width);
+  height: var(--nav-drawer-height);
   position: relative;
 
   /* variants */
@@ -107,19 +109,41 @@
 
   &--right {
     right: 0;
+
+    .nav-drawer__resizer {
+      left: 0;
+      right: initial;
+    }
   }
 
   &--left {
     left: 0;
+
+    .nav-drawer__resizer {
+      left: initial;
+      right: 0;
+    }
   }
 
   &--bottom {
     top: initial;
     left: 0;
     right: 0;
     bottom: 0;
-    height: var(--nav-drawer-width);
     width: 100%;
+    height: var(--nav-drawer-width);
+
+    .nav-drawer__resizer {
+      top: 0;
+      bottom: initial;
+      width: 100%;
+      height: var(--nav-drawer-resizer-width);
+
+      &:hover,
+      &:active {
+        cursor: row-resize;
+      }
+    }
   }
 
   &--top {
@@ -129,6 +153,18 @@
     right: 0;
     height: var(--nav-drawer-width);
     width: 100%;
+
+    .nav-drawer__resizer {
+      bottom: 0;
+      top: initial;
+      width: 100%;
+      height: var(--nav-drawer-resizer-width);
+
+      &:hover,
+      &:active {
+        cursor: row-resize;
+      }
+    }
   }
 
   /* nav-drawer-transition */
@@ -228,9 +264,9 @@
     width: var(--nav-drawer-resizer-width);
     background-color: var(--nav-drawer-resizer-bg-color);
     position: absolute;
-    right: 0;
     cursor: col-resize;
     transition: background-color 0.3s ease-out;
+    right: 0;
 
     &:hover,
     &:active {