Set the left menu collapsable

[M3lkior]

Reason/Context

Please try answering few of those questions

• Why we need this improvement?

Depending on the screen resolution, the menu on the right side overlay the spec content

• How will this change help? Allow the user to collapse this menu if needed
• What is the motivation? A degraded user experience

Description

Please try answering few of those questions

• What changes have to be introduced? A new button to collapse the menu with a new collapsed style (a vertical layout to allow the expand ?)
• Will this be a breaking change? no
• How could it be implemented/designed?

A vertical layout with a collapse / expand icon

[magicmatatjahu]

@M3lkior Hello! Thanks for the issue.

Depending on the screen resolution, the menu on the right side overlay the spec content

Do you mean left navigation, not right, yes? Also it's a strange. Could you described which version of template do you use? I see that you probably also use Chrome as browser. I'm using Chrome and Firefox and with 0.21.4 version of template I cannot reproduce the bug. Some resolutions from my spec in Chrome (in Firefox it looks similar):

Desktop:

Tablet:

Mobile:

About feature. Do you want to have something similar like SwaggerHub has, button to collapse left navigation like:

Am I right?

[M3lkior]

Hi @magicmatatjahu ; yes it is about the left menu, not the right,

• Concerning the version of the used html-template, it is the 0.21.2
• And for the proposal, it is exactly what i mean !

[magicmatatjahu]

@M3lkior Thanks for quick response! Could you paste your spec to test? I am very concerned about why you have such a bug. Additionally, could you test the spec on version 0.20.0 of template? This is the pre-switch version to react component.

[M3lkior]

@magicmatatjahu i can not share the spec because of my enterprise specification (and because we are using avro definition in the spec) but i do a test with the v0.20.0 and the issue is not present. I can also reproduce with the v0.21.4

[magicmatatjahu]

Honestly, I don't know what the problem could be. Apparently, as I see in your screenshoot, some styles stopped working for you and instead of (eg) flex the browser rendered it as fixed or absolute. It's hard for me to say what's wrong. At the moment, no one has reported a similar error. Maybe this is also a specification problem - which I doubt. It's really hard for me to conclude what is wrong.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity :sleeping: It will be closed in 60 days if no further activity occurs. To unstale this issue, add a comment with detailed explanation. Thank you for your contributions :heart:

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity :sleeping: It will be closed in 60 days if no further activity occurs. To unstale this issue, add a comment with detailed explanation. Thank you for your contributions :heart:

[magicmatatjahu]

@M3lkior Do you still have the problem with the hovering sidebar?

[M3lkior]

I test again, and the sidebar is now correctly shown but i think that the collapsible sidebar feature is a good ux feature :)

[magicmatatjahu]

At the moment I am busy with something else, but I will mark this issue with Hacktoberfest label - someone should apply for this task :)

[magicmatatjahu]

Moving to the asyncapi-react repository.

[Krishks369]

Is this issue still active? if yes can you please once more elaborate the issue. I would like to contribute in it.

[M3lkior]

Hello @Krishks369 ; i think yes it is about the ui enhancement :)

[Krishks369]

I don't find any menu in right side of the UI

Please correct me if I am Wrong, i am a complete beginner

[M3lkior]

how do you obatin this screeshot ? if you use the html-template generation you will see the menu; if you look at this thread https://github.com/asyncapi/asyncapi-react/issues/441#issuecomment-849545750, there is a menu on the right side showing the operations name, the tags, the components, etc;

[magicmatatjahu]

@Krishks369 Hi! If you are still willing to contribute, you need to make changes on the branch next, in the file https://github.com/asyncapi/asyncapi-react/blob/next/library/src/containers/Sidebar/Sidebar.tsx :

• add some state where you will save expanded/collapsed state of menu
• make it consistent with other styling

So you need to fork repo, switch to next branch and on it make changes. If you will need help, please ping me in this thread :) Every info, how to setup dev environment etc is in Readme.md

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity :sleeping:

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience :heart:

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity :sleeping:

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience :heart:

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity :sleeping:

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience :heart:

[sambhavgupta0705]

Hey @magicmatatjahu can I work on this issue?

[magicmatatjahu]

@sambhavgupta0705 Sure, you can reuse code from https://github.com/asyncapi/asyncapi-react/pull/624

[sambhavgupta0705]

hey @magicmatatjahu I am having problem while setting up this repo locally These are the errors:

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity :sleeping:

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience :heart: