Menu sidebar height on small screen resolutions

Question

I'm currently having a challenge on a SaaS I'm helping designing, regarding small screen sizes.

That SaaS has a menu sidebar on the left as its main navigation, with 2 levels of navigation.

The problem with this sidebar is that when it's visualized on small screen sizes (1366x768 to be exact), all the items on the navigation sidebar don't fit, making the last items disappear.

My question is: do you know a good practice or idea to solve this issue, so all items on the sidebar are visible on small resolutions?

Answer 1

Well, Joao, scroll-ability is always a great option to fall back on when dealing with a fairly large amount of items which you want your prospective customers to be aware of on mobile view.

Remember mobile first right.

As such the challenge is now how to manage this scrolling and how to display them. Well, the best so far is an easy to reach drawer, that has each item boldly written with respective padding around each of them, to enable easy tap/click for big fingers. For the scrolling, just at the bottom of the drawer an arrow pointing down enlightens the user that there are more items below the boundaries.

Here's a sample I designed:

Easy to reach navigation drawer i.e by clicking the Menu

The navigation drawer