Nav

src/mkdocs/mkdocs.py

@@ -99,6 +99,26 @@ def __bool__(self):
         return bool(self._items)
 
 
+class NavItem:
+    def __init__(self, title: str, page: Page):
+        self.title = title
+        self.page = page
+
+
+class Navigation:
+    def __init__(self, nav_items):
+        self._items = nav_items
+
+    def __iter__(self):
+        return iter(self._items)
+
+    @property
+    def html(self):
+        page = get_current_page()
+        t = jinja2.Template("""<ul>{% for item in nav %}<li><a href="{{ item.page.url }}"  {% if item.page == page %}class="active"{% endif %}>{{ item.title }}</a></li>{% endfor %}</ul>""")
+        return t.render({"nav": self, "page": page})
+
+
 class PageContext:
     def __init__(self, page, text, html, toc):
         self.path = page.path
@@ -117,6 +137,7 @@ def title(self):
 class MkDocs:
     def __init__(self, input_dir):
         self.site = self.load_site(input_dir)
+        self.nav = self.load_nav({}, self.site)
         self.env = self.init_env(input_dir)
         self.md = self.init_md()
         self.base = self.env.get_template('base.html')
@@ -146,6 +167,29 @@ def load_site(self, input_dir):
         statics = sorted(statics, key=lambda x: x.url)
         return Site(pages, statics)
 
+    def load_nav(self, config, site):
+        if not config:
+            config = {"nav": [
+                {"title": page.path.stem, "path": str(page.path)}
+                for page in site.pages
+            ]}
+
+        nav_config = config.get('nav', [])
+        nav_config = nav_config if isinstance(nav_config, list) else []
+        nav_items = []
+        for item in nav_config:
+            if not isinstance(item, dict):
+                continue
+            path = item.get('path', '')
+            title = item.get('title', '')
+            if not path:
+                continue
+            if path:
+                page = site.lookup_by_path(path)
+            nav_item = NavItem(title, page)
+            nav_items.append(nav_item)
+        return Navigation(nav_items)
+
     def init_env(self, input_dir) -> jinja2.Environment:
         @jinja2.pass_context
         def url(ctx, url_to):
@@ -191,6 +235,8 @@ def set_context(self, current_page):
             _current_page.reset(token_page)
             _site.reset(token_site)
 
+    # Commands...
+
     def build(self, input, output):
         input_dir = pathlib.Path(input)
         output_dir = pathlib.Path(output)
@@ -206,7 +252,7 @@ def build(self, input, output):
                 html = self.md.reset().convert(text)
                 toc = TableOfContents(self.md)
                 page_ctx = PageContext(page=page, text=text, html=html, toc=toc)
-                output = self.base.render(page=page_ctx)
+                output = self.base.render(page=page_ctx, nav=self.nav)
 
             output_path.parent.mkdir(parents=True, exist_ok=True)
             output_path.write_text(output)
@@ -239,7 +285,7 @@ def app(request):
                     html = self.md.reset().convert(text)
                     toc = TableOfContents(self.md)
                     page_ctx = PageContext(page=resource, text=text, html=html, toc=toc)
-                    output = self.base.render(page=page_ctx)
+                    output = self.base.render(page=page_ctx, nav=self.nav)
                 return httpx.Response(200, content=httpx.HTML(output))
             elif isinstance(resource, Static):
                 input_path = input_dir.joinpath(resource.path)
@@ -250,6 +296,8 @@ def app(request):
         server.serve()
 
 
+# Command line client...
+
 @click.group()
 def cli():
     if pathlib.Path('mkdocs.yml').exists():

src/mkdocs/theme/base.html

@@ -43,19 +43,33 @@
 
 @media (max-width: 1000px) {
     main {
+        margin-left: 20%;
         width: 75%;
     }
 
     nav.toc {
         display: none;
     }
+
+    nav.site {
+        width: 25%;
+    }
 }
 
-@media (max-width: 600px) {
+@media (max-width: 750px) {
     main {
+        margin-left: 0;
         width: 100%;
         padding: 1rem 1.5rem;
     }
+
+    nav.toc {
+        display: none;
+    }
+
+    nav.site {
+        display: none;
+    }
 }
 
 /* Typography & spacing */
@@ -168,6 +182,14 @@
 
 /* Table of contents styling */
 
+nav.site {
+    position: fixed;
+    width : 20%;
+    padding: 2rem;
+    height: 100%;
+    overflow-y: scroll;
+}
+
 nav.toc {
     position: fixed;
     margin-left: 80%;
@@ -179,6 +201,35 @@
 
 /* Navigation styling */
 
+nav.site ul {
+    padding: 0;
+    margin: 0;
+}
+
+nav.site li {
+    padding: 0;
+    margin: 0.5rem 0;
+    display: block;
+}
+
+nav.site li a.active {
+    color: var(--link-color);
+}
+
+nav.site li a:hover {
+    color: var(--link-color);
+    text-decoration: none;
+}
+
+nav.site li a {
+    color: var(--muted-fg-color);
+}
+
+nav.site li a:hover {
+    color: var(--fg-color);
+    text-decoration: none;
+}
+
 nav.toc ul {
     padding: 0;
     margin: 0;
@@ -210,6 +261,11 @@
         </style>
     </head>
     <body>
+        {% if nav %}
+        <nav class="site">
+            {{ nav.html }}
+        </nav>
+        {% endif %}
         {% if page.toc %}
         <nav class="toc">
             {{ page.toc.html }}