Great concept, in my opinion this needs better UI. Icon should be different and overall "sidebar" be more obviously a "panel" .

All suggestions on how to improve are welcome. As I am a coder and not a designer, help in this department would be greatly appreciated.

Perhaps a button could be placed next to the search tools?

Great start. Probably the wrong icon - I think that one is usually for
power standby - but that's a minor issue.
On 29 Aug 2014 20:09, "Peter Lose" notifications@github.com wrote:

Perhaps a button could be placed next to the search tools?

[image: skaermbillede 2014-08-29 kl 21 07 24]
https://cloud.githubusercontent.com/assets/1738811/4095120/f1b99b4e-2faf-11e4-8a33-cdc40a382870.png

[image: skaermbillede 2014-08-29 kl 21 08 31]
https://cloud.githubusercontent.com/assets/1738811/4095119/f1b75140-2faf-11e4-96b7-ce8e080276aa.png

—
Reply to this email directly or view it on GitHub
#4197 (comment).

@losedk Which icon is that in your screenshot?

@roland-d it's icon-list-2

@losedk Updated the PR to reflect the proposed button change before the searchbox. Looks and works pretty good I think.

@roland-d looks cool!

Just a few comments:

• The value of the localstorage is changed on click, but it isn't stored
• There's a alignment issue when removing span2 from the sidebar:
• When fixed there is a need to change the paddings of the toolbar:
• It would be nice to add a tooltip explaining what the button do

@losedk Thanks for testing.

The value of the localstorage is changed on click, but it isn't stored

What makes you think that? The code:

localStorage.setItem('com_content_sidebar_visible', jQuery('#sidebar').is(":visible"));

stores the value or not?

There's a alignment issue when removing span2 from the sidebar:

I don't see the issue, can you explain what to look for? Here are my open and closed shots.

Open

Closed

The tooltip has been added. Changes to the wording are welcome.

@roland-d when refreshing the page the previous setting isn't applied. In my test when uncollapsing the sidebar and refreshing the sidebar remains collapsed.

Regarding the alignments:

@losedk The state should be remembered now. Can you please check?

As for the alignments, the body never aligns with the toolbar buttons. Not before or after my change. This is the page using the current staging branch.

The language string depending on status, can be done but requires more JavaScript. We don't have any similar string anywhere in Joomla?

Shouldn't we be using a cookie instead of localstorage to ensure browsers that don't have localstorage don't break ? Shouldn't there be a check as well to find out if localstorage is available ?

As for the icon I feel icon-arrow-right-4 & icon-arrow-left-4 would be more apt.

@coolbung Cookies are possible too, just at first localStorage was suggested. How long should the cookie life be?

I will have a look at those icons as well.

I'd suggest to use localstorage if available (that way the setting can be indefinitely remembered, unless cleared), otherwise use a cookie that has a 2 year validity.

Browsersupport for localstorage seems to be good enough to use it:
http://caniuse.com/#search=localstorage

Browsersupport of Joomla: http://docs.joomla.org/Joomla_Browser_Support
The browsers we support all support localstorage. So no need for a cookie.

@Bakual Thanks for that info Thomas.

Just made an update:

• Using the icons proposed by @coolbung This looks better I think.
• Made the icons state aware
• Updated the language strings
• Made the language strings state aware, we now have 1 string per state as proposed by @losedk

Tested everything I can think of and it works really well and I hope this will be accepted and applied to ALL views

The only small issue I have found is that using arrows doesnt work in RTL - they point in the wrong direction

@brianteeman Thanks for testing. Good point on the arrows, I will take a look at that.

Maybe something that indicates expand and contract
icomoon-expand-3 icomoon-contract-3

@Bakual Agreed. However I still feel there should be a check and it can fall back to cookies if not available. That will avoid undefined errors in unsupported browsers.

@roland-d Looks cool. However can you add a simple sliding animation ? I know it'll be hard without adding the jquery UI library, but I'm sure something very basic should be possible.

I just checked and can confirm that although all the browsers we support do
indeed support local storage some do not support it in private browsing
mode.

1. In private browsing mode, Safari, iOS Safari and the Android browsers do not support setting localStorage.

On 30 August 2014 09:55, Ashwin Date notifications@github.com wrote:

@Bakual https://github.com/Bakual Agreed. However I still feel there
should be a check and it can fall back to cookies if not available. That
will avoid undefined errors in unsupported browsers.

@roland-d https://github.com/roland-d Looks cool. However can you add a
simple sliding animation ? I know it'll be hard without adding the jquery
UI library, but I'm sure something very basic should be possible.

