feat(components): [drawer] add resizable prop (#21608)

* feat(components): [drawer] add `resizable` prop

* style(theme-chalk): [drawer] update based on review feeddback

* chore: adjust style & example

* docs: update example

* docs: remove default direction

---------

Co-authored-by: btea <2356281422@qq.com>

docs/examples/drawer/resizable-drawer.vue

@@ -0,0 +1,31 @@
+<template>
+  <el-segmented
+    v-model="direction"
+    :options="options"
+    size="large"
+    @change="visible = true"
+  />
+
+  <el-drawer v-model="visible" :direction="direction" resizable>
+    <template #header="{ titleId, titleClass }">
+      <h4 :id="titleId" :class="titleClass">This is a custom header!</h4>
+    </template>
+    This is drawer content.
+  </el-drawer>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+import type { DrawerProps } from 'element-plus'
+
+const visible = ref(false)
+const direction = ref<DrawerProps['direction']>()
+
+const options = [
+  { label: 'Top', value: 'ttb' },
+  { label: 'Right', value: 'rtl' },
+  { label: 'Bottom', value: 'btt' },
+  { label: 'Left', value: 'ltr' },
+]
+</script>