Fix sidebar width issues and make it customizable

examples/reference/templates/Bootstrap.ipynb

@@ -40,6 +40,7 @@
  "* **`site_url`** (str): Url of the site and logo. Default is \"/\".\n",
  "* **`title`** (str): A title to show in the header.\n",
  "* **`theme`** (Theme): A Theme class (available in `panel.template.theme`)\n",
+ "* **`sidebar_width`** (int): The width of the sidebar in pixels. Default is 330.\n",
  "\n",
  "________"
  ]
@@ -124,7 +125,7 @@
  "name": "python",
  "nbconvert_exporter": "python",
  "pygments_lexer": "ipython3",
- "version": "3.7.10"
+ "version": "3.8.4"
  }
  },
  "nbformat": 4,

examples/reference/templates/FastGridTemplate.ipynb

@@ -47,6 +47,8 @@
  "* **`sidebar_footer`** (str): Can be used to insert additional HTML. For example a menu, some additional info, links etc.\n",
  "* **`enable_theme_toggle`** (boolean): If `True` a switch to toggle the Theme is shown. Default is `True`.\n",
  "* **`config`** (TemplateConfig): Contains configuration options similar to `pn.config` but applied to the current Template only. (Currently only `css_files` is supported)\n",
+ "* **`sidebar_width`** (int): The width of the sidebar in pixels. Default is 330.\n",
+ "\n",
  "________"
  ]
  },
@@ -127,7 +129,7 @@
  "name": "python",
  "nbconvert_exporter": "python",
  "pygments_lexer": "ipython3",
- "version": "3.7.10"
+ "version": "3.8.4"
  }
  },
  "nbformat": 4,

examples/reference/templates/FastListTemplate.ipynb

@@ -47,6 +47,7 @@
  "* **`sidebar_footer`** (str): Can be used to insert additional HTML. For example a menu, some additional info, links etc.\n",
  "* **`enable_theme_toggle`** (boolean): If `True` a switch to toggle the Theme is shown. Default is `True`.\n",
  "* **`config`** (TemplateConfig): Contains configuration options similar to `pn.config` but applied to the current Template only. (Currently only `css_files` is supported)\n",
+ "* **`sidebar_width`** (int): The width of the sidebar in pixels. Default is 330.\n",
  "________"
  ]
  },
@@ -127,7 +128,7 @@
  "name": "python",
  "nbconvert_exporter": "python",
  "pygments_lexer": "ipython3",
- "version": "3.7.10"
+ "version": "3.8.4"
  }
  },
  "nbformat": 4,

examples/reference/templates/GoldenLayout.ipynb

@@ -40,6 +40,7 @@
  "* **`site_url`** (str): Url of the site and logo. Default is \"/\".\n",
  "* **`title`** (str): A title to show in the header.\n",
  "* **`theme`** (Theme): A Theme class (available in `panel.template.theme`)\n",
+ "* **`sidebar_width`** (int): The width of the sidebar in percent. Default is 20.\n",
  "\n",
  "________"
  ]
@@ -131,7 +132,7 @@
  "name": "python",
  "nbconvert_exporter": "python",
  "pygments_lexer": "ipython3",
- "version": "3.7.10"
+ "version": "3.8.4"
  }
  },
  "nbformat": 4,

examples/reference/templates/Material.ipynb

@@ -40,6 +40,7 @@
  "* **`site_url`** (str): Url of the site and logo. Default is \"/\".\n",
  "* **`title`** (str): A title to show in the header.\n",
  "* **`theme`** (Theme): A Theme class (available in `panel.template.theme`)\n",
+ "* **`sidebar_width`** (int): The width of the sidebar in pixels. Default is 370.\n",
  "\n",
  "________"
  ]
@@ -124,7 +125,7 @@
  "name": "python",
  "nbconvert_exporter": "python",
  "pygments_lexer": "ipython3",
- "version": "3.7.10"
+ "version": "3.8.4"
  }
  },
  "nbformat": 4,

examples/reference/templates/React.ipynb

@@ -48,6 +48,7 @@
  "* **`site_url`** (str): Url of the site and logo. Default is \"/\".\n",
  "* **`title`** (str): A title to show in the header.\n",
  "* **`theme`** (Theme): A Theme class (available in `panel.template.theme`)\n",
+ "* **`sidebar_width`** (int): The width of the sidebar in pixels. Default is 350.\n",
  "\n",
  "________"
  ]
@@ -137,7 +138,7 @@
  "name": "python",
  "nbconvert_exporter": "python",
  "pygments_lexer": "ipython3",
- "version": "3.7.7"
+ "version": "3.8.4"
  }
  },
  "nbformat": 4,

examples/reference/templates/Vanilla.ipynb

@@ -40,6 +40,7 @@
  "* **`site_url`** (str): Url of the site and logo. Default is \"/\".\n",
  "* **`title`** (str): A title to show in the header.\n",
  "* **`theme`** (Theme): A Theme class (available in `panel.template.theme`)\n",
+ "* **`sidebar_width`** (int): The width of the sidebar in pixels. Default is 330.\n",
  "\n",
  "________"
  ]