—
Reply to this email directly or view it on GitHub
#4197 (comment).

Brian Teeman
Co-founder Joomla! and OpenSourceMatters Inc.
http://brian.teeman.net/

Can we achieve this effect with bootstrap off-canvas sidebar? That does a
much smoother expand/collapse

On 30 August 2014 10:00, Brian Teeman brian@teeman.net wrote:

I just checked and can confirm that although all the browsers we support
do indeed support local storage some do not support it in private browsing
mode.

1. In private browsing mode, Safari, iOS Safari and the Android browsers do not support setting localStorage.

On 30 August 2014 09:55, Ashwin Date notifications@github.com wrote:

@Bakual https://github.com/Bakual Agreed. However I still feel there
should be a check and it can fall back to cookies if not available. That
will avoid undefined errors in unsupported browsers.

@roland-d https://github.com/roland-d Looks cool. However can you add
a simple sliding animation ? I know it'll be hard without adding the jquery
UI library, but I'm sure something very basic should be possible.

—
Reply to this email directly or view it on GitHub
#4197 (comment).

Brian Teeman
Co-founder Joomla! and OpenSourceMatters Inc.
http://brian.teeman.net/

Brian Teeman
Co-founder Joomla! and OpenSourceMatters Inc.
http://brian.teeman.net/

Totally, that's better than jQuery IMO.
Something like this http://startbootstrap.com/templates/simple-sidebar/

Also, now that this sidebar is close-able it could have a different background colour, a shade of gray ;)

Maybe something that indicates expand and contract
icomoon-expand-3 icomoon-contract-3

This would solve RTL perfectly.

@roland-d
First: congratulations. This is real good job.
Please also: alpha order the new strings (as welle as the one which is not in that section

What would be great is to have a specific js loaded which would not be in the view itself. But not sure it is possible with the js used as it has custom code
(var $visible = localStorage.getItem('com_content_sidebar_visible');).

Cool stuff being made right now :)

I have updated the icons to use the contract and expand icons. Hopefully I have the correct ones :)

@infograf768 Thanks for the heads-up on the language file. I knew there was something but forgot how. Alpha ordered now.

What would be great is to have a specific js loaded which would not be in the view itself.

The JS will be moved to core.js away from the view and made abstract, this is just a proof of concept before I roll it out to other views.

@coolbung I like the CSS approach to the sliding but after several failed attempts I want to ask if you or someone else can help me out here. jQuery has some built-in sliding but either it doesn't look so good or just didn't work. Of course I might be doing it all wrong :)

Also, now that this sidebar is close-able it could have a different background colour, a shade of gray ;)

Gray shade added.

As for the localStorage check and cookies, going to look into that.

Another update pushed where I abstracted the JS code to make it possible to implement in other views.

Debugging must be turned on now to test!!

When the cookie is in place I will update the core.js also.

Currently in the Joomla core the usage of cookies is handled via Mootools, since we are moving away from Mootools I don't want to start using it. Can we use a jQuery plugin like this one:
http://plugins.jquery.com/cookie/
?

I just checked and can confirm that although all the browsers we support do
indeed support local storage some do not support it in private browsing
mode.

Do the browsers store cookies in private mode? I would expect not when they don't even use localStorage. But I may be wrong with that, it would just be the logical thing for me.

I would vote to keep the code as simple as possible. Imho having fallbacks to cookies just makes the code more complicate and the added value is quite minimal. Or do you browse the admin often using privacy modues AND then need the possibility to hide that sidebar?

Since we can login and the login stays till the private tab is open, I
know for sure cookies are stored in Private mode. Just that they get
destroyed (irrespective of cookie time) when closing the private tab.

I agree with you however that the code should be kept simple. I guess
we should be fine to skip the cookie storage. But we would still need
a simple check to ensure there are no undefined errors on unsupported
browsers.

if(typeof(Storage)!=="undefined")

this seems to be a good option from a post on SO.

Regadring cookies:

• Cookies are deleted in Chrome, when the incognito is closed (https://support.google.com/chrome/answer/95464?hl=en)
• Private browsing stops cookies from being stored in Safari (http://support.apple.com/kb/PH17168?viewlocale=en_US&locale=en_US)

Since we can login and the login stays till the private tab is open, I
know for sure cookies are stored in Private mode. Just that they get
destroyed (irrespective of cookie time) when closing the private tab.

True enough.

I agree with you however that the code should be kept simple. I guess
we should be fine to skip the cookie storage. But we would still need
a simple check to ensure there are no undefined errors on unsupported
browsers.
if(typeof(Storage)!=="undefined")

Agreed on making sure there are no errors.

Local storage is way better here. The check is also a good strategy. May I propose using CSS and js from here: http://h5bp.github.io/Effeckt.css/

Added the check if storage is available and updated the core.js.

I think it is now ready to roll it out to other views and the fading sliding can be done in a separate PR unless some has some easy code I can drop in.

Isis new css should be added to template.less and built with generatecss ;)

Isis new css should be added to template.less and built with generatecss ;)

