feat: Break long menu items into multiple lines

[lan-yonghui]

No description provided.

[f2c-ci-robot]

Adding the "do-not-merge/release-note-label-needed" label because no release-note block was detected, please follow our release note process to remove it.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

[wanghe-fit2cloud]

The code you provided seems mostly clean and clear. However, here's a concise feedback with suggestions:

Code Changes and Suggestions

1. Adding class to Sidebar Menu

• Description: You've added a class custom-menu to the sidebar menu, which is good for styling specific components easily.

<el-submenu v-for="(menuItem, index) in routerMenus" :key="`sub${index}`" style="margin-left: 24px;"
             :show-timeout="300"
             :hide-timeout="300"
             :active-name="'submenu' + (activeIndex === index ? ' active' : '')"
             :background-color="#fff"
             text-align="center"
             ref="submenusRef"
             show-icon
-            popper-class="popper-dropdown"
+            popper-class="popper-dropdown custom-popup-style"
             :collapse-transition="false"
             :unique-opened="true"
             @select="handleMenuClick"
+            class="custom-menu"
>

Suggestion: Added additional styles related to truncation and line-height inside .custom-menu .el-menu-item.

.custom-popup-style {
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: break-word;
    line-height: normal !important;
}

2. Styling Suggestion

• Problem: The default styling of the .elm-menu-item can often lead to truncated content. It might be more appropriate to allow items to wrap rather than truncate them.

.el-menu-item {
    /* ... existing styles ... */
}

.custom-menu .el-menu-item {
  word-break: break-all; /* To allow long lines to wrap instead of being cut off */
}

Summary

Overall, the changes are straightforward and maintain the functionality of the menu component. Adding a class specifically for the menu item is useful for customization purposes. Additionally, allowing line breaks in menu items could improve readability when dealing with longer texts.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[wanghe-fit2cloud]

/lgtm

[wanghe-fit2cloud]

/approve

[f2c-ci-robot]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: wanghe-fit2cloud

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• OWNERS [wanghe-fit2cloud]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment