add navigation

dzonidoo · Feb 26, 2024 · 0a5eb35 · 0a5eb35
1 parent cbb6504
commit 0a5eb35
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 4 deletions.
diff --git a/assets/styles/sidenav.scss b/assets/styles/sidenav.scss
@@ -117,6 +117,7 @@
     min-width: var(--sidenav-size);
     transition: all var(--sidenav-transition);
     overflow-y: auto;
+    overflow-x: hidden;
 
     .sidenav__item-icon {
         --icon-block-radius: var(--sidenav-item-radius);
@@ -352,4 +353,4 @@
         }
 
     }
-}
+}
diff --git a/newsroom/templates/base_layout.html b/newsroom/templates/base_layout.html
@@ -68,10 +68,16 @@ <h3 class="a11y-only">{{ gettext('Main Navigation Bar') }}</h3>
 
     <div class="contentWrap {% block custom_content_style %}{% endblock %}">
         {% if session.get('name') %}
-        <nav class="{`nav-block ${isNavExpanded ? 'nav-block--pinned' : ''}`}">
+        <nav id="nav" class="nav-block">
             <h3 class="a11y-only">{{ gettext('Side Navigation') }}</h3>
             <ul class="sidenav">
 
+                <li className='d-phone-none'>
+                    <button id="pin-btn" class='nav-block__pin-button' title="Expand" onClick={handleNavExpanded()}>
+                        <i class="icon--arrow-end" role='presentation'></i>
+                    </button>
+                </li>
+
                 {% block default_navs %}
                     {% for group in range(0, 10) %}
                         {% for nav in sidenavs(request.blueprint)|selectattr("group", "equalto", group) %}
@@ -172,4 +178,18 @@ <h3 class="a11y-only">{{ gettext('Side Navigation') }}</h3>
 {% endblock %}
 
 </body>
+<script>
+    let element = document.getElementById('nav');
+    let pinButton = document.getElementById('pin-btn');
+
+    function handleNavExpanded() {
+        if (element.classList.contains("nav-block--pinned")) {
+            element.classList.remove("nav-block--pinned");
+            pinButton.setAttribute('title', 'Expand')
+        } else {
+            element.classList.add("nav-block--pinned");
+            pinButton.setAttribute('title', 'Collapse')
+        }
+    };
+</script>
 </html>
diff --git a/newsroom/templates/sidenav_icon.html b/newsroom/templates/sidenav_icon.html
@@ -5,7 +5,7 @@
         {% if nav.url %}target="_blank"{% endif %}
     >
         {% if nav.badge %}
-        <span id="{{ nav.badge }}" class="sidenav-icons__badge"></span>
+        <span id="{{ nav.badge }}" class="sidenav__badge"></span>
         {% endif %}
 
         <span class="sidenav__item-icon">
@@ -20,4 +20,4 @@
         </span>
         <span class="sidenav__item-title">{{  gettext(nav.name) }}</span>
     </a>
-</li>
+</li>