I will have to find out how to do that :)

I will have to find out how to do that :)

change the template.less file here:
https://github.com/roland-d/joomla-cms/blob/toggle-sidebar/administrator/templates/isis/less/template.less

After this run this file on cli:
https://github.com/roland-d/joomla-cms/blob/toggle-sidebar/build/generatecss.php

@zero-24 Thanks, that helped a lot :)

To all:
I have applied the toggle button to all views except com_cache and the language manager page Installed - Site and Installed - Administrator because there is no search bar there. Advice if the button should be there at all and if so, where.

Please test all views and let me know if I missed anything. Thanks

@zero-24 It's taken from the other JLayout. Don't know why it doesn't use JEXEC.

To all:
I have applied the toggle button to all views except com_cache and the language manager page Installed - Site and Installed - Administrator because there is no search bar there. Advice if the button should be there at all and if so, where.

IMHO, this should not be applied to any manager which has no sub-menu from top menu, examples templates and languages

I think it needs to be there whenever there is a sidebar, irrespective of the fact if there is a submenu in the top menu or not. Several extensions that have many sidebar items will not add any menus on the top menu.

@roland-d
The chnage in rtl.css has also to be done first in the rtl .less file as otherwise it will be lost when next use of generatecss.

Also, I get
( ! ) Notice: Undefined index: toggleKey in ROOT/layouts/joomla/searchtools/default.php on line 40

when displaying index.php?option=com_users&view=users
I guess line 50 should be

        echo JLayoutHelper::render('joomla.searchtools.default', array('view' => $this, 'toggleKey' => 'com_users'), '', array('toggleSidebar' => true));

I guess that is also missing

<div class="btn-group pull-left hidden-phone">
                <?php echo JLayoutHelper::render('joomla.searchtools.default.togglesidebar'); ?>
            </div>

in a few managers Groups, Access Levels, Notes for example (everywhere where we have only a search field.)

Suggestion: Whatever the icon chosen (these are Ok), it is not obvious for a new user to spot it.
Could we give a color to the icon or to its buttonbackground for it to stand out better?

@infograf768 Thanks for the tests. The user views have been updated and have the icon now. Just missed them, trying to juggle all with 1 hand is a challenge :)

I have also updated the template-rtl.less file. Hope that is OK now.

A color on the button is a nice idea, which color?

Hover

Closed

css:
#j-toggle-sidebar-button {
background-image: linear-gradient(to bottom, #fff, #0088cc);
}

#j-toggle-sidebar-button:hover{
background-color: #0088cc;
color: #fff;
}

Forgot to say:
I used above the default sidebar colour, but that one is defined in the index.php as it is a param
Therefore, I guess these new css should be added there

<!-- Sidebar background color -->
    <?php if ($this->params->get('sidebarColor')) : ?>
        <style type="text/css">
            .nav-list > .active > a, .nav-list > .active > a:hover {
                background: <?php echo $this->params->get('sidebarColor'); ?>;
            }
            #j-toggle-sidebar-button {
                background-image: linear-gradient(to bottom, #fff, <?php echo $this->params->get('sidebarColor'); ?>);
            }

            #j-toggle-sidebar-button:hover{
                background-color: <?php echo $this->params->get('sidebarColor'); ?>;
                color: #fff;
            }
        </style>
    <?php endif; ?>

@test I've tested this on every screen I can find and it ROCKS
Personally I would not change the colour of the button from default grey to blue

Agree with @brianteeman - Please don't add any more color to the screen, it's pretty cluttered already :)

Furthermore we should work a bit with the sidebar. This doesn't really look good:

It does not make it more or less cluttered imho, but it helps finding the feature which is what we need. Otherwise, as I said above, it is lost among all the buttons...

you could apply the same logic to every button

On 1 September 2014 10:06, infograf768 notifications@github.com wrote:

It does not make it more or less cluttered imho, but it helps finding the
feature which is what we need. Otherwise, as I said above, it is lost among
all the buttons...

—
Reply to this email directly or view it on GitHub
#4197 (comment).

Brian Teeman
Co-founder Joomla! and OpenSourceMatters Inc.
http://brian.teeman.net/

