refactor: improve sidebar resizing behavior and clean up mobile aside component code

src/layout/aside/index.vue

@@ -42,12 +42,12 @@ function handleCollapseClick() {
 
 const onSidelineMouseDown = () => {
   isSidebarColResizing.value = true
-  document.documentElement.style.userSelect = 'none'
+  document.documentElement.style.cssText = 'user-select: none; cursor: col-resize;'
   document.addEventListener(
     'mouseup',
     () => {
       isSidebarColResizing.value = false
-      document.documentElement.style.userSelect = 'auto'
+      document.documentElement.style.cssText = 'user-select: auto;'
     },
     {
       once: true,

src/layout/mobile/MobileLeftAside.vue

@@ -13,7 +13,9 @@ const { layoutSlideDirection, mobileLeftAsideWidth } = useInjection(layoutInject
 const mobileLeftAsideRef = useTemplateRef<HTMLElement>('mobileLeftAside')
 
 onMounted(() => {
-  if (mobileLeftAsideRef.value) mobileLeftAsideWidth.value = mobileLeftAsideRef.value.clientWidth
+  if (mobileLeftAsideRef.value) {
+    mobileLeftAsideWidth.value = mobileLeftAsideRef.value.clientWidth
+  }
 })
 </script>
 <template>

src/layout/mobile/MobileRightAside.vue

@@ -8,15 +8,19 @@ import { layoutInjectionKey } from '@/injection'
 import Action from '../header/action/index.vue'
 
 const { layoutSlideDirection, mobileRightAsideWidth } = useInjection(layoutInjectionKey)
+
 const mobileRightAsideRef = useTemplateRef<HTMLElement>('mobileRightAside')
+
 onMounted(() => {
-  if (mobileRightAsideRef.value) mobileRightAsideWidth.value = mobileRightAsideRef.value.clientWidth
+  if (mobileRightAsideRef.value) {
+    mobileRightAsideWidth.value = mobileRightAsideRef.value.clientWidth
+  }
 })
 </script>
 <template>
   <div
     ref="mobileRightAside"
-    class="absolute top-0 right-0 h-svh p-4 transition-[translate]"
+    class="absolute top-0 right-0 h-svh py-4 pr-4 transition-[translate]"
     :class="{
       'translate-x-full': layoutSlideDirection !== 'left',
     }"