@@ -124,7 +125,7 @@
  "name": "python",
  "nbconvert_exporter": "python",
  "pygments_lexer": "ipython3",
- "version": "3.7.10"
+ "version": "3.8.4"
  }
  },
  "nbformat": 4,

panel/template/base.py

@@ -362,6 +362,9 @@ class BasicTemplate(BaseTemplate):
  sidebar = param.ClassSelector(class_=ListLike, constant=True, doc="""
  A list-like container which populates the sidebar.""")
 
+ sidebar_width = param.Integer(330, doc="""
+ The width of the sidebar in pixels. Default is 330.""")
+
  modal = param.ClassSelector(class_=ListLike, constant=True, doc="""
  A list-like container which populates the modal""")
 
@@ -644,6 +647,7 @@ def _update_vars(self, *args):
  self._render_variables['header_background'] = self.header_background
  self._render_variables['header_color'] = self.header_color
  self._render_variables['main_max_width'] = self.main_max_width
+ self._render_variables['sidebar_width'] = self.sidebar_width
 
  def _update_busy(self):
  if self.busy_indicator:

panel/template/bootstrap/__init__.py

@@ -14,6 +14,8 @@ class BootstrapTemplate(BasicTemplate):
  """
  BootstrapTemplate
  """
+ sidebar_width = param.Integer(350, doc="""
+ The width of the sidebar in pixels. Default is 350.""")
 
  _css = pathlib.Path(__file__).parent / 'bootstrap.css'
 

panel/template/bootstrap/bootstrap.css

@@ -12,20 +12,25 @@ body {
 }
 
 #sidebar {
- padding: 15px;
+ padding-top: 15px;
+ padding-bottom: 15px;
+ padding-left: 5px;
+ padding-right: 10px;
  transition: all 0.2s cubic-bezier(0.945, 0.020, 0.270, 0.665);
  transform-origin: center left; /* Set the transformed position of sidebar to center left side. */
  overflow-y: scroll;
 }
-
 #sidebar.active {
- margin-left: -16.7%;
+ width: 0px;
+ overflow-y: hidden;
 }
 
 #main {
  overflow-y: scroll;
+ padding-right: 20px;
  padding-bottom: 20px;
- padding-right: 30px;
+ padding-top: 10px;
+ padding-left: 10px;
 }
 
 #sidebarCollapse {
@@ -66,6 +71,11 @@ a.navbar-brand {
  padding-left: 10px;
 }
 
+.app-header a.title:hover {
+ text-decoration: none;
+ color: white;
+}
+
 img.app-logo {
  padding-right: 10px;
  font-size: 28px;

panel/template/bootstrap/bootstrap.html

@@ -26,6 +26,12 @@
 </style>
 {% endfor %}
 
+<style>
+ #sidebar {
+ width: {{ sidebar_width }}px;
+ }
+</style>
+
 <!-- Template JS -->
 {% for src in template_resources['js'].values() %}
 <script src="{{ src }}"></script>
@@ -68,9 +74,9 @@
 
  <div class="row overflow-hidden" id="content">
  {% if nav %}
- <div class="col-2 mh-100 border-right py-2" id="sidebar">
+ <div class="sidenav" id="sidebar">
  <ul class="nav flex-column">
-  {% for doc in docs %}
+ {% for doc in docs %}
  {% for root in doc.roots %}
  {% if "nav" in root.tags %}
  {{ embed(root) | indent(8) }}

panel/template/fast/grid/fast_grid_template.css

@@ -88,17 +88,12 @@ img.app-logo {
 #sidebar {
  transition: all 0.2s cubic-bezier(0.945, 0.020, 0.270, 0.665);
  transform-origin: center left; /* Set the transformed position of sidebar to center left side. */
- width: 278px;
  height: 100vh;
  overflow-y: scroll;
  padding: 10px;
  margin-right: 12px;
 }
 
-#sidebar.active {
- margin-left: -300px;
-}
-
 #main {
  transition: all 0.2s cubic-bezier(0.945, 0.020, 0.270, 0.665);
  width: 100%;

panel/template/fast/grid/fast_grid_template.html

@@ -43,6 +43,9 @@
  :not(:defined) {
  visibility: hidden;
  }
+ #sidebar {
+ width: {{ sidebar_width }}px;
+ }
 </style>
 
 <!-- Template JS -->
@@ -158,7 +161,7 @@
 
  <div class="main" id="main"
  {% if nav or sidebar_footer %}
- style="margin-left: 300px;"
+ style="margin-left: {{ sidebar_width + 30 }}px;"
  {% else %}
  style="margin-left: 0px;"
  {% endif %}