you could apply the same logic to every button

Except that this is a new way of displaying something former users got used to see all the time and newbies would find hard to understand as no text...
The only other button with no text is the Search magnifier

The default behaviour is to show the sidebar and the icon used is a common
icon for this behaviour

On 1 September 2014 10:18, infograf768 notifications@github.com wrote:

you could apply the same logic to every button

Except that this is a new way of displaying something former users got
used to see all the time and newbies would find hard to understand as no
text...
The only other button with no text is the Search magnifier

—
Reply to this email directly or view it on GitHub
#4197 (comment).

Brian Teeman
Co-founder Joomla! and OpenSourceMatters Inc.
http://brian.teeman.net/

Seeing the color on the button, I prefer the default grey. The screen stays calmer for me.

Except that this is a new way of displaying something former users got used to see all the time and > newbies would find hard to understand as no text...

The default behavior is to show the sidebar, so newbies won't see anything different unless they click the button. Once this PR goes in, I will write a document page on the wiki as well.

@losedk I agree it can look better but as mentioned before someone with more artistic skill should have a look.

Check how wordpress does it in this screenshot -
http://awesomescreenshot.com/0eb3eo2o07

They explicitly put a last link in the menu to collapse the sidebar. That way there is no confusion or any learning involved for new users. What do you guys think ?

This would also avoid changes to all components. We can simply update the sidebar code to show a collapse sidebar link after the last link from the component.

Not a huge fan of that in our use cases as we rarely have more than 3 or 4
menu items

On 1 September 2014 11:54, Ashwin Date notifications@github.com wrote:

Just check how wordpress does it in this screenshot -
http://awesomescreenshot.com/0eb3eo2o07

They explicitly put a last link in the menu to collapse the sidebar. That
way there is no confusion or any learning involved for new users. What do
you guys think ?

—
Reply to this email directly or view it on GitHub
#4197 (comment).

Brian Teeman
Co-founder Joomla! and OpenSourceMatters Inc.
http://brian.teeman.net/

If you want to “color” the button at least do it the bootstrap way: http://getbootstrap.com/2.3.2/base-css.html#buttons

class="btn btn-primary”

If you want to “color” the button at least do it the bootstrap way: http://getbootstrap.com/2.3.2/base-css.html#buttons
class="btn btn-primary”

I hear all frontenders screaming out loud if you're going to use btn-primary for this button

Using a specific id #j-toggle-sidebar-button for the button and styling in the template CSS is absolutely the correct way to do it. If it needs special styling at all.

I prefer the button in the place it is now since it is fixed and always in the same location. The only other way I would see this work is this way:

It is a clickable icon on the left-hand side.

@zero-24 It's taken from the other JLayout. Don't know why it doesn't use JEXEC.

@phproberto
Is there any reason to not use defined('_JEXEC') or die; in the JLayout file?
See here: https://github.com/joomla/joomla-cms/pull/4197/files#diff-9efc91ff818de42a73b98414984d39faR10

Hmm just experienced some strange behaviour. When typing something in the search tools input field and pressing enter, the sidebar is being collapsed

@losedk Can you test again, I just pushed a fix I believe will solve this behavior.

I love the idea behind this!! I see some issues though:

• We are adding bootstrap dependencies on core javascript
• I still don't like the latest icon and where it's placed
• I don't like either mixing it with the searchtools but I can understand why you added it there.

Some thoughts:

• Couldn't most of this could be done probably adding a class to the sidebar or to the main container?
• If you modify JHtmlSidebar::render() you could probably add there all the logic without needing to edit all the layouts. If the sidebar is displayed the first link is the toggler or the layout is added automatically.
• As it's only going to work on Isis can we reuse something like (fast search) http://plugins.adchsm.me/slidebars/

Sorry if I sent too many ideas together.

How about to use icon-arrow-left and icon-arrow-right class for icon.
Sorry, if someone already suggest it and I missed it in conversations.

On 4 Sep 2014 06:33, "Gunjan Patel" notifications@github.com wrote:

How about to use [image: ]icon-arrow-left and [image:
]icon-arrow-right class for icon.

That wont work on RTL web sites

—
Reply to this email directly or view it on GitHub
#4197 (comment).

Wouldn't it work if the RTL css and the LTR css loads different icons?

I mean LTR loads:

and RTL loads:

?

It'll need additional logic, I'd say the current icons are RTL/LTR agnostic
and we should keep them.

On Thu, Sep 4, 2014 at 4:38 PM, javier gomez notifications@github.com
wrote:

Wouldn't it work if the RTL css and the LTR css loads different icons?

