OK, so here are two screenshots of classic collapsible sidebar:
As we can see, when collapsed, sidebar still holds some space.
The question is - what design patterns can be used to overcome this issue?
Off the top of my head, we can have an arrow on the bottom/top and in collapsed mode we can show only this arrow.
|
|
|||
|
|
|
If your intention is to reduce the reduced sidepanel real estate to zero, there's really very few options available in terms of design patterns. The question simply becomes 'where do you put the button' For example, The Opera Desktop Browser has a button at the bottom left, in the status bar which toggles the visibility of the panel:
Other positions could be at the left end of the tab header, or in a toolbar, or in a pulldown menu or via a context (right mouse) menu, and not forgetting access via keyboard shortcuts. You could use any or all of those! You could perhaps show a draggable sash on hover over the leftmost few pixels of the window, but that's not great for discoverability or usability. If you previously sized the panel just how you like it, drag out panels are a pain, so I wouldn't recommend that route. You could incorporate a permanent small and discrete button into the border (similar to that shown in the sash that you have in the image in your question) which expands when you get close to it with the mouse, so as to provide a larger clickable area. (And which shrinks back when you move away.) Eg - as in the quick mock-up below - perhaps with a little drop shadow to lift the tab, and of course with a tooltip over the button to explain what this is.
|
||||
|

