In the above image top navigation bar and left sidebar is fixed. When I click on the option 6 it will jump to a section 6. So, the problem I'm facing is how do I translate this view into mobile?
There can be multiple approach to solve this problem, It will depend upon which action you want to take base of importance of each tabs. If you want to each and every tabs at same time and can't afford to hide any one then just dedicate one page so show all tabs and sub-tabs as expandable section and detail page will be different, else you can follow these approaches.
1. You can go for nested tab approach (Scrollable tabs and sub-tabs)
2. Primary tabs on top and sub-tabs in side.
Note: Sub-tabs can only be adjusted here if title can be represented with Icon or number.
- Primary tabs on top and sub-tabs as expandable accrodians In this case your you can show a long title for sub-tabs, and it you are worried about people not getting to know sub-tabs which not fit in view you can show an indication on either side for that.