Keep in mind that the guidelines that Google proposed for Material Design are just that: guidelines. They won't be able to help you in all situations, but they are good enough to give you a jump start.
Is this ok?
The Material Design guidelines has a few different recommendations for handling this situation. Right now you have two levels of navigation:
- The top three tabs
- The second level of tabs, which allow you to filter things down further.
You can find recommendations about handling the primary navigation, one of which is to use tabs like you are currently doing. Another option, which you can find in Google Inbox is to have the primary navigation in the left slide-out menu.
In general when you are working with a limited amount of screen space, you want to present the most important information to the user at the beginning. The list of categories probably isn't the most important thing on your page.
They also provide patterns for handling multi-level navigation that you may want to look into. They suggest using the navigation drawer when you have multiple levels of navigation, but it is recommended to only have one level of navigation in your side menu, typically the primary navigation. On desktop devices the navigation drawer can have multiple levels of nesting, but on mobile (in order to preserve screen space) it's recommended to have each option bring you to a landing page if there are many options in the second level navigation.
Another option is to collapse your tabs up top into the navigation drawer when the space is limited, which is especially useful when there are many tabs. This is something Google does in the Google Store when the screen size is small.
They start with all of the categories up top when there is enough space
And then as screen size is reduced, the tabs are pushed into the sliding left menu.
This is something you may want to consider, given that you do not have that much content in your left sidebar.
If Categories is selected, should I have a page where all the different categories are shown, then the user clicks on the one they want (as per https://rrrepo.co/explore)?
Usually when you click on the main tab it's expected that you either move to a page related to the tab in general (like an explore page) or an action is triggered that presents that information in-line (like display a dropdown).
A good example of this is Amazon with their menu. If you right click on the menu and open it in a new tab, you reach this "directory" page with all of the categories.
Or should we just automatically go into the first category?
I'm going to strongly recommend against this, especially if it's not made clear to the user that there are other possible categories. By clicking "Categories" they are most likely expecting to find general information on the categories available, not a page that is limited to just one of them.