- {% include components/breadcrumbs.html %}
-
-
- {% if site.mermaid %}
- {% include components/mermaid.html %}
- {% endif %}
-
-
+{{ content }}
diff --git a/_sass/layout.scss b/_sass/layout.scss
index 027b388..43ec5a5 100644
--- a/_sass/layout.scss
+++ b/_sass/layout.scss
@@ -19,23 +19,48 @@
width: calc((100% - #{$nav-width + $content-width}) / 2 + #{$nav-width});
min-width: $nav-width;
}
+
+ & + .main {
+ @include mq(md) {
+ margin-left: $nav-width-md;
+ }
+
+ @include mq(lg) {
+ // stylelint-disable function-name-case
+ // disable for Max(), we want to use the CSS max() function
+ margin-left: Max(
+ #{$nav-width},
+ calc((100% - #{$nav-width + $content-width}) / 2 + #{$nav-width})
+ );
+ // stylelint-enable function-name-case
+ }
+
+ .main-header {
+ display: none;
+ background-color: $sidebar-color;
+
+ @include mq(md) {
+ display: flex;
+ background-color: $body-background-color;
+ }
+
+ &.nav-open {
+ display: block;
+
+ @include mq(md) {
+ display: flex;
+ }
+ }
+ }
+ }
}
.main {
+ margin: auto;
+
@include mq(md) {
position: relative;
max-width: $content-width;
- margin-left: $nav-width-md;
- }
-
- @include mq(lg) {
- // stylelint-disable function-name-case
- // disable for Max(), we want to use the CSS max() function
- margin-left: Max(
- #{$nav-width},
- calc((100% - #{$nav-width + $content-width}) / 2 + #{$nav-width})
- );
- // stylelint-enable function-name-case
}
}
@@ -53,23 +78,12 @@
.main-header {
z-index: 0;
- display: none;
- background-color: $sidebar-color;
+ border-bottom: $border $border-color;
@include mq(md) {
display: flex;
justify-content: space-between;
height: $header-height;
- background-color: $body-background-color;
- border-bottom: $border $border-color;
- }
-
- &.nav-open {
- display: block;
-
- @include mq(md) {
- display: flex;
- }
}
}
diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js
index 74164ef..d249b6d 100644
--- a/assets/js/just-the-docs.js
+++ b/assets/js/just-the-docs.js
@@ -556,12 +556,14 @@ function activateNav() {
// Document ready
jtd.onReady(function(){
- initNav();
+ if (document.getElementById('site-nav')) {
+ initNav();
+ activateNav();
+ scrollNav();
+ }
{%- if site.search_enabled != false %}
initSearch();
{%- endif %}
- activateNav();
- scrollNav();
});
// Copy button on code
diff --git a/docs/configuration.md b/docs/configuration.md
index 12d2fbd..fb352a3 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -101,6 +101,14 @@ aux_links:
aux_links_new_tab: false
```
+## Navigation sidebar
+
+```yaml
+# Enable or disable the side/mobile menu globally
+# Nav menu can also be selectively enabled or disabled using page variables or the minimal layout
+nav_enabled: true
+```
+
## Heading anchor links
```yaml
diff --git a/docs/customization.md b/docs/customization.md
index 7c57b77..4939e18 100644
--- a/docs/customization.md
+++ b/docs/customization.md
@@ -329,43 +329,9 @@ Future versions may subdivide components further; we guarantee that we will only
### Alternative layouts and example (`minimal`)
-Users can develop custom layouts that compose, omit, or add components differently. We provide one first-class example titled `minimal`, inspired by Kevin Lin's work in [just-the-class](https://github.com/kevinlin1/just-the-class). This `minimal` layout does not render the sidebar, header, or search. To see an example, visit the [minimal layout test]({{site.baseurl}}/docs/minimal-test/) page.
+Users can develop custom layouts that compose, omit, or add components differently. We provide one first-class example titled `minimal`, which disables the navigation sidebar. To see an example, visit the [minimal layout test]({{site.baseurl}}/docs/minimal-test/) page.
-Here is a simplified code example of what it looks like:
-
-{% raw %}
-
-```liquid
-
-
-{% include head.html %}
-
- {% include icons/icons.html %}
- {% comment %} Bandaid fix for breadcrumbs here! {% endcomment %}
- {% include components/breadcrumbs.html %}
-
- {% if site.heading_anchors != false %}
- {% include vendor/anchor_headings.html html=content ... %}
- {% else %}
- {{ content }}
- {% endif %}
-
- {% if page.has_children == true and page.has_toc != false %}
- {% include components/children_nav.html %}
- {% endif %}
-
- {% include components/footer.html %}
-
- {% if site.mermaid %}
- {% include components/mermaid.html %}
- {% endif %}
-
-
-```
-
-{% endraw %}
-
-This layout is packaged in Just the Docs. Users can indicate this alternative layout in page front matter:
+Users can indicate this alternative layout in page front matter:
{% raw %}
@@ -384,10 +350,10 @@ Similarly, users and developers can create other alternative layouts using Just
Under the hood,
-- `default` and `minimal` inherit from the `table_wrappers` layout, which wraps all HTML `
- {% if site.heading_anchors != false %}
- {% include vendor/anchor_headings.html html=content beforeHeading="true" anchorBody="" anchorClass="anchor-heading" anchorAttrs="aria-labelledby=\"%html_id%\"" %}
- {% else %}
- {{ content }}
- {% endif %}
-
- {% if page.has_children == true and page.has_toc != false %}
- {% include components/children_nav.html %}
- {% endif %}
-
- {% include components/footer.html %}
-
-
-