Fix issues with user menu on different screen sizes

[davide-negretti]

References

• Fixes #1890
• Fixes #1891

Description

List of changes in this PR:

• On wide screens clicking on the user icon opens the user menu. On narrow screens clicking on the user icons redirects to logout page, and other user menu voices are missing from the UI. With this PR, on narrow screens, when user is logged:
  • missing user menu voices have been added to the expandable menu
  • user icon has been replaced with logout icon, and the tooltip has been replaced accordingly
• Horizontal alignment and vertical arrangement of menu items has been fixed
• The behaviour of the root component has been fixed when the admin sidebar is open

All changes have been made for both dspace and base theme.

Important notes

When sidebar was open, a left padding of the same size of the sidebar was added to the inner-wrapper of the root component. I had to move the padding to the outer-wrapper to avoid issues with the navbar and the expandable menu which currently overflow from the right margin on narrow screens. I first tried to solve these problems by replacing the left padding with the left margin, but this caused additional issues because the box-sizing does not take margins into account.

Screenshots

dspace theme

base theme

Checklist

• [x] My PR is small in size (e.g. less than 1,000 lines of code, not including comments & specs/tests), or I have provided reasons as to why that's not possible.
• [x] My PR passes TSLint validation using yarn run lint
• [x] My PR doesn't introduce circular dependencies
• [x] My PR includes TypeDoc comments for all new (or modified) public methods and classes. It also includes TypeDoc for large or complex private methods.
• [x] My PR passes all specs/tests and includes new/updated specs or tests based on the Code Testing Guide.
• [x] If my PR includes new, third-party dependencies (in package.json), I've made sure their licenses align with the DSpace BSD License based on the Licensing of Contributions documentation.

[jtimal]

Hi @davide-negretti

I dared to make a test, the icons and the operation seems to me very well because when you open the menu options are hidden on the right and backwards, try in various resolutions less than 665 px, attached some screenshots.

it only overflowed when I added more options to the menu, for example in this image.

to fix it change in this property the 100vh for auto

Cheers!

[davide-negretti]

Hi @jtimal Thank your for your feedback. I changed the height as follows:

height: auto;
min-height: 100vh; 

In this way the navbar adapts to its content but it also fills the available height