I mean LTR loads:
[image: ]

and RTL loads:
[image: ]

?

Reply to this email directly or view it on GitHub
#4197 (comment).

Thanks!
Ashwin Date
Tekdi Web Solutions - tekdi.net | techjoomla.com
Twitter - @coolbung | @techjoomla | @tekdinet

If it isn't broken, don't fix it!

@phproberto

Thanks for your comments.

We are adding bootstrap dependencies on core javascript

We can replace those with arguments in the call so they are agnostic.

I still don't like the latest icon and where it's placed

There always seems to be someone having a problem with whichever icon is chosen. The agnostic one seems to be favorite.

I don't like either mixing it with the searchtools but I can understand why you added it there.

An alternative position I have proposed in the above VirtueMart screenshots.

Couldn't most of this could be done probably adding a class to the sidebar or to the main container?

Care to share the code?

If you modify JHtmlSidebar::render() you could probably add there all the logic without needing to edit all the layouts. If the sidebar is displayed the first link is the toggler or the layout is added automatically.

As far as I am concerned all the layouts need to be changed for 2 reasons:

• To trigger the loading of the stored state
• We need to set the state for every layout

As it's only going to work on Isis can we reuse something like (fast search)

@dgt41 is/was going to supply CSS code to do this so we don't need more JS

some code from me:
Can we reconsider putting css and js in the layout file?

core.js

Joomla.toggleSidebar = function(context, force)
{
    context = context + '_sidebar_visible';

    var $visible = jQuery('#j-sidebar-container').hasClass('span2');

    if (force)
    {
        // Load the value from localStorage
        if (typeof(Storage) !== "undefined")
        {
            var $visible = localStorage.getItem(context);
        }

        // Need to convert the value to a boolean
        $visible = ($visible == 'true') ? true : false;
    }

    if ($visible)
    {
        jQuery('#j-sidebar-container').toggleClass('span2 span0');
        jQuery('#j-main-container').toggleClass('span10 span12');
        jQuery('#j-toggle-sidebar-icon').removeClass('icon-contract').addClass('icon-expand');
        jQuery('#j-toggle-sidebar-button').attr('data-original-title', Joomla.JText._('JSEARCH_SHOW_SIDEBAR'));

        if (typeof(Storage) !== "undefined")
        {
            // Set the last selection in localStorage
            localStorage.setItem(context, true);
        }
    }
    else
    {
        jQuery('#j-sidebar-container').toggleClass('span0 span2');
        jQuery('#j-main-container').toggleClass('span12 span10');
        jQuery('#j-toggle-sidebar-icon').removeClass('icon-expand').addClass('icon-contract');
        jQuery('#j-toggle-sidebar-button').attr('data-original-title', Joomla.JText._('JSEARCH_HIDE_SIDEBAR'));

        if (typeof(Storage) !== "undefined")
        {
            // Set the last selection in localStorage
            localStorage.setItem(context, false);
        }
    }
}

css on layout/../submenu.php

