common buttons across tabs

Question

I am designing an Webapp in which there are four tabs. I also have 4 buttons which are common across and should be accessible from any of these tabs. The scenario is user may be in any tab and they should be able to access course resources area to add a new course resource or insert existing one. I initially planned a modal window for course resource section which appears on click of course resource button. User can add or select course resources from this model window and insert in to course design area. so when they close the modal window they will still have context. However course resources has huge content and it by itself has different sections. So it will not fit in modal window. IS there any other efficient way to do this. is there a better way to do this other than modal window. Refer wireframe below

Answer 1

Usually in areas like this, I would look to use side panels. These can be implemented in to as much window width as you want - keeping perhaps 30% minimum for the user to see they have not lost their current place, keeping the current context of the original page.

Normally I would allow clicking on the grey gradient would close the side panel as well as having a close button. You just need to make sure you iterate that this will not close the page, but instead close the side panel.

The side panel context can still also be kept which is nice if the user needs to go back and forth from the 4 options you have in your design.