search

yaminncco / vue-sidebar-menu

A Vue.js Sidebar Menu Component
MIT License
654 stars 193 forks source link

Update Mobile Item Style #266

Closed MahmoudSaidHaggag closed 11 months ago

MahmoudSaidHaggag commented 12 months ago

@yaminncco Please, when i hover on item in collapsed mode (as bottom item), sub menu hide in screen

Can please update mobileItemStyle computed to prevent this problem with

mobileItemStyle () { let dropdownStyle = [{position: "absolute"}, {width: "100%"}, {"overflow-y": "auto"}, {"max-height": "600px"}]; if (this.mobileItemPos > 400) dropdownStyle.push({bottom: "50px"}); else dropdownStyle.push({top: this.mobileItemHeight + "px"}); return { dropdown: dropdownStyle, } }

Thank you in advance.

yaminncco commented 12 months ago

Can you share a screenshot of the problem?

MahmoudSaidHaggag commented 12 months ago

Before update mobileItemStyle Screenshot from 2023-10-31 14-34-43

After update mobileItemStyle Screenshot from 2023-10-31 14-35-30

MahmoudSaidHaggag commented 12 months ago

@yaminncco this is updated code

mobileItemStyle () { let dropdownStyle = [{position: "absolute"}, {width: "100%"}, {"overflow-y": "auto"}, {"max-height": "600px"}]; if (this.mobileItemPos > 400) dropdownStyle.push({bottom: "50px"}); else dropdownStyle.push({top: this.mobileItemHeight + "px"}); return { item: [{position: "absolute"}, {top: this.mobileItemPos + "px"}, this.rtl ? {right: "0px"} : {left: "0px"}, this.rtl ? {"padding-right": this.sidebarWidth} : {"padding-left": this.sidebarWidth}, this.rtl && {direction: "rtl"}, {"z-index": 0}, {width: this.parentWidth - this.parentOffsetLeft + "px"}, {"max-width": this.width}], dropdown: dropdownStyle, background: [{position: "absolute"}, {top: "0px"}, {left: "0px"}, {right: "0px"}, {width: "100%"}, {height: this.mobileItemHeight + "px"}, {"z-index": -1}] } }

====================== By Passing this params ===================== <sidebar-menu ref="menu" :menu="menu" :collapsed="isCollapse" :relative="true" widthCollapsed="60px" theme="white-theme" @toggle-collapse="onToggleCollapse" :rtl="isRTL" />

yaminncco commented 11 months ago

A temporary solution is to add some extra space after the last item with CSS so that the user can scroll and have more space for the dropdown.

MahmoudSaidHaggag commented 11 months ago

@yaminncco, But the problem has already been solved, and I have explained the solution above. All I want from you is to include it in the official version of this library after actually testing it.

yaminncco commented 11 months ago

Added in v5.2.12