8

There's an answer here showing how to minimize the navigation pane to make it show the icons only. Basically, you just need to click the first folder icon on the left.

enter image description here

How can I hide the vertical navigation pane on the left completely?

multigoodverse
  • 7,638
  • 19
  • 64
  • 106

1 Answers1

8

There's an open issue for this feature which is not implemented yet.

So, there's no current way of setting a custom rule in the Settings > Advanced Settings Editor > Sidebar menu.

While this feature is not added, what you can do is to write a small browser extension to execute this code on every notebook server (in the onDOMContentLoaded event):

const leftSidebar = document.querySelector('.jp-SideBar')
document.querySelector('#jp-main-content-panel').removeChild(leftSidebar)

You can try this code in the inspector console and then open/create a new notebook.

enter image description here

You can check other workarounds here and here.

herodrigues
  • 948
  • 1
  • 7
  • 11
  • Thanks a lot! That works. I tried to remove the toolbar as well: `const topToolbar = document.querySelector('.jp-Toolbar') document.querySelector('#jp-main-content-panel').removeChild(topToolbar)` But that says `NotFoundError: Node was not found`. Do you know how to remove the toolbar? – multigoodverse Feb 15 '19 at 17:41
  • `document.getElementById('main').removeChild(document.getElementById('jp-top-panel'))` should do the trick. Click on any notebook tab and the windows will be resized. This is a temporary solution and the bars get back to normal when you reload the page. That's why I suggested you to write an extension to keep the changes. If you need more space, I'd recommend you to activate the full screen mode or try the other workarounds in my answer. – herodrigues Feb 15 '19 at 18:21
  • I looked at the links you suggested. The fullscreen + browser in app mode removes the browser address bar and menu bar, but not the Jupyter menu bar and toolbar. The code in your last comment removes the menu bar, but the toolbar is still there :) – multigoodverse Feb 15 '19 at 18:48
  • 1
    You have to combine both commands. The one in my answer and the other in my previous comment. One line: `document.querySelector('#jp-main-content-panel').removeChild(document.querySelector('.jp-SideBar')); document.getElementById('main').removeChild(document.getElementById('jp-top-panel'))` – herodrigues Feb 15 '19 at 18:57
  • Yes, I did that. It removes the side bar and the **menu** bar, not the tool bar. In your code you are removing jp-top-panel. That's the menu bar. – multigoodverse Feb 15 '19 at 20:00
  • The closest I got was `document.querySelector('#6e1b9e05-a3f3-43b8-b95c-27c445e5a421').removeChild(document.querySelector('.jp-NotebookPanel-toolbar')); ` but that says that teh querySelector is not a valid selector. It seems I cannot query the id of the toolbar parent. – multigoodverse Feb 15 '19 at 20:17
  • Ah, sorry! What you want is `const panel = document.querySelector('#jp-main-dock-panel > div.jp-NotebookPanel'); panel.removeChild(panel.querySelector('div.jp-Toolbar'))`, but it will remove the toolbar only in the active notebook – herodrigues Feb 15 '19 at 20:19
  • How do I write such a browser extension? I'm guessing I need to write in the User Preferences pane (since the System Defaults pane is, well, defaults, and uneditable), but what language do I even use? – HelloGoodbye Dec 02 '20 at 13:57