Responsive navbar (fixes #3)

Author: Fernando-A-Rocha

web/resources/article.html

@@ -1,6 +1,6 @@
 {{ article.html_content }}
 
-<div style="text-align: left; font-size: 0.8em; color: #b5b5b5; position: absolute; bottom: 0; padding-bottom: 20px; width: 100%;">
+<div style="text-align: left; font-size: 0.8em; color: #b5b5b5; position: absolute; bottom: 0; padding-bottom: 20px; max-width: 100%;">
     <div>Article: <strong>{{ article.title }}</strong></div>
     <div style="margin-top: 0.5em;">Written by <i class="fab fa-github"></i> <a href="https://github.com/{{ article.author }}" rel="noopener" target="_blank">{{ article.author }}</a> on {{ article.date }}</div>
 </div>

web/resources/assets/style.css

@@ -110,13 +110,37 @@ hr {
   width: 6px;
 }
 
+
+.function-type-title {
+  float: right;
+  font-size: 1.8em;
+  padding-left: 1em;
+  padding-top: 11px;
+  position: relative;
+  z-index: 1;
+}
+
+
+footer {
+  border-top: 1px solid #394a60;
+  color: #9F9FA2;
+  padding: 1em 0;
+  text-align: center;
+}
+footer p {
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+
+
+
 header {
   background: #151b23 url(/assets/color-strip.png) no-repeat left bottom / 100% 3px;
   overflow: hidden;
 }
 
 #logo {
-  max-width: 100%;
+  max-width: 80vw;
   max-height: 100%;
 }
 #logo:hover {
@@ -140,28 +164,6 @@ header {
     border-radius: 0.25em;
 }
 
-.function-type-title {
-  float: right;
-  font-size: 1.8em;
-  padding-left: 1em;
-  padding-top: 11px;
-  position: relative;
-  z-index: 1;
-}
-
-
-footer {
-  border-top: 1px solid #394a60;
-  color: #9F9FA2;
-  padding: 1em 0;
-  text-align: center;
-}
-footer p {
-  margin-top: 1em;
-  margin-bottom: 1em;
-}
-
-
 
 /* Grid container */
 .grid-container {
@@ -170,7 +172,53 @@ footer p {
   grid-template-rows: auto;
 }
 
+
+
 /* Sidebar styles */
+
+
+/* Ensure #menu-toggle is hidden on larger screens */
+#menu-toggle {
+  display: none;
+}
+
+/* Hide sidebar on smaller screens */
+@media (max-width: 768px) {
+  .grid-container {
+      grid-template-columns: 1fr;
+  }
+
+  .sidebar-left {
+      display: none;
+      position: fixed;
+      top: 40px;
+      left: 0;
+      height: 100%;
+      width: 250px;
+      background: #151b23;
+      box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
+      overflow-y: auto;
+      z-index: 1000;
+  }
+
+  .sidebar-left.open {
+      display: block;
+  }
+
+  #menu-toggle {
+      display: inline-block;
+      background: none;
+      border: none;
+      font-size: 1.5rem;
+      color: white;
+      cursor: pointer;
+      margin-left: auto;
+      position: absolute;
+      bottom: 20px;
+      right: 20px;
+  }
+}
+
 .sidebar-left {
   padding: 20px;
   border-right: 1px solid #394a60;

web/resources/layout.html

@@ -68,12 +68,15 @@
             {% if preview_mode %}
             <div class="preview-badge">Preview</div>
             {% endif %}
-            
+            <!-- Add a menu button for mobile -->
+            <button id="menu-toggle" aria-label="Toggle navigation">
+                <i class="fa-solid fa-bars"></i>
+            </button>
         </div>
     </header>
 
     <div class="grid-container">
-        <nav class="sidebar-left">
+        <nav class="sidebar-left" id="sidebar">
           <ul>
             {% for item in navigation %}
                 {% if item.path_html %}
@@ -101,5 +104,16 @@
             <p><a href="/privacy">Privacy policy</a></p>
         </div>
     </footer>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const menuToggle = document.getElementById('menu-toggle');
+            const sidebar = document.getElementById('sidebar');
+
+            menuToggle.addEventListener('click', () => {
+                sidebar.classList.toggle('open');
+            });
+        });
+    </script>
 </body>
 </html>

web/scripts/builder.py

@@ -216,7 +216,7 @@ def create_function(self, function_name):
 
         return function
 
-    def create_article(self, article_name, article_parent_path='', custom_web_path=False, custom_web_title=False):
+    def create_article(self, article_name, article_parent_path='', custom_web_path=False):
         article_real_path = os.path.join(DOCS_REPO_PATH, 'articles', article_parent_path, article_name, f"article.yaml")
         article = utils.load_and_validate_yaml(article_real_path, self.schema_article)
 
@@ -228,7 +228,7 @@ def create_article(self, article_name, article_parent_path='', custom_web_path=F
         article_template = self.input_env.get_template('article.html')
         article["html_content"] = markdown.markdown(article['content'])
         html_content = self.render_page(
-            custom_web_title or article['title'],
+            article['title'],
             article_template.render(article=article)
         )
         if custom_web_path:
@@ -346,25 +346,13 @@ def create_misc_pages(self):
     def create_pages(self):
         self.navigation = [
             {
-                'name': 'Home',
+                'name': 'Introduction',
                 'path_html': '/',
                 'article': {
                     'name': 'introduction',
                     'folder': '',
                 },
             },
-            {
-                'name': 'How you can help',
-                'path_html': '/How_you_can_help',
-            },
-            {
-                'name': 'Recent changes',
-                'path_html': '/Recent_changes',
-            },
-            {
-                'name': 'Random page',
-                'path_html': '/Random_page',
-            },
             {
                 'name': 'Guides',
                 'subitems': [
@@ -438,7 +426,7 @@ def create_pages(self):
 
         def create_item(item):
             if 'article' in item:
-                self.create_article(item['article']['name'], item['article']['folder'], item['path_html'], item["name"])
+                self.create_article(item['article']['name'], item['article']['folder'], item['path_html'])
             elif 'category' in item:
                 self.create_category(item['path_html'], item['category'])