Ability to collapse site navigation

This came up on list, the ability to collapse the side menu. I remarked that it would be nice to be able to collapse the side navigation so only the icons are visible.

Heres one possible solution from Gonzalo:

--------
In your tool add the following:

<script type="text/javascript" src="/library/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#toggleToolMenu').toggle(function(e){
e.preventDefault();
$('#toolMenuWrap', window.parent.document).css(

{'width':'2px','overflow':'hidden'}

);
$('#content', window.parent.document).css(

{'margin-left':'1em'}

);
}, function(e) {
e.preventDefault();
$('#toolMenuWrap', window.parent.document).css(

{'width':'11em'}

);
$('#content', window.parent.document).css(

{'margin-left':'12.3em'}

);

});
});
</script>

<a id="toggleToolMenu" href="#">Toggle full width</a>

This should work in 2.6 - the above measurements assume the default Sakai skin - you will need to adjust for your case.
--------

However, for those that do adjust the skin, this requires some work to get right, for instance we have our icons on the left, not the right.
So I propose that a separate div be created at render time that contains only the icons from the toolmenu and when the 'collapse' function is required, it replaces the full navigation div with the smaller one. This should cater for all cases where people adjust the toolmenu.