$doc = JFactory::getDocument();
$doc->addStyleDeclaration('
.span0 {
    width: 0px !important;
    overflow: hidden !important;
    margin-left: 0px !important;
}

.span12, .span10, .span0, .span2{
    -webkit-transition: width 0.3s ease;
    -moz-transition: width 0.3s ease;
    -o-transition: width 0.3s ease;
    transition: width 0.3s ease;
}
.span12, .span10, span2 {
margin-left: 0 !important;
}

');

I hope this won’t have the nasty step

Hi at all: If hiding Sidebar and resize Browserwindow smaller (Mainmenu changes into Button on top-right), Button to show Sidebar isn't shown and also Sidebar isn't shown.

I prefer Virtuemart-Solution roland-d postet because of

• Place (Button is, where it has Effect),
• Looks good and
• is common.
  
  This comment was created with the J!Tracker Application at http://issues.joomla.org/.

@roland-d

We can replace those with arguments in the call so they are agnostic.

I'd rather add specific classes that templates can use to style them. So it's 100% independent

There always seems to be someone having a problem with whichever icon is chosen. The agnostic one seems to be favorite.

is not a big deal. I'm sure someone can change an icon in the future

An alternative position I have proposed in the above VirtueMart screenshots.

I like that more than the button there. Or just chech other available options.

Care to share the code?

sure I'll send a new PR

As far as I am concerned all the layouts need to be changed for 2 reasons:

• To trigger the loading of the stored state
• We need to set the state for every layout

There is no need for that because we have in the url the component & the view. So an automatic system working out of the box for all the extensions using sidebar is possible.

I'll try to send a PR this weekend if that's ok for you.

@dgt41 Thanks so much for your contribution. I did not use your JS changes as it would always hide the sidebar but adjusted mine a little and it works charming now.

I have gone a little further and moved the button into the sidebar file but is far from looking pretty, could you give a hand here too? Not sure if this will interfere with what @phproberto wants to propose. We could wait until he has prepared the code for it.

@phproberto

As far as I am concerned all the layouts need to be changed for 2 reasons:
To trigger the loading of the stored state
We need to set the state for every layout

There is no need for that because we have in the url the component & the view. So an automatic system working out of the box for all the extensions using sidebar is possible.

I have tried that but it didn't work because it is not unique enough. If you look at the categories for example, it has no view but an extension. The language manager has a view but it is the same name but a different client ID. There is currently a fallback there that uses the option name if none is specified. Instead of changing all these files and use a component & view approach, we could hardcode the exceptions. Is that preferred?

I have updated this PR with the button in the sidebar and the messages view to use the generic solution.

@roland-d I was thinking about the way we try to solve this and I think the starting point should be if we are in desktop mode. Then we inject the button so we keep the layout HTML as is. Rough idea but I guess in line with Roberto's proposal.

@dgt41 Since my last commit the button is in the sidebar now, did you see that?. However it doesn't look good yet because the button is too big. I am thinking we may need another button or our own CSS to make it look good. I have implemented it in the com_messages now.

@roland-d I made some comments a week ago about the button (injecting it with js). But as @illovo commented, I also found out that there is no common ground in search tools that this can work reliable and easy. So if we want to put the button there maybe in every search tool layout we put something like <span class=“forslidebarbutton”></span> That’s the best I can think at the moment.
There is some code there to test it if you want but i guess you have to adjust what @illovo states and also remove the styling from the button in addstyledeclaration….

@dgt41 I saw your inject proposal and the searchtool issue, that is why the icon moved to the sidebar itself. That way it is only present if there is a sidebar. Am I missing something?

@roland-d I think if you add a statement like
if (jQuery( “#filter-search” )) { code goes here }
around

jQuery( '<div class="toggle-sidebar btn-group pull-left"><button id="j-toggle-sidebar-button" class="btn hidden-phone hasTooltip" title="some" type="button" onclick="Joomla.toggleSidebar(data, false); return false;" ><span id="j-toggle-sidebar-icon" class="icon-contract"></span></button></div>' ).insertBefore( “#filter-search" );
        });

everything should be ok. Also remove the styling you introduced in the button.

So, I have updated this PR to be a lot more simple than before. Only 7 changed files left and the sidebar is either visible or collapsed across all views. This seems more reasonable than having to set it on every single page where there is a sidebar. We will need to do more on the transition part but not sure how as for now the list drops 1 line when you close the sidebar. Any ideas here?

Let's get this tested and moving forward.

@roland-d, good work!

Cleaned my cache but still seems to be missing margin. Just a little bit, maybe 5px bottom would make the button not stick to other elements.
http://take.ms/fOzLE
http://take.ms/DrnJX

Transition seems fine/not a big deal to me.

This comment was created with the J!Tracker Application at http://issues.joomla.org/.

@roland-d That’s nice. About the step I think you can’t do anything as long as the button remains in the sidebar, if you inject it to the bar.php in a placeholder <div id="#collapse-btn"></div> and with a js similar to JFactory::getDocument()->addScriptDeclaration('
document.getElementById("#collapse-btn").innerHTML += "<button id="j-toggle-sidebar-button" class="btn hidden-phone hasTooltip" title="some" type="button" onclick="toggleSidebar(false); return false;" ><span id="j-toggle-sidebar-icon" class="icon-contract"></span></button>”; ‘);
will work fine. The only problem is that you have to adjust the core.js and the inline script as well. But that will eliminate the funny animation. I am testing some code here, if i come up with something I’ll post it here.

@dgt41 I see what you are saying but as far as I understood we don't want it with the searchtools. Since it isn't really a search option and belongs to the sidebar.

About the step I think you can’t do anything as long as the button remains in the sidebar

I do think we can do something the way it is shown in the VM screenshots I posted before.I just don't have the skills to make it that way.

Thanks to @RemcoJanssen for helping me to do the CSS customizing and create a much fancier looking sidebar. Please everybody, check one more time and see if this is enough to move it to RTC.

A reminder, there needs to be a PR made for the Plugin manager view because it doesn't adhere to the same standard layout as all other views, so the sidebar works a bit funny there. It doesn't enlarge the table. I will do this in a separate PR and any other screens that may come up.

We still have an issue in RTL

Before patch:

after patch
Open

Closed (OK)

Looks like, in RTL, we should have something like

j-sidebar-container {
    margin-right: 0;
}

@test OK in LTR
Note: i've tested it with my own extension, and working like a charm excepted when one page is not a list (same display as in RTL). But not a major issue.
For some strange reason, working nice with my extension, but no icon to hide with other extensions (JCE for example)
Good job Roland!

@infograf768 Looks like you have a caching issue or something, because I don't see that here. We (@RemcoJanssen and I) did test this in RTL. Just checked again and still don't see this happening.

@JoomliC The Plugin manager is a known issue, as I wrote in my previous comment. I am going to take a look at that. It is because the plugin manager uses sidebar-container instead of j-sidebar-container. I will push the fix.

excepted when one page is not a list (same display as in RTL).

I am not quite sure I follow what you mean here. Can you explain it a bit further please?

Cool to hear it also works with your extension.

Not a caching issue.
This is on Firefox Macintosh.
Using Safari, I get an even weirder behaviour: while enlarging or reducing the window size, the sidebar is moving from top to side and back to top (not only when reducing)

In both cases

#j-sidebar-container {
    margin-right: 0;
}

definitely solves the issue....

As for the plugin manager, it looks like changing in the view

<div id="sidebar-container" class="span2">

to

<div id="j-sidebar-container" class="span2">

does the job

@infograf768 Thanks for the suggestion. I was able to reproduce and the RTL on the Mac is fixed :)

Now some more testing and we can go RTC

@test
Now working fine for me.

@test successful with com_patchtester on IE 11 (after clear the browser cache)

@test It also work for a custom component. good one @roland-d

@test works great and now I agree with this approach

I still don't like the icon but I'm sure someone will contribute an improvement in the future.

Great work @roland-d !!

@roland-d : i see after posting about plugin manager, and had removed my post just before you have posted ;-)

