Would it be possible to hide the left sidebar permanently? It is always visible after log in.
In Nextcloud, you can open/close the left sidebar using the button next to the search at the top. In screenshot below it’s the button with the horizontal bars and < left arrow on it.
You wouldn’t want to close it permanently because it has alot of important contextual options on it. When you are looking at files, for instance, you can choose which files you want to look at. At the bottom there’s also settings which is important.
Is it possible to have it close after login? Default it is always open
That’sa good question. I don’t know but somebody else might!
Why do you want it to be closed by default?
Because it takes 30% of the screen. I want to focus looking at the files not side bar.
The design is really bad imo. The side bar position hide/show should be save between sessions.
1 Like
I can see how you might feel that way. This is one of those design decisions that can be open to different interpretations. In my opinion the current behavior makes sense, because there is so much important functionality in that menu and it would be a problem if users didn’t know how to find it. Also, Nextcloud is a feature rich app so it makes sense to always show all the options available by default. It’s good that it’s possible to hide it though, for example when you are on a small screen and want to browse through your pictures.
To take another example, in Discourse (this forum) we made the decision to have the menu button in the header hide/show the sidebar navigation, and to have that decision persist as you click around on the site. It’s nice to be able to focus on the discussion and most features are available through other design elements.
Just let the user choose whether he wants to see or not the sidebar after login.
The easiest way is to save sidebar visibility to local storage to persist its state between sessions.
Hi @Sponge_bob,
it reaches a maximum of almost 30% but not quite.
The breakpoint is at exactly 1024 pixels window width (browser window width). and the app navigation bar is exactly 300 pixels wide. So to be precise, the bar can take up a maximum of 29.27% of the width.
But enough of being a smartass. 
Your question motivated me to find out exactly what is possible to manipulate it.
I tried to increase the breakpoint from 1024 to 1240 pixels.
First I thought of CSS, there is the CSS constant:
--breakpoint-mobile: 1024px;
so I tried this custom CSS rule:
:root {
--breakpoint-mobile: 1240px !important;
}
which, according to the browser console, was also adopted by the browser, i.e. overwrites the standard value, but this did not result in the bar disappearing at 1240 pixels wide.
I couldn’t see any influence of this rule on the behavior in the browser. So you can safely leave it alone, this rule is not necessary at all.
I then looked at the code again very carefully and tried various things and - to make a long story short - I can offer you the following hack:
The width is hard-coded and compiled into this file:
-
dist/core-common.js(There are more/other compiled Javascript files containing code for swinging the bar out, but patching them didn’t lead to success, so I won’t go into it any further here.)
The easiest is to patch that file if you don’t want to build Nextcloud from scratch every time.
I have written the code for you so that patching and finding out which value you have patched it to is not a hassle.
These are the steps:
- Open a root terminal window and cd into the Nextcloud directory
or if you are using Nextcloud All-In-One, enter into the Nextcloud container:cd /var/www/nextcloud
… then you already are in the right directory (docker exec -it nextcloud-aio-nextcloud /bin/bash/var/www/html)
- Now you can find out the current state with this
query command:
The output should look like this for an unpatched file:grep -Eo '([e)][=(]r\([0-9]{4,5}\)[,)]|width < [0-9]{4,5}px|m[ai][xn]-width: [0-9]{4,5}px)' dist/core-common.js
It’s not difficult to see that this is about “width < 1024px width < 1024px width < 1024px width < 1024px max-width: 1024px max-width: 1024px min-width: 1024px min-width: 1024px )(r(1024)) e=r(1024),1024”
The characters that are output in the context are for security reasons, as there are many more occurrences of the number 1024 in the same JavaScript compilation, for example for converting bytes to kilobytes and megabytes etc.
- So if you know the current state (1024), then set the values for “old” and “new”. To do this, enter in the terminal:
old=1024 new=1240
- You can then run this
patch command:
sed -i "s/r($old)/r($new)/g; s/-width: ${old}px/-width: ${new}px/g; s/width < ${old}px/< ${new}px/g" dist/core-common.js
After you have patched, you can check with the above query command, it now outputs this:
width < 1240px
width < 1240px
width < 1240px
width < 1240px
max-width: 1240px
max-width: 1240px
min-width: 1240px
min-width: 1240px
)(r(1240))
e=r(1240),
- Next you have to delete the browser cache of your nextcloud window/tab and reload it. After that the bar should disappear at a width of less than 1240 pixels, so the bar can take up a maximum of 24.19% of the width, which is 5% less than before, but of course, you can try with any width you want…
It only works on the File View, not on other tabs such as Calendar or so…
Please let me know, if you would like to change more or if you need a complete script that can do everything for you interactively.
These changes are of course not persistent and you have to make them again after every update and they affect all browser connections, so they are not tied to a specific user.
This is really the maximum I can offer you at the moment.
h.t.h.
EDIT:
Please be prepared that these changes can lead to error messages regarding file integrity. If it only shows this one file, then that’s not a problem.
Of course, if such messages bother you, you can undo the change, rescan so that the error message disappears and then patch again. With normal use, i.e. without you explicitly scanning for it or performing an update, it will not be bothered by it and will not display an error message.
Much and good luck,
ernolf
1 Like
Thanks ernolf, great tutorial but too complicated so I just use custom css to hide sidebar.
Maybe someday Nextcloud will implement to store hide/show state for the sidebar in the localstorage to make it persistent between sessions. It is half sprint work, trust me I am frontend developer 
1 Like
This is already to complicated? Are u serious?
Do you want to share with us which CSS you used to achieve this?
Doesn’t that hide the sidebar completely, so that it can’t be brought back?
It wouldn’t even occur to me not to trust you!
Well that makes the “too complicated” even harder to believe!
But why don’t you develop that feature and make a pull request so that everyone can benefit from it?
But let’s approach the problem the other way round:
You obviously use a small screen or with a fairly low resolution.
Perhaps you want to make the display of the files ultra small.
There is already a thread in which this has been developed in detail:
→ custom-css-to-enable-ultra-compact-list-view-in-files ←
This will allow you to display the files much more compactly.
I know that the intention is to deliver such a compact file view as option in the future. Rather than hiding the sidebar, which can already be hidden with a single click anyway.
h.t.h.
ernolf
2 Likes
Maybe you should try this app:
| App-Id | hidesidebars |
| App-Name | Hide sidebars |
| Summary | Hide left sidebar and top header bar for use in iframe or some other scenarios. |
| Categories | customization |
| App-Version | 2.2.5 |
| Repository | https://github.com/pointcz/hidesidebars |
| Issue-Tracker | Issues · pointcz/hidesidebars · GitHub |
| PHP min-intsize | 32 |
| NC min/max | 21 / 29 |
| Not-shipped (not included) App available in appstore | |
| Appstore | Hide sidebars - Apps - App Store - Nextcloud |
| Created | 2020-05-31T11:16:44.140661Z |
| Last modified | 2024-08-29T11:14:35.685236Z |
I tried the app and it works great. From what I understand, it’s very close to what you were looking for. And if not, it shouldn’t be difficult to modify the app so that it meets your exact requirements.
As the app is controlled via the URL, you can easily create favorites with &hide-sidebars at the end of the URL.
Although officially only up to Nextcloud version 29, it also works for Nextcloud 30 without any restrictions.
h.t.h.
Much and good luck,
ernolf
1 Like