{
const editor = shallowRef(null);
const connectedTable = shallowRef(null);
+const sidebarRef = ref(null);
+const sidebarCss = reactive({
+ width: 320,
+ padding: '20px',
+ isDragging: false,
+ startX: 0,
+ startWidth: 0,
+});
+const drag = (event) => {
+ if (sidebarCss.isDragging) {
+ const diffX = event.clientX - sidebarCss.startX;
+ sidebarCss.width = Math.max(320, sidebarCss.startWidth + diffX); // min-width : 320px,max-width: 30%
+ }
+};
+const stopDrag = () => {
+ sidebarCss.isDragging = false;
+ document.removeEventListener('mousemove', drag);
+ document.removeEventListener('mouseup', stopDrag);
+};
+
+const startDrag = (event) => {
+ sidebarCss.isDragging = true;
+ sidebarCss.startX = event.clientX;
+ sidebarCss.startWidth = sidebarCss.width;
+ document.addEventListener('mousemove', drag);
+ document.addEventListener('mouseup', stopDrag);
+};
+
const state = reactive({
showSidebar: true,
sidebarState: true,
@@ -1652,4 +1688,23 @@ onBeforeUnmount(() => {
@apply text-gray-500 dark:text-gray-400;
}
}
+.sidebar {
+ max-width: 30%;
+}
+.sidebar:hover .custom-drag {
+ opacity: 0.5;
+}
+.custom-drag {
+ position: absolute;
+ width: 10px;
+ height: 40px;
+ background: white;
+ right: 4px;
+ top: 50%;
+ transform: translateY(-50%);
+ border-radius: 30px;
+ opacity: 0;
+ cursor: col-resize;
+ transition: opacity 0.5s;
+}