docs(components): [menu] add left and right example (#8094)

docs/en-US/component/menu.md

@@ -17,6 +17,14 @@ menu/basic
 
 :::
 
+## Left And Right
+
+:::demo You can make the menu items to the left or right.
+
+menu/left-and-right
+
+:::
+
 ## Side bar
 
 Vertical Menu with sub-menus.

docs/examples/menu/left-and-right.vue

@@ -0,0 +1,40 @@
+<template>
+  <el-menu
+    :default-active="activeIndex"
+    class="el-menu-demo"
+    mode="horizontal"
+    :ellipsis="false"
+    @select="handleSelect"
+  >
+    <el-menu-item index="0">LOGO</el-menu-item>
+    <div class="flex-grow" />
+    <el-menu-item index="1">Processing Center</el-menu-item>
+    <el-sub-menu index="2">
+      <template #title>Workspace</template>
+      <el-menu-item index="2-1">item one</el-menu-item>
+      <el-menu-item index="2-2">item two</el-menu-item>
+      <el-menu-item index="2-3">item three</el-menu-item>
+      <el-sub-menu index="2-4">
+        <template #title>item four</template>
+        <el-menu-item index="2-4-1">item one</el-menu-item>
+        <el-menu-item index="2-4-2">item two</el-menu-item>
+        <el-menu-item index="2-4-3">item three</el-menu-item>
+      </el-sub-menu>
+    </el-sub-menu>
+  </el-menu>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const activeIndex = ref('1')
+const handleSelect = (key: string, keyPath: string[]) => {
+  console.log(key, keyPath)
+}
+</script>
+
+<style>
+.flex-grow {
+  flex-grow: 1;
+}
+</style>