Side Navigation, by default, is designed to appear on the smaller screen which will be triggered by a navigation button. Mobile Collapsible Side Navigation can be configured from Materialize CSS website. You can check the code from the following link

https://materializecss.com/navbar.html
Once you have added the necessary HTML, CSS and JS for Mobile collapsible menu, you will be getting the following output. On the contrary, if you would like to know how to create sidenav, please follow the link below ...

https://ampersandacademy.com/tutorials/materialize-css/how-to-open-sidenav-on-the-right-in-materialize-css

After you have incorporated the mobile navigation, you will be able to find that the default side nav size is approx 300px. The following screenshots will help you understand the width of the side nav.

 

Furthermore, if we have longer content or shorter content the default width size will generate a poor UI with improper width size. This can be rectified using a simple CSS to either increase or decrease the sidenav width.

The side nav CSS has to be written for the ul with the id="mobile-demo". 

You can view the Demo using the following link

How to increase sidenav width in materialize css