为aside添加可折叠效果

[GodlessLiu]

What type of PR is this?

/kind improvement
/area console

What this PR does / why we need it:

面板侧栏可能会占用部分空间，为侧栏添加折叠按钮，添加主要内容的展示面积。

Which issue(s) this PR fixes:

Fixes #4197

Special notes for your reviewer:

测试方式：

1. 在本地运行halo，点击添加的按钮看是否生效。

Does this PR introduce a user-facing change?

优化侧栏，使用户能够自定义是否展开侧栏。

[f2c-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
To complete the pull request process, please assign ruibaby after the PR has been reviewed.
You can assign the PR to them by writing /assign @ruibaby in a comment when ready.

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

Needs approval from an approver in each of these files:

• console/OWNERS

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

[CLAassistant]

All committers have signed the CLA.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (31675db) 61.07% compared to head (db1c04e) 61.07%.
Report is 90 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff            @@
##               main    #4407   +/-   ##
=========================================
  Coverage     61.07%   61.07%           
  Complexity     2566     2566           
=========================================
  Files           374      374           
  Lines         13162    13162           
  Branches        937      937           
=========================================
  Hits           8039     8039           
  Misses         4670     4670           
  Partials        453      453           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[ruibaby]

实际体验之后的一些建议：

1. 折叠按钮的位置有点突兀

   

2. 折叠之后的图标似乎没有居中。

   

3. 如果遇到分组文字过长，会有样式问题

   

   我的建议是可以将折叠后的宽度调高一点，给分组的文字多留一点空间，如果还超出一样，可以加上 ...

4. 切换到某些菜单项的时候，折叠状态会恢复，比如用户。

5. 刷新页面之后，折叠状态会恢复，建议将这个状态缓存到 localStorage，可以使用 vueuse 的 useLocalStorage

6. 切换折叠状态时，菜单的动画和内容区域的变化不协调，可以考虑同一给内容区域加上动画。其次，动画速度可以在快一点。

   

[GodlessLiu]

修改折叠后的样式和折叠器的位置，改变logo位置居中。

1. 折叠前效果如下：

2. 折叠后的效果： 3. 同时也增加了内容区域动画

[LIlGG]

下面是一些建议：

1. 建议为折叠按钮增加 cursor: pointer;
2. 折叠之后展示为图标，用户可能不清楚目标功能是什么，建议使用 floating-vue 在用户鼠标悬浮在某个图标上时，给予提示。

[JohnNiang]

• 建议将“折叠和展开”按钮放置在左下角。
• 展开时动画不够平滑。

[f2c-ci-robot]

PR needs rebase.

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.

[JohnNiang]

Hi @GodlessLiu ，请问有最新进展么？

[JohnNiang]

因长时间未回应，我将关闭当前 PR。

/close

[f2c-ci-robot]

@JohnNiang: Closed this PR.

In response to this:

因长时间未回应，我将关闭当前 PR。

/close

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.