Implement the new navigation concept for Newshub

assets/index.ts

@@ -1,6 +1,35 @@
-import {isTouchDevice} from 'utils';
+import {isTouchDevice, gettext} from 'utils';
 import 'primereact/resources/primereact.min.css';
 
 if (isTouchDevice()) {
     document.documentElement.classList.add('no-touch');
 }
+
+const element = document.getElementById('nav');
+const pinButton = document.getElementById('pin-btn');
+
+if (pinButton != null) {
+    pinButton.addEventListener('click', () => {
+        handleNavToggle();
+    });
+}
+
+if (sessionStorage.getItem('navigation-pinned')) {
+    handleNavToggle();
+}
+
+function handleNavToggle() {
+    if (element == null || pinButton == null) {
+        return null;
+    }
+
+    if (element.classList.contains('nav-block--pinned')) {
+        sessionStorage.removeItem('navigation-pinned');
+        element.classList.remove('nav-block--pinned');
+        pinButton.setAttribute('title', gettext('Expand'));
+    } else {
+        sessionStorage.setItem('navigation-pinned', 'true');
+        element.classList.add('nav-block--pinned');
+        pinButton.setAttribute('title', gettext('Collapse'));
+    }
+}

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 @@
         }
 
     }
-}
+}

newsroom/templates/base_layout.html

@@ -69,10 +69,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="{{ gettext('Expand') }}">
+                        <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) %}

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>