About a page with no list type displayed (for example, a info html page in my component, where i keep the sidebar) the problem is solved with @infograf768 suggestion :

#j-sidebar-container {
    margin-right: 0;
}

@JoomliC You mean there is another change needed? The suggestion by @infograf768 has already been applied to this PR.

@roland-d no other change ;-)
It was to confirmed that the not-a-list issue is solved thanks to this css edit!

About icon, maybe i agree with Roberto.
Why not using icon-menu-3 when closed, and icon-remove to close the menu ?
Something like this :

@JoomliC I like it

Maybe we can merge this and then you submit a new PR? So we stop bothering @roland-d

@JoomliC & @phproberto The new icons are in place.

Only thing I did not change was the placement of the X icon.

@phproberto : i prefer to give idea and/or help. It is Roland idea and work (a good one!) ;-)
@roland-d : attached my css edit to give a similar styling with my screen capture (note: all 0px replace by 0, and i've added soft hover styling)

#j-sidebar-container {
    margin-right: 10px;
}
div#j-sidebar-container.j-toggle-hidden {
    width: 0;
    margin-right: 0;
}
div#j-sidebar-container.j-toggle-hidden #j-toggle-sidebar-button {
    position: absolute;
    color: #111;
    padding: 6px 4px 0 6px;
    border-radius: 0 4px 4px 0;
}
div#j-sidebar-container.j-toggle-visible #j-toggle-sidebar-button {
    position: relative;
    color: #999;
    padding: 2px 5px;
    border-radius: 4px 4px 0 0;
    text-align: right;
    border-bottom: 1px solid #d3d3d3;
}
div#j-sidebar-container.j-toggle-hidden #j-toggle-sidebar-button:hover {
    color: #555;
    background: #e6e6e6;
}
div#j-sidebar-container.j-toggle-visible #j-toggle-sidebar-button:hover {
    color: #555;
    background: #e6e6e6;
}
#j-toggle-sidebar-button {
    left: 0;
    border-left: 0;
    background: #e1e1e1;
    margin-top: 0;
    cursor: pointer;
    height: 23px;
}
#sidebar {
    padding: 3px;
    background: #ffffff;
    background: -moz-linear-gradient(top,#ffffff 0%,#ededed 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#ffffff),color-stop(100%,#ededed));
    background: -webkit-linear-gradient(top,#ffffff 0%,#ededed 100%);
    background: -o-linear-gradient(top,#ffffff 0%,#ededed 100%);
    background: -ms-linear-gradient(top,#ffffff 0%,#ededed 100%);
    background: linear-gradient(top,#ffffff 0%,#ededed 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ededed',GradientType=0);
    border-right: 1px solid #e1e1e1;
    border-left: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
    border-radius: 0 0 4px 4px;
}
.j-toggle-visible #j-toggle-sidebar-icon {
    margin-top: 6px;
    margin-left: 4px;
}

@roland-d : i've just updated my previous message by changing sidebar background to a gradient one (the same as subhead class (toolbar)) + a border-bottom for close icon header
;-)

@JoomliC The changes look pretty neat. We need a fix for RTL. Check these images:

The regular button looks good:

With RTL the button needs to be mirrored:

Please have a look at that :)

@roland-d : just needs to change border-radius for RTL
There my RTL version :

#j-sidebar-container {
    margin-left: 10px;
    margin-right: 0;
}
div#j-sidebar-container.j-toggle-hidden {
    width: 0;
    margin-right: 0;
}
div#j-sidebar-container.j-toggle-hidden #j-toggle-sidebar-button {
    position: absolute;
    color: #111;
    padding: 6px 2px 0 4px;
    border-radius: 4px 0 0 4px;
}
div#j-sidebar-container.j-toggle-visible #j-toggle-sidebar-button {
    position: relative;
    color: #999;
    padding: 2px 5px;
    border-radius: 4px 4px 0 0;
    text-align: left;
    border-bottom: 1px solid #d3d3d3;
}
div#j-sidebar-container.j-toggle-hidden #j-toggle-sidebar-button:hover {
    color: #555;
    background: #e6e6e6;
}
div#j-sidebar-container.j-toggle-visible #j-toggle-sidebar-button:hover {
    color: #555;
    background: #e6e6e6;
}
#j-toggle-sidebar-button {
    right: 0;
    left: auto;
    border-right: 0;
    background: #e1e1e1;
    margin-top: 0;
    cursor: pointer;
    height: 23px;
}
#sidebar {
    padding: 3px;
    background: #ffffff;
    background: -moz-linear-gradient(top,#ffffff 0%,#ededed 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#ffffff),color-stop(100%,#ededed));
    background: -webkit-linear-gradient(top,#ffffff 0%,#ededed 100%);
    background: -o-linear-gradient(top,#ffffff 0%,#ededed 100%);
    background: -ms-linear-gradient(top,#ffffff 0%,#ededed 100%);
    background: linear-gradient(top,#ffffff 0%,#ededed 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ededed',GradientType=0);
    border-right: 1px solid #e1e1e1;
    border-left: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
    border-radius: 0 0 4px 4px;
}
.j-toggle-visible #j-toggle-sidebar-icon {
    margin-top: 6px;
    margin-right: 4px;
}
#j-main-container.expanded {
    margin-right: 0;
}

I don't know why css classes are splitted in your template-rtl.css ? Is there a specific reason ?

@JoomliC Thanks that works. Tested it on both Windows and Mac.

I don't know why css classes are splitted in your template-rtl.css ? Is there a specific reason ?

It is because of the CSS generator. It takes the template.less and glues the template-rtl.less after that. This way any specific settings override the default ones.

Nice new icons

There's issues with the sidebar pushing content down on some installs. I got this on my laptop and noticed it on another at the bug squad session at #JD14UK

Can't get it consistently across all components but it's definitely an issue

@wilsonge Are you commenting on this PR or you mean to comment on #4450 where things are changed again?

I mean this one - I was doing an unrelated test on the staging branch and discovered this

@wilsonge
it is pushed down if the class is id="sidebar-container" instead of id="j-sidebar-container"

@test I love it and it works cool as per perception. Nice job and I would definitely merge this into J3.4 (!)

This has already been merged ages ago.
rather look at #5141

Well I have not seen that...... I am sorry but thanks for correcting...
Will test that one rapidly and feed-back
On 11/20/2014 5:34 PM, infograf768 wrote:

This has already been merged ages ago.
rather look at #5141 #5141

—
Reply to this email directly or view it on GitHub
#4197 (comment).

http://gws-deals.today

If we can it would be great to have some kind of panels with the words 'Sidebar menu' or something on it instead of the icon.. Just reviewed this while writing the marketing copy for it.. It will be much more intuitive than just an arrow..

I believe that this is a past station since this was extensively discussed above in October 2014 and we should not reopen that discussion I believe

@gwsdesk Yup sorry i came late to the party.. but should be considered for future releases.

If you want it to be considered then commenting on a CLOSED issue is not the best way for people to see it

Sorry @brianteeman will add it a new issue. Was thinking of keeping things in context which is why i commented here. Did not know that it is bad practice..

It is not about bad practice it is just that unless you are watching all PR via email no one will see this