Add "fullWidth" prop to the Menu widget

components/src/stories/Menu.stories.js

@@ -16,15 +16,17 @@ export const Component = {
           slot="trigger" 
           text="open menu" 
         />
-        <div style="padding:8px 16px; width:300px; border:1px solid black;" slot="content">
-          <p>item</p>
+        <div style="padding:8px 16px; border:1px solid black;" slot="content">
+          <p>Lorem ipsum dolor sit amet</p>
         </div>
       </ui-menu>
     `
   }),
 
   args: {
     align: 'left',
+    closeOnClickInside: false,
+    fullWidth: false,
   },
 };
 
@@ -36,6 +38,8 @@ export default {
   },
 
   argTypes: {
+    closeOnClickInside: 'boolean',
+    fullWidth: 'boolean',
     align: {
       options: ['right', 'left'],
       control: {

components/src/widgets/menu/widget.spec.js

@@ -119,6 +119,34 @@ describe('Menu component', () => {
     });
   });
 
+  describe('fullWidth class', () => {
+    it('adds the "menu-content_full-width" class if fullWidth is true', async () => {
+      const wrapper = mount(Menu, {
+        props: {
+          fullWidth: true,
+        },
+      });
+
+      // Open menu
+      await wrapper.find('.menu-trigger').trigger('click');
+
+      expect(wrapper.find('.menu-content_full-width').exists()).toEqual(true);
+    });
+
+    it('does not add the "menu-content_full-width" class fullWidth is false', async () => {
+      const wrapper = mount(Menu, {
+        props: {
+          fullWidth: false,
+        },
+      });
+
+      // Open menu
+      await wrapper.find('.menu-trigger').trigger('click');
+
+      expect(wrapper.find('.menu-content_full-width').exists()).toEqual(false);
+    });
+  });
+
   describe('align prop validator', () => {
     it.each([
       // expected, value

components/src/widgets/menu/widget.vue

@@ -14,7 +14,7 @@
       <div
         v-if="showMenu"
         class="menu-content"
-        :class="alignmentClass"
+        :class="[alignmentClass, fullWidthClass]"
         @click.stop="onClickInside"
       >
         <slot name="content" />
@@ -38,6 +38,10 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  fullWidth: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const showMenu = ref(false);
@@ -48,6 +52,8 @@ const alignmentClass = computed(() => (props.align === 'left'
   : 'menu-content_align-right'
 ));
 
+const fullWidthClass = computed(() => (props.fullWidth ? 'menu-content_full-width' : ''));
+
 const toggle = () => {
   showMenu.value = !showMenu.value;
 };
@@ -80,12 +86,18 @@ onUnmounted(() => {
 .menu-content {
   position: absolute;
   top: 0;
+  width: max-content;
 
   &_align-right {
     right: 0;
   }
+
   &_align-left {
     left: 0;
   }
+
+  &_full-width {
+    width: 100%;
+  }
 }
 </style>