@@ -195,14 +198,14 @@
 <script>
  function openNav() {
  document.getElementById("sidebar").style.left = 0;
- document.getElementById("main").style.marginLeft = "300px";
+ document.getElementById("main").style.marginLeft = "{{ sidebar_width + 30 }}px";
  document.getElementById("sidebar-button").onclick = closeNav;
  var interval = setInterval(function () { window.dispatchEvent(new Event('resize')); }, 10);
  setTimeout(function () { clearInterval(interval) }, 210)
  }
 
  function closeNav() {
- document.getElementById("sidebar").style.left = "-300px";
+ document.getElementById("sidebar").style.left = "-{{ sidebar_width + 30 }}px";
  document.getElementById("main").style.marginLeft = 0;
  document.getElementById("sidebar-button").onclick = openNav;
  var interval = setInterval(function () { window.dispatchEvent(new Event('resize')); }, 10);

panel/template/fast/list/fast_list_template.css

@@ -93,17 +93,13 @@ img.app-logo {
 #sidebar {
  transition: all 0.2s cubic-bezier(0.945, 0.020, 0.270, 0.665);
  transform-origin: center left; /* Set the transformed position of sidebar to center left side. */
- width: 278px;
  height: calc(100vh - 76px);
  overflow-y: scroll;
- padding: 10px;
+ padding-left: 5px;
+ padding-right: 10px;
  margin-right: 12px;
 }
 
-#sidebar.active {
- margin-left: -300px;
-}
-
 #main {
  transition: all 0.2s cubic-bezier(0.945, 0.020, 0.270, 0.665);
  width: 100%;

panel/template/fast/list/fast_list_template.html

@@ -43,6 +43,9 @@
  :not(:defined) {
  visibility: hidden;
  }
+ #sidebar {
+ width: {{ sidebar_width }}px;
+ }
 </style>
 
 <!-- Template JS -->
@@ -158,7 +161,7 @@
 
  <div class="main" id="main"
  {% if nav or sidebar_footer %}
- style="margin-left: 300px;"
+ style="margin-left: {{ sidebar_width + 30 }}px;"
  {% else %}
  style="margin-left: 0px;"
  {% endif %}
@@ -206,14 +209,14 @@
 <script>
  function openNav() {
  document.getElementById("sidebar").style.left = 0;
- document.getElementById("main").style.marginLeft = "300px";
+ document.getElementById("main").style.marginLeft = "{{ sidebar_width + 30 }}px";
  document.getElementById("sidebar-button").onclick = closeNav;
  var interval = setInterval(function () { window.dispatchEvent(new Event('resize')); }, 10);
  setTimeout(function () { clearInterval(interval) }, 210)
  }
 
  function closeNav() {
- document.getElementById("sidebar").style.left = "-300px";
+ document.getElementById("sidebar").style.left = "-{{ sidebar_width + 30 }}px";
  document.getElementById("main").style.marginLeft = 0;
  document.getElementById("sidebar-button").onclick = openNav;
  var interval = setInterval(function () { window.dispatchEvent(new Event('resize')); }, 10);

panel/template/golden/__init__.py

@@ -14,6 +14,9 @@ class GoldenTemplate(BasicTemplate):
  """
  GoldenTemplate is built on top of golden-layout library.
  """
+ sidebar_width = param.Integer(20, doc="""
+ The width of the sidebar in percent. Default is 20.""")
+
  _css = pathlib.Path(__file__).parent / 'golden.css'
 
  _template = pathlib.Path(__file__).parent / 'golden.html'

panel/template/golden/golden.html

@@ -92,13 +92,13 @@
  title: "Sidebar",
  model: '<div class="sidebar-contents">{% for doc in docs %}{% for root in doc.roots %}{% if "nav" in root.tags %} {{ embed(root) }} {% endif %}{% endfor %}{% endfor %}</div>'
  },
- width: 20,
+ width: {{ sidebar_width }},
  isClosable: false
  },
  {% endif %}
  {
  type: 'stack',
- width: {% if nav %}80{% else %}100{% endif %},
+ width: {% if nav %}100-{{ sidebar_width }}{% else %}100{% endif %},
  content: [
  {% for doc in docs %}
  {% for root in doc.roots %}

panel/template/material/__init__.py

@@ -29,6 +29,8 @@ class MaterialTemplate(BasicTemplate):
  """
  MaterialTemplate is built on top of Material web components.
  """
+ sidebar_width = param.Integer(370, doc="""
+ The width of the sidebar in pixels. Default is 370.""")
 
  _actions = param.ClassSelector(default=MaterialTemplateActions(), class_=TemplateActions)
 
@@ -170,7 +172,7 @@ class MaterialDarkTheme(DarkTheme):
  """
 
  css = param.Filename(default=pathlib.Path(__file__).parent / 'dark.css')
- 
+
  bokeh_theme = param.ClassSelector(class_=(_BkTheme, str),
  default=_BkTheme(json=MATERIAL_DARK_THEME))
 

panel/template/material/material.css

@@ -34,17 +34,12 @@ img {
 
 .mdc-drawer {
  background: #FAFAFA; /* GRAY 50 */
- width: 300px !important;
 }
 
 .mdc-drawer-app-content {
  margin-left: 0 !important;
 }
 
-.mdc-drawer.mdc-drawer--open:not(.mdc-drawer--closing)+.mdc-drawer-app-content {
- margin-left: 300px !important;
-}
-
 .title-bar {
  display: contents;
  justify-content: center;