From 26a5ad6e66f35ebfbcd9ca26547bb840cdac38fc Mon Sep 17 00:00:00 2001
From: dzonidoo <nikola71092@gmail.com>
Date: Thu, 4 Jan 2024 11:31:18 +0100
Subject: [PATCH 1/7] created lable component and changed ussages

---
 .../components/AgendaItemTimeUpdater.tsx      |   3 +-
 .../agenda/components/CoverageItemStatus.tsx  |   3 +-
 assets/companies/components/EditCompany.tsx   |   5 +-
 .../components/CompanyAdminApp.tsx            |   6 +-
 .../components/CompanyUserListItem.tsx        |  15 ++-
 assets/components/Label.tsx                   |  27 +++++
 assets/search/components/Topic.tsx            |   5 +-
 assets/styles/custom-variables.scss           |   3 +-
 assets/styles/labels.scss                     | 106 +++++++++---------
 assets/ui/components/ArticleEmbargoed.tsx     |   5 +-
 assets/users/components/EditUser.tsx          |   5 +-
 11 files changed, 105 insertions(+), 78 deletions(-)
 create mode 100644 assets/components/Label.tsx

diff --git a/assets/agenda/components/AgendaItemTimeUpdater.tsx b/assets/agenda/components/AgendaItemTimeUpdater.tsx
index 1fd28007a..edd5be40b 100644
--- a/assets/agenda/components/AgendaItemTimeUpdater.tsx
+++ b/assets/agenda/components/AgendaItemTimeUpdater.tsx
@@ -6,6 +6,7 @@ import classNames from 'classnames';
 
 import {bem} from 'ui/utils';
 import {gettext} from 'utils';
+import {Label} from 'components/Label';
 
 class AgendaItemTimeUpdater extends React.Component<any, any> {
     static propTypes: any;
@@ -108,7 +109,7 @@ class AgendaItemTimeUpdater extends React.Component<any, any> {
 
         return(
             <div className={className}>
-                <div className="label label--blue">{this.state.timeText}</div>
+                <Label text={this.state.timeText} type='info' style='translucent' />
             </div>
         );
     }
diff --git a/assets/agenda/components/CoverageItemStatus.tsx b/assets/agenda/components/CoverageItemStatus.tsx
index 1269a51d7..5a5c015df 100644
--- a/assets/agenda/components/CoverageItemStatus.tsx
+++ b/assets/agenda/components/CoverageItemStatus.tsx
@@ -14,6 +14,7 @@ import AgendaEdNote from './AgendaEdNote';
 import ActionButton from 'components/ActionButton';
 
 import {Tooltip} from 'bootstrap';
+import {Label} from 'components/Label';
 
 function getDeliveryHref(coverage: any) {
     return get(coverage, 'delivery_href');
@@ -185,7 +186,7 @@ export default class CoverageItemStatus extends React.Component<any, any> {
 
                 {isCoverageBeingUpdated(coverage) && (
                     <div className='coverage-item__row'>
-                        <span className='label label--blue'>{gettext('Update coming')}</span>
+                        <Label text={gettext('Update coming')} type='info' style='translucent' />
                     </div>
                 )}
 
diff --git a/assets/companies/components/EditCompany.tsx b/assets/companies/components/EditCompany.tsx
index 637f49f00..1989ba07a 100644
--- a/assets/companies/components/EditCompany.tsx
+++ b/assets/companies/components/EditCompany.tsx
@@ -24,6 +24,7 @@ import CompanyPermissions from './CompanyPermissions';
 import EditCompanyAPI from './EditCompanyAPI';
 import AuditInformation from 'components/AuditInformation';
 import {EditCompanyDetails} from './EditCompanyDetails';
+import {Label} from 'components/Label';
 
 interface IStateProps {
     company: ICompany;
@@ -182,9 +183,7 @@ class EditCompany extends React.Component<IProps, IState> {
                 {this.props.company.is_approved !== false ? null : (
                     <div className="list-item__preview-toolbar">
                         <div className="list-item__preview-toolbar-left">
-                            <label className="label label--orange2 label--big label--rounded">
-                                {gettext('Pending')}
-                            </label>
+                            <Label text={gettext('Pending')} type='warning' size='big' style='translucent' />
                         </div>
                         <div className="list-item__preview-toolbar-right">
                             <button
diff --git a/assets/company-admin/components/CompanyAdminApp.tsx b/assets/company-admin/components/CompanyAdminApp.tsx
index 3d976eba3..664e60f38 100644
--- a/assets/company-admin/components/CompanyAdminApp.tsx
+++ b/assets/company-admin/components/CompanyAdminApp.tsx
@@ -34,6 +34,7 @@ import {CompanyDetailsProductFilter} from './CompanyDetailsProductFilter';
 import {CompanyAdminProductSeatRequestModal} from './CompanyAdminProductSeatRequestModal';
 import {IUser} from 'interfaces/user';
 import {ICompanyAdminStore} from 'company-admin/reducers';
+import {Label} from 'components/Label';
 
 interface IStateProps {
     sectionId: string;
@@ -215,8 +216,9 @@ class CompanyAdminAppComponent extends React.Component<IProps, IState> {
                                 </button>
                             </div>
 
-                            {this.props.sectionId === 'users' ? <label className='label label--big label--rounded me-2'>{
-                                gettext('Users : {{total}}', {total : this.props.totalUsers})}</label> : ''}
+                            {this.props.sectionId === 'users'
+                                && <Label text={gettext('Users : {{total}}', {total : this.props.totalUsers})} size='big' style='translucent' className='me-2' />
+                            }
                             <div className="content-bar-divider" />
                             {this.props.sectionId !== 'users' ? null : (
                                 <React.Fragment>
diff --git a/assets/company-admin/components/CompanyUserListItem.tsx b/assets/company-admin/components/CompanyUserListItem.tsx
index b8417c398..10e22ef93 100644
--- a/assets/company-admin/components/CompanyUserListItem.tsx
+++ b/assets/company-admin/components/CompanyUserListItem.tsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import {gettext, fullDate} from 'utils';
+import {Label} from 'components/Label';
 
 export function getUserStateLabelDetails(user: any) {
     if (user.is_approved && user.is_enabled && user.is_validated) {
@@ -43,14 +44,12 @@ export function CompanyUserListItem({user, onClick, selected, sections}: any) {
             <td>
                 <div className="name">
                     {user.first_name} {user.last_name}
-                    {user.user_type === 'company_admin' ?
-                        <label className="label label--restricted label--rounded label--fill">
-                            {gettext('Company Admin')}
-                        </label>
-                        : user.user_type === 'administrator' ?
-                            <label className="label label--restricted label--rounded label--fill">
-                                {gettext('Admin')}
-                            </label> : null}
+                    {user.user_type === 'company_admin'
+                        ? <Label text={gettext('Company Admin')} style='fill' />
+                        : user.user_type === 'administrator'
+                            ? <Label text={gettext('Admin')} style='fill' />
+                            : null
+                    }
                 </div>
                 <div className="email">
                     {user.email}
diff --git a/assets/components/Label.tsx b/assets/components/Label.tsx
new file mode 100644
index 000000000..f3f45a748
--- /dev/null
+++ b/assets/components/Label.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+interface IProps {
+    text: string;
+    type?: 'default' | 'success' | 'warning' | 'alert' | 'info' | 'highlight';
+    size?: 'small' | 'medium' | 'big';
+    style?: 'fill' | 'hollow' | 'translucent'; // defaults to 'fill'
+    className?: string;
+}
+
+export class Label extends React.PureComponent<IProps> {
+    render() {
+        const classes = classNames('label label--rounded', {
+            'label--default': !this.props.type,
+            [`label--${this.props.type}`]: this.props.type !== undefined,
+            [`label--${this.props.style}`]: this.props.style,
+            [`label--${this.props.size}`]: this.props.size,
+        }, this.props.className);
+
+        return (
+            <span className={classes}>
+                {this.props.text}
+            </span>
+        );
+    }
+}
diff --git a/assets/search/components/Topic.tsx b/assets/search/components/Topic.tsx
index 370312520..f5c06755f 100644
--- a/assets/search/components/Topic.tsx
+++ b/assets/search/components/Topic.tsx
@@ -6,6 +6,7 @@ import {gettext, formatDate, formatTime} from 'utils';
 import ActionButton from 'components/ActionButton';
 import {ToolTip} from 'ui/components/ToolTip';
 import {ITopic, ITopicNotificationScheduleType, IUser} from 'interfaces';
+import {Label} from 'components/Label';
 
 export interface ITopicAction {
     id: string;
@@ -92,9 +93,7 @@ export function Topic({topic, actions, users, selected, subscriptionType}: IProp
                     <div className="simple-card__column simple-card__column--align-end">
                         <span className="simple-card__notification-info">
                             <i className="icon--alert"></i>
-                            <span className="label--rounded label--alert">
-                                {subscriptionType === 'real-time' ? gettext('Real-Time') : gettext('Scheduled')}
-                            </span>
+                            <Label text={subscriptionType === 'real-time' ? gettext('Real-Time') : gettext('Scheduled')} type='alert' style='translucent' />
                         </span>
                     </div>
                 )}
diff --git a/assets/styles/custom-variables.scss b/assets/styles/custom-variables.scss
index cf0ce5f7f..fa7cc55ef 100644
--- a/assets/styles/custom-variables.scss
+++ b/assets/styles/custom-variables.scss
@@ -126,7 +126,7 @@ $container-max-widths: (
     // Medium
     --color-neutral-300: hsl(0, 2%, 74%);
     --color-neutral-400: hsl(0, 2%, 54%);
-    --color-neutral-500: hsl(0, 2%, 40%);
+    // --color-neutral-500: hsl(0, 2%, 40%);
 
     --color-neutral-600: hsl(0, 2%, 34%);
     // Dark
@@ -142,6 +142,7 @@ $container-max-widths: (
     @include defineColorHSL(--color-highlight, 356, 72%, 46%);
     @include defineColorHSL(--color-highlight1, 268, 68%, 45%);
     @include defineColorHSL(--color-highlight2, 310, 89%, 36%);
+    @include defineColorHSL(--color-neutral-500, 0, 2%, 40%);
 
     // THEME COLORS
     @include defineColorHSL(--color-primary, 196, 100%, 34%);
diff --git a/assets/styles/labels.scss b/assets/styles/labels.scss
index a35032085..8089a2081 100644
--- a/assets/styles/labels.scss
+++ b/assets/styles/labels.scss
@@ -1,5 +1,32 @@
 // Labels
 
+$label-bg-colors: (
+    default:        var(--color-neutral-500),
+    warning:        var(--color-warning),
+    alert:          var(--color-alert),
+    success:        var(--color-success),
+    info:           var(--color-info),
+    highlight:      var(--color-highlight2),
+);
+
+$label-bg-colors-translucent: (
+    default:        alpha(var(--color-neutral-500), 0.25),
+    warning:        alpha(var(--color-warning), 0.25),
+    alert:          alpha(var(--color-alert), 0.25),
+    success:        alpha(var(--color-success), 0.25),
+    info:           alpha(var(--color-info), 0.25),
+    highlight:      alpha(var(--color-highlight), 0.25),
+);
+
+$label-text-colors: (
+    default:        var(--tag-label-txt-default),
+    warning:        lightness(var(--color-warning), 0.65),
+    alert:          lightness(var(--color-alert), 0.65),
+    success:        lightness(var(--color-success), 0.65),
+    info:           lightness(var(--color-info), 0.65),
+    highlight:      var(--tag-label-txt-inverse),
+);
+
 $labels-palette: (
   blue: $main-blue,
   green: $green,
@@ -19,13 +46,13 @@ $labels-palette: (
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    padding: 0 var(--space--1);
+    padding: 0 var(--space--1-5);
     vertical-align: middle;
     border-radius: var(--border-radius--xs);
     text-transform: uppercase;
     line-height: 1;
     letter-spacing: 0.125em;
-    font-size: 9px;
+    font-size: 10px;
     white-space: nowrap;
     cursor: default;
     border: 1px solid transparent;
@@ -38,76 +65,49 @@ $labels-palette: (
     @include label;
     --label-height: 20px;
 
-    background-color: transparent;
-    border-style: solid;
-    border-width: 1px;
-    border-color: $gray-mid;
-    color: $gray-mid;
-
-    @each $name, $color in $labels-palette {
+    @each $name, $color in $label-bg-colors {
         &.label--#{$name} {
-            border-color: transparent;
-            color: $color;
-            text-decoration-color: $color;
-            background-color: rgba($color, 0.2);
-        }
-    }
-    @each $name, $color in $labels-palette {
-        &.label--rounded.label--#{$name} {
-            background-color: rgba($color, 0.2);
+            color: $white;
+            background-color: $color;
         }
     }
 
-    &.label--big,
-    &.label--large {
+    &.label--big {
         --label-height: 24px;
         font-size: 11px;
         line-height: 1;
         padding: 0 var(--space--1-5);
     }
-    &.label--fill {
-        @each $name, $color in $labels-palette {
+
+    &.label--hollow {
+        @each $name, $color in $label-bg-colors {
+            &.label--#{$name} {
+                border: 1px solid $color;
+                background-color: transparent !important;
+                color: $color;
+            }
+        }
+    }
+
+    &.label--translucent {
+        @each $name, $color in $label-bg-colors-translucent {
             &.label--#{$name} {
                 background-color: $color;
-                border-color: $color;
-                color: $white;
-                text-decoration-color: $white;
+            }
+        }
+
+        @each $name, $color in $label-text-colors {
+            &.label--#{$name} {
+                color: $color;
             }
         }
     }
 }
 
 .label--rounded {
-    --label-height: 20px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    height: var(--label-height);
-    padding: 0 var(--space--1-5);
     border-radius: var(--border-radius--full);
-    font-size: 10px;
-    letter-spacing: 0.125em;
-    line-height: 1;
-    text-transform: uppercase;
-    white-space: nowrap;
-    cursor: default;
-    border-color: transparent;
-    font-weight: 600;
-    background-color: hsla(0, 0%, 60%, 0.25);
-    color: var(--color-text--muted);
-    &.label--alert {
-        background-color: alpha(var(--color-alert), 0.25);
-        color: lightness(var(--color-alert), 0.85);
-    }
-    &.label--big,
-    &.label--large {
-        --label-height: 24px;
-        font-size: 11px;
-        line-height: 1;
-        padding: 0 var(--space--1-5);
-    }
-
 }
+
 .label + .label {
     margin-inline-start: var(--space--1);
 }
diff --git a/assets/ui/components/ArticleEmbargoed.tsx b/assets/ui/components/ArticleEmbargoed.tsx
index ce7e01474..fea0dae9a 100644
--- a/assets/ui/components/ArticleEmbargoed.tsx
+++ b/assets/ui/components/ArticleEmbargoed.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {getEmbargo, gettext, fullDate} from '../../utils';
+import {Label} from 'components/Label';
 
 export default function ArticleEmbargoed({item}: any) {
     const embargo = getEmbargo(item);
@@ -10,9 +11,7 @@ export default function ArticleEmbargoed({item}: any) {
     }
 
     return (
-        <div>
-            <span className="label label--red label--big mb-3">{gettext('Embargo: {{ date }}', {date: fullDate(embargo)})}</span>
-        </div>
+        <Label text={gettext('Embargo: {{ date }}', {date: fullDate(embargo)})} type='alert' style='translucent' className='mb-3' size='big' />
     );
 }
 
diff --git a/assets/users/components/EditUser.tsx b/assets/users/components/EditUser.tsx
index 2fb8f8115..ec83c4a61 100644
--- a/assets/users/components/EditUser.tsx
+++ b/assets/users/components/EditUser.tsx
@@ -32,6 +32,7 @@ import {getUserStateLabelDetails} from 'company-admin/components/CompanyUserList
 import {companyProductSeatsSelector, companySectionListSelector, sectionListSelector} from 'company-admin/selectors';
 import {IUser} from 'interfaces/user';
 import ActionButton from 'components/ActionButton';
+import {Label} from 'components/Label';
 
 const getCompanyOptions = (companies: Array<ICompany>) => companies.map((company) => ({value: company._id, text: company.name}));
 
@@ -156,9 +157,7 @@ const EditUserComponent: React.ComponentType<IProps> = (props: IProps) => {
                                 {stateLabelDetails.text}
                             </label>
                             {user.user_type !== 'administrator' ? null : (
-                                <label className="label label--green label--fill label--big label--rounded">
-                                    {gettext('Admin')}
-                                </label>
+                                <Label text={gettext('Admin')} type='success' style='fill' size='big' />
                             )}
                             {!showResendInvite ? null : (
                                 <ActionButton

From cbb6504036781615b1657cf783e7ed040ccc9961 Mon Sep 17 00:00:00 2001
From: fritzSF <vladimir.stefanovic@sourcefabric.org>
Date: Mon, 12 Feb 2024 15:49:21 +0100
Subject: [PATCH 2/7] New navigation (#760)

---
 assets/styles/app.scss                |   1 +
 assets/styles/breakpoints.scss        |   6 +
 assets/styles/custom-display.scss     |   4 +
 assets/styles/custom-variables.scss   |  22 +-
 assets/styles/index.scss              | 259 +------------------
 assets/styles/sidenav.scss            | 355 ++++++++++++++++++++++++++
 assets/ui/components/ToolTip.tsx      |   4 +-
 design_app/src/components/SideNav.jsx | 100 +++++---
 design_app/src/index.js               |   4 +-
 newsroom/templates/base_layout.html   |  73 +++---
 newsroom/templates/sidenav_icon.html  |  28 +-
 11 files changed, 511 insertions(+), 345 deletions(-)
 create mode 100644 assets/styles/sidenav.scss

diff --git a/assets/styles/app.scss b/assets/styles/app.scss
index d4270979d..4d9a0dba5 100644
--- a/assets/styles/app.scss
+++ b/assets/styles/app.scss
@@ -2,6 +2,7 @@
 @import './color-functions.scss';
 @import './custom.scss'; // Bootstrap customized
 @import './index.scss';
+@import './sidenav.scss';
 @import './article-list.scss';
 @import './icon-font.scss';
 @import './icon-font-small.scss';
diff --git a/assets/styles/breakpoints.scss b/assets/styles/breakpoints.scss
index 755dc9f1b..532beb73b 100644
--- a/assets/styles/breakpoints.scss
+++ b/assets/styles/breakpoints.scss
@@ -61,6 +61,12 @@
     }
 }
 
+@mixin large_phone {
+    @media only screen and (max-width: 768px) {
+        @content;
+    }
+}
+
 @mixin tablet {
     @media only screen and (orientation: portrait) and (min-width: 576px) and (max-width: 1439px), (orientation: landscape) and (min-width: 992px) and (max-width: 1439px) {
         @content;
diff --git a/assets/styles/custom-display.scss b/assets/styles/custom-display.scss
index d6129a07c..a63895b73 100644
--- a/assets/styles/custom-display.scss
+++ b/assets/styles/custom-display.scss
@@ -29,6 +29,10 @@
     .d-phone-none {display: none;}
     .d-phone-block {display: block;}
 }
+@include large_phone {
+    .d-phone-none {display: none;}
+    .d-phone-block {display: block;}
+}
 
 @include tablet {
     .d-tablet-none {display: none;}
diff --git a/assets/styles/custom-variables.scss b/assets/styles/custom-variables.scss
index ab1b45247..d3471a274 100644
--- a/assets/styles/custom-variables.scss
+++ b/assets/styles/custom-variables.scss
@@ -403,6 +403,7 @@ $container-max-widths: (
     --sidenav-color-bg:                     var(--color-primary);
     --sidenav-color-item-bg:                transparent;
     --sidenav-color-item-fg:                hsla(0, 0%, 100%, 1);
+    --sidenav-color-item-bg--hover:         hsla(0, 0%, 0%, 0.16);
     --sidenav-color-item-bg--active:        hsla(0, 0%, 100%, 1);
     --sidenav-color-item-fg--active:        var(--color-primary);
     --sidenav-color-badge-bg:               hsla(0, 0%, 16%, 1);
@@ -410,18 +411,29 @@ $container-max-widths: (
     --sidenav-color-badge-fg:               hsla(0, 0%, 98%, 1);
     --sidenav-color-badge-fg--active:       hsla(0, 0%, 98%, 1);
     --sidenav-color-badge-outline--active:  var(--sidenav-color-item-bg--active);
+    --sidenav-item-size:                    var(--space--5);
+    --sidenav-item-font-size:               0.875rem;
     --sidenav-item-badge-size:              1.25rem;
     --sidenav-item-badge-font-size:         0.6875rem;
-    --sidenav-item-helper-icon-size:        1.25rem;
+    --sidenav-item-helper-icon-size:        1.125rem;
     --sidenav-item-helper-icon-fg:          var(--sidenav-color-bg);
     --sidenav-item-border-radius:           var(--border-radius--s);
     --separator-dot-size:                   3px;
     --separator-dot-color-bg:               var(--sidenav-color-item-fg);
     // Title and size options
-    --sidenav-item-title-display:           block; // set to none to hide the title
-    --sidenav-size-width:                   80px; // width of the sidenav on desktop
-    --sidenav-item-gap:                     8px; // left and right spacing between item and the bar on desktop
-    --sidenav-item-width:                   calc(var(--sidenav-size-width) - var(--sidenav-item-gap)); // width of the sidenav item on desktop
+    //--sidenav-item-title-display:           block; // set to none to hide the title
+    // --sidenav-size-width:                   56px; // width of the sidenav on desktop
+    // --sidenav-item-gap:                     8px; // left and right spacing between item and the bar on desktop
+    // --sidenav-item-width:                   calc(var(--sidenav-size-width) - var(--sidenav-item-gap)); // width of the sidenav item on desktop
+    --sidenav-item-radius:                  var(--border-radius--s);
+    --sidenav-size:                         3.5rem;
+    --sidenav-size-overlay:                 14rem;
+    --sidenav-size-pinned:                  14rem;
+    --sidenav-shadow-overlay:               4px 0 8px hsla(0, 0%, 0%, 0.24);
+    --sidenav-pin-button-color-bg-default:  hsla(0, 0%, 16%, 0.2);
+    --sidenav-pin-button-color-bg-hover:    hsla(0, 0%, 100%, 0.8);
+    --sidenav-pin-button-color-fg-default:  hsla(0, 0%, 100%, 1);
+    --sidenav-pin-button-color-fg-hover:    var(--color-primary);
 
     // COMPONENT: PROFILE MODAL
     --profile-header-height: 56px;
diff --git a/assets/styles/index.scss b/assets/styles/index.scss
index 5aab83657..ce05b8e6f 100644
--- a/assets/styles/index.scss
+++ b/assets/styles/index.scss
@@ -360,259 +360,6 @@ body.print {
     overflow: auto;
 }
 
-.sidenav {
-    flex: 0 0 var(--navbar-height--mobile);
-    background-color: var(--sidenav-color-bg);
-    position: relative;
-    padding: 0 4px;
-    display: flex;
-    overflow-y: auto;
-
-    &:dir(rtl) {
-        box-shadow: inset 3px 0px 8px rgba(0, 0, 0, 0.1);
-    }
-
-    @include phone {
-        padding: 0 2px;    
-        overflow-y: hidden;
-    }
-    @include md {
-        flex: 0 0 var(--sidenav-size-width);
-    }
-}
-
-.sidenav-icons {
-    display: flex;
-    flex-direction: row;
-    margin: 0 auto;
-    gap: var(--space--0-5);
-    width: 100vw;
-    padding: 0;
-    list-style-type: none;
-
-    @include md {
-        padding-block-start: var(--space--1);
-        flex-direction: column;
-        overflow: visible;
-        width: auto;
-    }
-
-
-    .sidenav-icons__item {
-        margin: 4px 0;
-        align-self: stretch;
-        position: relative;
-        display: flex !important;
-        justify-content: center;
-        a {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex-direction: column;
-            gap: 2px;
-            &:hover {
-                text-decoration: none;
-            }
-            @include sm {
-                gap: 4px;
-            }
-
-
-        }
-        a, span {
-            border-radius: var(--sidenav-item-border-radius);
-            text-decoration: none;
-            width: 40px;
-            height: calc(var(--navbar-height--mobile) - var(--space--1));
-            min-height: auto;
-            padding: 2px 0;
-            line-height: var(--navbar-height--mobile);
-            text-align: center;
-            background-color: var(--sidenav-color-item-bg);
-            
-            @include md {
-                width: var(--sidenav-item-width);
-                min-height: var(--navbar-height);
-                line-height: var(--navbar-height);
-                height: auto;
-            }
-            &:focus {
-                outline: none;
-            }
-            &:focus-visible {
-                box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 3px 4px rgba(255, 255, 255, .7);
-            }
-            i.icon--more {
-                opacity: .3;
-                @include sm {
-                    transform: rotate(90deg);
-                }
-            }
-        }
-        span {
-            display: block;
-            min-height: 34px;
-            line-height: 34px;
-            @include phone {
-                width: 20px;
-                height: 24px;
-                line-height: 50px;
-            }
-        }
-        .sidenav-icons__item-title {
-            display: none;
-            color: var(--sidenav-color-item-fg);
-            font-size: 10px;
-            font-weight: 700;
-            line-height: 1;
-            letter-spacing: 0.3px;
-            text-transform: uppercase;
-            overflow-wrap: break-word;
-            align-self: stretch;
-            @include md {
-                display: var(--sidenav-item-title-display);
-            }
-        }
-        .badge {
-            background-color: var(--sidenav-color-badge-bg);
-            color: var(--sidenav-color-badge-fg);
-            outline: 2px solid var(--sidenav-color-bg);
-            &.badge--icon {
-                background-color: var(--sidenav-color-item-bg--active);
-                [class^="icon-small--"],
-                [class^="icon-small--"] {
-                    color: var(--sidenav-color-item-fg--active) !important;
-                }
-            }
-        }
-        .sidenav-icons__badge,
-        .sidenav-icons__helper-icon {
-            position: absolute;
-            font-size: var(--sidenav-item-badge-font-size);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            border-radius: var(--border-radius--full);
-            background-color: var(--sidenav-color-badge-bg);
-            color: var(--sidenav-color-badge-fg);
-            outline: 2px solid var(--sidenav-color-bg);
-        }
-        .sidenav-icons__badge {
-            height: var(--sidenav-item-badge-size);
-            min-width: var(--sidenav-item-badge-size);
-            font-size: var(--sidenav-item-badge-font-size);
-            font-weight: 700;
-            line-height: 1;
-            inset-block-start: 3px;
-            inset-inline-end: 3px;
-            background-color: var(--sidenav-color-badge-bg);
-            color: var(--sidenav-color-badge-fg);
-            padding: 0.35em 0.6em;
-            &:empty {
-                display: none;
-            }
-            @include phone {
-                inset-block-start: 2px;
-                inset-inline-end: -4px;
-            }
-        }
-
-        .sidenav-icons__helper-icon {
-            height: var(--sidenav-item-helper-icon-size);
-            width: var(--sidenav-item-helper-icon-size);
-            background-color: var(--sidenav-color-item-fg);
-            color: var(--sidenav-item-helper-icon-fg);
-            padding: 0;
-            inset-block-start: 2px;
-            inset-inline-end: 8px;
-            [class^="icon-small--"],
-            [class^="icon-small--"] {
-                color: var(--sidenav-item-helper-icon-fg) !important;
-            }
-            @include phone {
-                inset-block-start: 2px;
-                inset-inline-end: -4px;
-            }
-        }
-
-        &.active {
-            .sidenav-icons__badge {
-                outline: 2px solid var(--sidenav-color-badge-outline--active);
-                background-color: var(--sidenav-color-badge-bg--active);
-                color: var(--sidenav-color-badge-fg--active);
-            }
-
-            a {
-                background-color: var(--sidenav-color-item-bg--active);
-                border-radius: 4px;
-                text-decoration: none;
-            }
-            i, .sidenav-icons__item-title {
-                color: var(--sidenav-color-item-fg--active);
-            }
-        }
-        .badge--icon {
-            inset-block-start: 2px;
-            inset-inline-end: 7px;
-        }
-        [class^="icon--"], [class*=" icon--"] {
-            color: var(--sidenav-color-item-fg);
-        }
-        &--report {
-            position: absolute;
-            inset-block-end: 0;
-            inset-inline-start: auto;
-            inset-inline-end: 50px;
-            @include sm {
-                inset-inline-start: auto;
-                inset-inline-end: auto;
-                inset-block-end: 56px;
-            }
-        }
-        &--admin {
-            position: absolute;
-            inset-block-end: 0;
-            inset-inline-start: auto;
-            inset-inline-end: 4px;
-
-            @include sm {
-                inset-inline-end: auto;
-            }
-        }
-    }
-    .sidenav-icons__stretch-separator {
-        flex-grow: 1;
-        align-self: stretch;
-        justify-self: stretch;
-        margin: auto;
-    }
-    .sidenav-icons__separator {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
-        flex-grow: 0;
-        flex-shrink: 0;
-        gap: calc(var(--separator-dot-size) * 1);
-        margin-block: auto;
-        margin-inline: var(--space--0-5);
-        .separator__dot {
-            border-radius: var(--border-radius--full);
-            display: block;
-            height: var(--separator-dot-size);
-            width: var(--separator-dot-size);
-            background-color: var(--separator-dot-color-bg);
-            opacity: 0.4;
-        }
-        @include md {
-            flex-direction: row;
-            margin-block: var(--space--1-5);
-            gap: calc(var(--separator-dot-size) * 1.5);
-        }
-
-    }
-}
-
 .content-header {
     position: relative;
 }
@@ -621,7 +368,7 @@ body.print {
     position: relative;
 }
 
-.divider:after{
+.divider:after {
     content: "";
     position: absolute;
     height: 0px;
@@ -4324,4 +4071,8 @@ article.list {
     font-weight: 300;
     color: var(--color-text--muted);
     font-size: inherit;
+}
+
+.tooltip {
+    pointer-events: none;
 }
\ No newline at end of file
diff --git a/assets/styles/sidenav.scss b/assets/styles/sidenav.scss
new file mode 100644
index 000000000..c1095dba9
--- /dev/null
+++ b/assets/styles/sidenav.scss
@@ -0,0 +1,355 @@
+.nav-block {
+    --pin-button-inset-end: 3.125rem;
+    --sidenav-transition: .3s ease;
+    background-color: var(--sidenav-color-bg);
+    position: relative;
+    overflow: visible;
+    z-index: 200;
+    transition: all var(--sidenav-transition);
+    flex: 0 0 var(--sidenav-size);
+
+    &:dir(rtl) {
+        box-shadow: inset 3px 0px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    @include large_phone {
+        padding: 0 2px;    
+        overflow-y: hidden;
+        flex: 0 0 var(--navbar-height--mobile);
+
+        .sidenav {
+            flex-direction: row;
+            padding-block-start: var(--space--0-5);
+            padding-block-end: 0 ;
+            padding-inline-start: var(--space--0-5);
+            padding-inline-end: 0 !important;
+            gap: var(--space--0-5);
+            height: var(--navbar-height--mobile);
+            overflow-x: auto;
+            position: static;
+            width: 100% !important;
+            .sidenav__item {
+                position: relative;
+                height: var(--sidenav-item-size);
+                
+                a, .sidenav__item-button {
+                    height: var(--sidenav-item-size);
+                    width: var(--sidenav-item-size);
+                    gap: 0;
+                    flex-grow: 0;
+                    flex-shrink: 0;
+                    flex-direction: column;
+                }
+                .sidenav__badge {
+                    inset-block-start: -2px;
+                    inset-inline-end: -5px;
+                }
+                .sidenav__helper-icon {
+                    inset-block-start: 0;
+                    inset-inline-end: 0;
+                }
+                .sidenav__item-title {
+                    position: absolute;
+                    opacity: 0 !important;
+                    width: 0 !important;
+                    inset-block-start: -1000px;
+                    font-size: 0.1px;
+                    line-height: 1;
+                    flex-grow: 0;
+                    flex-shrink: 1;
+                }
+            }
+            .nav-block__pin-button {
+                display: none !important;
+            }
+        }
+    }
+
+
+    &.nav-block--pinned {
+        flex: 0 0 var(--sidenav-size-pinned);
+        padding-inline-end: var(--space--1-5);
+        .sidenav {
+            width: 100%;
+            box-shadow: none;
+            padding-inline-end: var(--space--1-5);
+            .sidenav__item-title {
+                opacity: 1;
+                width: 100%;
+                padding-inline-end: var(--space--2);
+            }
+            .nav-block__pin-button {
+                transform: translateX(calc(var(--sidenav-size-pinned) - var(--pin-button-inset-end)));
+                [class^="icon--"], [class*=" icon--"] {
+                    transform: rotate(180deg);
+                }
+            }
+        }
+        @include large_phone {
+            flex: 0 0 var(--navbar-height--mobile) !important;
+            padding-inline-end: 0;
+            .sidenav {
+                height: var(--navbar-height--mobile);
+            }
+        }
+    }
+}
+
+.sidenav {
+    z-index: 1;
+    padding: 0;
+    padding-block-start: var(--space--5);
+    padding-block-end: var(--space--2);
+    padding-inline: var(--space--1);
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    gap: var(--space--1);
+    list-style-type: none;
+    background-color: var(--sidenav-color-bg);
+
+    position: absolute;
+    z-index: 100;
+    inset-block: 0;
+    inset-inline-start: 0;
+
+    width: var(--sidenav-size);
+    min-width: var(--sidenav-size);
+    transition: all var(--sidenav-transition);
+    overflow-y: auto;
+
+    .sidenav__item-icon {
+        --icon-block-radius: var(--sidenav-item-radius);
+        --icon-block-size: var(--sidenav-item-size);
+        position: relative;
+        background-color: transparent;
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: var(--icon-block-radius);
+        height: var(--icon-block-size);
+        width: var(--icon-block-size);
+        transition: all var(--sidenav-transition);
+    }
+
+    .sidenav__item-title {
+        opacity: 0;
+        width: 0;
+        color: var(--sidenav-color-item-fg);
+        font-size: var(--sidenav-item-font-size);
+        line-height: 1.1;
+        font-weight: 400;
+        overflow-wrap: break-word;
+        flex-grow: 1;
+        flex-shrink: 1;
+        transition: all var(--sidenav-transition);
+        overflow: hidden !important;
+        white-space: nowrap;
+    }
+
+    .nav-block__pin-button {
+        --pin-button-size: 1.5rem;
+        background-color: var(--sidenav-pin-button-color-bg-default);
+        height: var(--pin-button-size);
+        width: var(--pin-button-size);
+        border-radius: var(--border-radius--full);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 2;
+        border: none;
+        opacity: 0.6;
+        position: absolute;
+        inset-block-start: var(--space--1-5);
+        inset-inline-start: var(--space--2);
+        transform: translateX(0);
+        transition: all 0.5s ease;
+
+        [class^="icon--"], [class*=" icon--"] {
+            --icon-size: 18px;
+            color: var(--sidenav-pin-button-color-fg-default);
+        }
+
+        &:hover {
+            background-color: var(--sidenav-pin-button-color-bg-hover);
+            opacity: 1;
+            [class^="icon--"], [class*=" icon--"] {
+                color: var(--sidenav-pin-button-color-fg-hover);
+            }
+        }
+        &:active {
+            border: 2px solid var(--sidenav-color-bg);
+        }
+        &:focus {
+            outline: none;
+        }
+        &:focus-visible {
+            box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, 0.4), 0 0 2px 3px hsla(0, 0%, 100%, 0.5);
+        }
+    }
+
+    &:hover {
+        width: var(--sidenav-size-overlay);
+        box-shadow: var(--sidenav-shadow-overlay);
+        padding-inline-end: var(--space--1-5);
+        .sidenav__item-title {
+            opacity: 1;
+            width: 100%;
+            padding-inline-end: var(--space--3);
+        }
+
+        .nav-block__pin-button {
+            opacity: 1;
+            transform: translateX(calc(var(--sidenav-size-overlay) - var(--pin-button-inset-end)));
+        }
+    }
+
+    .sidenav__item {
+        position: relative;
+        border-radius: var(--sidenav-item-border-radius);
+        transition: all var(--sidenav-transition);
+        &:hover {
+            background-color: var(--sidenav-color-item-bg--hover);
+        }
+
+        a,
+        .sidenav__item-button {
+            border-radius: var(--sidenav-item-border-radius);
+            text-decoration: none;
+            height: var(--sidenav-item-size);
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            min-height: auto;
+            gap: var(--space--1);
+            flex-grow: 1;
+            flex-shrink: 1;
+            &:hover {
+                text-decoration: none;
+            }
+            &:focus {
+                outline: none;
+            }
+            &:focus-visible {
+                box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 3px 4px rgba(255, 255, 255, .7);
+            }
+        }
+
+        .badge {
+            background-color: var(--sidenav-color-badge-bg);
+            color: var(--sidenav-color-badge-fg);
+            outline: 2px solid var(--sidenav-color-bg);
+            &.badge--icon {
+                background-color: var(--sidenav-color-item-bg--active);
+                [class^="icon-small--"],
+                [class^="icon-small--"] {
+                    color: var(--sidenav-color-item-fg--active) !important;
+                }
+            }
+        }
+        .sidenav__badge,
+        .sidenav__helper-icon {
+            position: absolute;
+            font-size: var(--sidenav-item-badge-font-size);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: var(--border-radius--full);
+            background-color: var(--sidenav-color-badge-bg);
+            color: var(--sidenav-color-badge-fg);
+            outline: 2px solid var(--sidenav-color-bg);
+            z-index: 1;
+        }
+        .sidenav__badge {
+            height: var(--sidenav-item-badge-size);
+            min-width: var(--sidenav-item-badge-size);
+            font-size: var(--sidenav-item-badge-font-size);
+            font-weight: 700;
+            line-height: 1;
+            inset-block-start: -7px;
+            inset-inline-end: -4px;
+            background-color: var(--sidenav-color-badge-bg);
+            color: var(--sidenav-color-badge-fg);
+            padding: 0.35em 0.6em;
+            &:empty {
+                display: none;
+            }
+        }
+
+        .sidenav__helper-icon {
+            height: var(--sidenav-item-helper-icon-size);
+            width: var(--sidenav-item-helper-icon-size);
+            background-color: var(--sidenav-color-item-fg);
+            color: var(--sidenav-item-helper-icon-fg);
+            padding: 0;
+            inset-block-start: 0;
+            inset-inline-end: 0;
+            [class^="icon-small--"],
+            [class^="icon-small--"] {
+                color: var(--sidenav-item-helper-icon-fg) !important;
+            }
+        }
+
+        &.active {
+            .sidenav__badge {
+                outline: none;
+                box-shadow: -2px 4px 0 -2px var(--sidenav-color-badge-outline--active);
+                background-color: var(--sidenav-color-badge-bg--active);
+                color: var(--sidenav-color-badge-fg--active);
+            }
+
+            a {
+                background-color: var(--sidenav-color-item-bg--active);
+                border-radius: 4px;
+                text-decoration: none;
+            }
+            [class^="icon--"],
+            [class*=" icon--"],
+            .sidenav__item-title {
+                color: var(--sidenav-color-item-fg--active);
+            }
+        }
+        .badge--icon {
+            inset-block-start: 2px;
+            inset-inline-end: 7px;
+        }
+        [class^="icon--"], [class*=" icon--"] {
+            color: var(--sidenav-color-item-fg);
+        }
+    }
+
+
+    .sidenav__stretch-separator {
+        flex-grow: 1;
+        align-self: stretch;
+        justify-self: stretch;
+        margin: auto;
+    }
+    .sidenav__separator {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        flex-grow: 0;
+        flex-shrink: 0;
+        gap: calc(var(--separator-dot-size) * 1);
+        margin-block: auto;
+        margin-inline: var(--space--0-5);
+        .separator__dot {
+            border-radius: var(--border-radius--full);
+            display: block;
+            height: var(--separator-dot-size);
+            width: var(--separator-dot-size);
+            background-color: var(--separator-dot-color-bg);
+            opacity: 0.4;
+        }
+        @include md {
+            flex-direction: row;
+            margin-block: var(--space--1-5);
+            gap: calc(var(--separator-dot-size) * 1.5);
+        }
+
+    }
+}
\ No newline at end of file
diff --git a/assets/ui/components/ToolTip.tsx b/assets/ui/components/ToolTip.tsx
index 653e64610..17e69e50f 100644
--- a/assets/ui/components/ToolTip.tsx
+++ b/assets/ui/components/ToolTip.tsx
@@ -31,7 +31,8 @@ export class ToolTip extends React.PureComponent<any, any> {
             } else {
                 this.tooltip = new Tooltip(child, {
                     trigger: 'hover',
-                    placement: this.props.placement || 'top'
+                    placement: this.props.placement || 'top',
+                    title: this.props.title,
                 });
             }
         }
@@ -58,4 +59,5 @@ export class ToolTip extends React.PureComponent<any, any> {
 ToolTip.propTypes = {
     children: PropTypes.node.isRequired,
     placement: PropTypes.string,
+    title: PropTypes.string,
 };
diff --git a/design_app/src/components/SideNav.jsx b/design_app/src/components/SideNav.jsx
index 42b0a8b61..3e10b6840 100644
--- a/design_app/src/components/SideNav.jsx
+++ b/design_app/src/components/SideNav.jsx
@@ -1,81 +1,109 @@
-import React from 'react';
+import React, {useState} from 'react';
+import {ToolTip} from 'ui/components/ToolTip';
 
 function SideNav() {
+    const [isNavExpanded, setIsNavExpanded] = useState(false);
+    const handleNavExpanded = event => {
+        setIsNavExpanded(current => !current);
+    }
+
     return (
-    
-        <nav className="sidenav">
+        <nav className={`nav-block ${isNavExpanded ? 'nav-block--pinned' : ''}`}>
             <h3 className="a11y-only">Side Navigation</h3>
-            <ul className="sidenav-icons">           
-                <li className="sidenav-icons__item">
+            <ul className="sidenav">
+                <li className='d-phone-none'>
+                    <ToolTip placement="left" title={isNavExpanded ? "Collapse" : "Expand"}>
+                        <button className='nav-block__pin-button' aria-label={isNavExpanded ? "Collapse" : "Expand"} onClick={handleNavExpanded}>
+                            <i className="icon--arrow-end" role='presentation'></i>
+                        </button>
+                    </ToolTip>
+                </li>          
+                <li className="sidenav__item">
                     <a href="/" title="" data-toggle="tooltip" data-placement="right" aria-label="Home" role="button" data-original-title="Home">
-                        <i className="icon--home"></i>
-                        <div className="sidenav-icons__item-title">Home</div>
+                        <span class="sidenav__item-icon">
+                            <i className="icon--home" role='presentation'></i>
+                        </span>
+                        <span className="sidenav__item-title">Home</span>
                     </a>
                 </li>
-                <li className="sidenav-icons__item active">
+                <li className="sidenav__item active">
                     <a href="/wire" title="" data-toggle="tooltip" data-placement="right" aria-label="Wire" role="button" data-original-title="Wire">
-                        <div id="saved-items-count" className="sidenav-icons__badge">80</div>
-                        <i className="icon--text"></i>
-                        <div className="sidenav-icons__item-title">Wire</div>
+                        <span id="saved-items-count" className="sidenav__badge">80</span>
+                        <span class="sidenav__item-icon">
+                            <i className="icon--text" role='presentation'></i>
+                        </span>
+                        <span className="sidenav__item-title">Wire</span>
                     </a>
                 </li>
-                <li className="sidenav-icons__item">
+                <li className="sidenav__item">
                     <a href="/agenda" title="" data-toggle="tooltip" data-placement="right" aria-label="Agenda" role="button" data-original-title="Agenda">
-                        <i className="icon--calendar"></i>
-                        <div className="sidenav-icons__item-title">Agenda</div>
+                        <span class="sidenav__item-icon">
+                            <i className="icon--calendar" role='presentation'></i>
+                        </span>
+                        <span className="sidenav__item-title">Agenda</span>
                     </a>
                 </li>
-                <li className="sidenav-icons__item">
+                <li className="sidenav__item">
                     <a href="/monitoring" title="" data-toggle="tooltip" data-placement="right" aria-label="Monitoring" role="button" data-original-title="Monitoring">
-                        <i className="icon--monitoring"></i>
-                        <div className="sidenav-icons__item-title">Monitoring</div>
+                        <span class="sidenav__item-icon">
+                            <i className="icon--monitoring" role='presentation'></i>
+                        </span>
+                        <span className="sidenav__item-title">Monitoring</span>
                     </a>
                 </li>
 
-                <li className="sidenav-icons__separator">
+                <li className="sidenav__separator" role='presentation'>
                     <span className="separator__dot" aria-hidden="true"></span>
                     <span className="separator__dot" aria-hidden="true"></span>
                     <span className="separator__dot" aria-hidden="true"></span>
                     <span className="separator__dot" aria-hidden="true"></span>
                 </li>
 
-                <li className="sidenav-icons__item">
+                <li className="sidenav__item">
                     <a href="/bookmarks_wire" title="" data-toggle="tooltip" data-placement="right" aria-label="Saved / Watched Items" role="button" data-original-title="Saved / Watched">
-                        <div id="saved-items-count" className="sidenav-icons__badge">89</div>
-                        <i className="icon--bookmark"></i>
-                        <div className="sidenav-icons__item-title">Saved / Watched</div>
+                        <span id="saved-items-count" className="sidenav__badge">89</span>
+                        <span class="sidenav__item-icon">
+                           <i className="icon--bookmark" role='presentation'></i> 
+                        </span>
+                        <span className="sidenav__item-title">Saved / Watched</span>
                     </a>
                 </li>
 
-                <li className="sidenav-icons__separator">
+                <li className="sidenav__separator" role='presentation'>
                     <span className="separator__dot" aria-hidden="true"></span>
                     <span className="separator__dot" aria-hidden="true"></span>
                     <span className="separator__dot" aria-hidden="true"></span>
                     <span className="separator__dot" aria-hidden="true"></span>
                 </li>
 
-                <li className="sidenav-icons__item">
+                <li className="sidenav__item">
                     <a href="https://www.cpimages.com/" title="" data-toggle="tooltip" data-placement="right" aria-label="CP Images" target="_blank" data-original-title="CP Images">      
-                        <div className="sidenav-icons__helper-icon">
-                            <i className="icon-small--external"></i>
-                        </div>        
-                        <i className="icon--photo"></i>
-                        <div className="sidenav-icons__item-title">CP Images</div>
+                        <span class="sidenav__item-icon">
+                            <span className="sidenav__helper-icon">
+                                <i className="icon-small--external" role='presentation'></i>
+                            </span>
+                            <i className="icon--photo"></i>
+                        </span>
+                        <span className="sidenav__item-title">CP Images</span>
                     </a>                    
                 </li>
 
-                <li className="sidenav-icons__stretch-separator"></li>
+                <li className="sidenav__stretch-separator" role='presentation'></li>
 
-                <li className="sidenav-icons__item">
+                <li className="sidenav__item">
                     <a href="/reports/company_reports" title="" aria-label="Reports" role="button" data-toggle="tooltip" data-placement="right" data-original-title="Reports">
-                        <i className="icon--report"></i>
-                        <div className="sidenav-icons__item-title">Reports</div>
+                        <span className="sidenav__item-icon">
+                            <i className="icon--report" role='presentation'></i>
+                        </span>
+                        <span className="sidenav__item-title">Reports</span>
                     </a>
                 </li>            
-                <li className="sidenav-icons__item">
+                <li className="sidenav__item">
                     <a href="/settings/companies" title="" aria-label="Settings" role="button" data-toggle="tooltip" data-placement="right" data-original-title="Settings">
-                        <i className="icon--cog"></i>
-                        <div className="sidenav-icons__item-title">Settings</div>
+                        <span className="sidenav__item-icon">
+                            <i className="icon--cog" role='presentation'></i>
+                        </span>
+                        <span className="sidenav__item-title">Settings</span>
                     </a>
                 </li>  
             </ul>
diff --git a/design_app/src/index.js b/design_app/src/index.js
index d0e8fed5a..cb4c02333 100644
--- a/design_app/src/index.js
+++ b/design_app/src/index.js
@@ -7,7 +7,7 @@ import '../../assets/styles/app.scss'; // Newshub - import of everything
 import './assets/styles/_design_external-style.scss'; // Static file
 //import './assets/styles/theme.css'; // CP Theme OLD
 
-import './assets/styles/theme_News-Pro.css'; // CP News Pro Theme
+//import './assets/styles/theme_News-Pro.css'; // CP News Pro Theme
 //import './assets/styles/theme_Command-News.css'; // CP Command News Theme
 
 ReactDOM.render(
@@ -15,7 +15,7 @@ ReactDOM.render(
   document.getElementById('root'),
 );
 
-// Check if hot reloading is enable. If it is, changes won't reload the page.
+// Check if hot reloading is enable. If it is, changes will not reload the page.
 // This is related to webpack-dev-server and works on development only.
 if (module.hot) {
   module.hot.accept();
diff --git a/newsroom/templates/base_layout.html b/newsroom/templates/base_layout.html
index c16b99019..cbcb5e787 100644
--- a/newsroom/templates/base_layout.html
+++ b/newsroom/templates/base_layout.html
@@ -68,15 +68,15 @@ <h3 class="a11y-only">{{ gettext('Main Navigation Bar') }}</h3>
 
     <div class="contentWrap {% block custom_content_style %}{% endblock %}">
         {% if session.get('name') %}
-        <nav class="sidenav">
+        <nav class="{`nav-block ${isNavExpanded ? 'nav-block--pinned' : ''}`}">
             <h3 class="a11y-only">{{ gettext('Side Navigation') }}</h3>
-            <ul class="sidenav-icons">
+            <ul class="sidenav">
 
                 {% block default_navs %}
                     {% for group in range(0, 10) %}
                         {% for nav in sidenavs(request.blueprint)|selectattr("group", "equalto", group) %}
                         {% if group > 0 and loop.first and loop.length %}
-                        <li class="sidenav-icons__separator">
+                        <li class="sidenav__separator" role="presentation">
                             <span class="separator__dot" aria-hidden="true"></span>
                             <span class="separator__dot" aria-hidden="true"></span>
                             <span class="separator__dot" aria-hidden="true"></span>
@@ -89,10 +89,10 @@ <h3 class="a11y-only">{{ gettext('Side Navigation') }}</h3>
                     {% endfor %}
                 {%  endblock %}
 
-                <li class="sidenav-icons__stretch-separator"></li>
+                <li class="sidenav__stretch-separator" role="presentation"></li>
 
                 {% if is_company_admin() %}
-                <li class="sidenav-icons__item  {% if request.endpoint == 'company_admin.index' %}active{% endif %}">
+                <li class="sidenav__item  {% if request.endpoint == 'company_admin.index' %}active{% endif %}">
                     <a
                         href="{{ url_for('company_admin.index') }}"
                         title="{{ gettext('Company Admin') }}"
@@ -102,42 +102,49 @@ <h3 class="a11y-only">{{ gettext('Side Navigation') }}</h3>
                         data-bs-placement="right"
                         data-test-id="sidenav-link-company_admin"
                     >
-                        <i class="icon--cog"></i>
-                        <div class="sidenav-icons__item-title">{{ gettext('Company Admin') }}</div>
+                        <span class="sidenav__item-icon">
+                            <i class="icon--cog" role="presentation"></i>
+                        </span>   
+                        <span class="sidenav__item-title">{{ gettext('Company Admin') }}</span>
                     </a>
                 </li>
                 {% endif %}
 
                 {% if is_admin_or_account_manager() %}
-                <li class="sidenav-icons__item  {% if request.endpoint == 'reports.company_reports' %}active{% endif %}">
-                  <a
-                      href="{{ url_for('reports.company_reports') }}"
-                      title="{{ gettext('Reports') }}"
-                      aria-label="{{ gettext('Reports') }}"
-                      role="button"
-                      data-bs-toggle="tooltip"
-                      data-bs-placement="right"
-                      data-test-id="sidenav-link-reports"
-                  >
-                      <i class="icon--report"></i>
-                      <div class="sidenav-icons__item-title">{{ gettext('Reports') }}</div>
-                  </a>
+                <li class="sidenav__item  {% if request.endpoint == 'reports.company_reports' %}active{% endif %}">
+                    <a
+                        href="{{ url_for('reports.company_reports') }}"
+                        title="{{ gettext('Reports') }}"
+                        aria-label="{{ gettext('Reports') }}"
+                        role="button"
+                        data-bs-toggle="tooltip"
+                        data-bs-placement="right"
+                        data-test-id="sidenav-link-reports"
+                    >
+                        <span class="sidenav__item-icon">
+                            <i class="icon--report"></i>
+                        </span>    
+                    
+                        <span class="sidenav__item-title">{{ gettext('Reports') }}</span>
+                    </a>
                 </li>
                 {% endif %}
                 {% for app in settings_apps|sort(attribute='weight') %}{% if loop.first and is_admin() %}
-                <li class="sidenav-icons__item  {% if request.blueprint == 'settings' %}active{% endif %}">
-                  <a
-                      href="{{ url_for('settings.app', app_id=app._id) }}"
-                      title="{{ gettext('Settings') }}"
-                      aria-label="{{ gettext('Settings') }}"
-                      role="button"
-                      data-bs-toggle="tooltip"
-                      data-bs-placement="right"
-                      data-test-id="sidenav-link-settings"
-                  >
-                      <i class="icon--cog"></i>
-                      <div class="sidenav-icons__item-title">{{ gettext('Settings') }}</div>
-                  </a>
+                <li class="sidenav__item  {% if request.blueprint == 'settings' %}active{% endif %}">
+                    <a
+                        href="{{ url_for('settings.app', app_id=app._id) }}"
+                        title="{{ gettext('Settings') }}"
+                        aria-label="{{ gettext('Settings') }}"
+                        role="button"
+                        data-bs-toggle="tooltip"
+                        data-bs-placement="right"
+                        data-test-id="sidenav-link-settings"
+                    >
+                        <span class="sidenav__item-icon">
+                            <i class="icon--cog" role="presentation"></i>
+                        </span>
+                        <span class="sidenav__item-title">{{ gettext('Settings') }}</span>
+                    </a>
                 </li>
                 {% endif %}{% endfor %}
             </ul>
diff --git a/newsroom/templates/sidenav_icon.html b/newsroom/templates/sidenav_icon.html
index 9b575d467..74777a393 100644
--- a/newsroom/templates/sidenav_icon.html
+++ b/newsroom/templates/sidenav_icon.html
@@ -1,23 +1,23 @@
-<li class="sidenav-icons__item {% if request.endpoint == nav.endpoint or request.endpoint in nav.secondary_endpoints %}active{% endif %} {% if nav.badge or nav.url %}badge--top-right{% endif %}">
+<li class="sidenav__item {% if request.endpoint == nav.endpoint or request.endpoint in nav.secondary_endpoints %}active{% endif %} {% if nav.badge or nav.url %}badge--top-right{% endif %}">
     <a href="{{ url_for(nav.endpoint) if nav.endpoint else nav.url }}" title="{{  gettext(nav.name) }}"
-        data-bs-toggle="tooltip"
-        data-bs-placement="right"
-        aria-label="{{  gettext(nav.name) }}"
         data-test-id="sidenav-link-{{ nav.name.lower().replace('/', '_').replace(' ', '_') }}"
         role="button"
         {% if nav.url %}target="_blank"{% endif %}
     >
         {% if nav.badge %}
-        <div id="{{ nav.badge }}" class="sidenav-icons__badge"></div>
+        <span id="{{ nav.badge }}" class="sidenav-icons__badge"></span>
         {% endif %}
-        {% block navurl %}
-        {% if nav.url %}
-        <div class="sidenav-icons__helper-icon">
-            <i class="icon-small--external"></i>
-        </div>
-        {% endif %}
-        {% endblock %}
-        <i class="icon--{{ nav.icon }}"></i>
-        <div class="sidenav-icons__item-title">{{  gettext(nav.name) }}</div>
+
+        <span class="sidenav__item-icon">
+            {% block navurl %}
+            {% if nav.url %}
+            <span class="sidenav__helper-icon">
+                <i class="icon-small--external"></i>
+            </span>
+            {% endif %}
+            {% endblock %}
+            <i class="icon--{{ nav.icon }}"></i>
+        </span>
+        <span class="sidenav__item-title">{{  gettext(nav.name) }}</span>
     </a>
 </li>
\ No newline at end of file

From 3c07ab338553406cc7eb894f6e283cad871caff0 Mon Sep 17 00:00:00 2001
From: Nikola Stojanovic <68916411+dzonidoo@users.noreply.github.com>
Date: Fri, 15 Mar 2024 16:40:08 +0100
Subject: [PATCH 3/7] Implement the new navigation concept for Newshub (#808)

* add navigation

* changes after review

* fix lint

* chages after review
---
 assets/index.ts                      | 31 +++++++++++++++++++++++++++-
 assets/styles/sidenav.scss           |  3 ++-
 newsroom/templates/base_layout.html  |  8 ++++++-
 newsroom/templates/sidenav_icon.html |  4 ++--
 4 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/assets/index.ts b/assets/index.ts
index 114ad9bf8..0282e0a7c 100644
--- a/assets/index.ts
+++ b/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'));
+    }
+}
diff --git a/assets/styles/sidenav.scss b/assets/styles/sidenav.scss
index c1095dba9..6941fa8c8 100644
--- 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 @@
         }
 
     }
-}
\ No newline at end of file
+}
diff --git a/newsroom/templates/base_layout.html b/newsroom/templates/base_layout.html
index 9c7c69c4b..d180cbd3a 100644
--- a/newsroom/templates/base_layout.html
+++ b/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) %}
diff --git a/newsroom/templates/sidenav_icon.html b/newsroom/templates/sidenav_icon.html
index 74777a393..e74c05147 100644
--- 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>
\ No newline at end of file
+</li>

From b5014b0012e63774f52f2f73a96af81539f0d4c9 Mon Sep 17 00:00:00 2001
From: fritzSF <vladimir.stefanovic@sourcefabric.org>
Date: Mon, 12 Feb 2024 15:49:21 +0100
Subject: [PATCH 4/7] New navigation (#760)

---
 assets/styles/app.scss                |   1 +
 assets/styles/breakpoints.scss        |   6 +
 assets/styles/custom-display.scss     |   4 +
 assets/styles/custom-variables.scss   |  22 +-
 assets/styles/index.scss              | 259 +------------------
 assets/styles/sidenav.scss            | 355 ++++++++++++++++++++++++++
 assets/ui/components/ToolTip.tsx      |   4 +-
 design_app/src/components/SideNav.jsx | 100 +++++---
 design_app/src/index.js               |   4 +-
 newsroom/templates/base_layout.html   |  52 ++--
 newsroom/templates/sidenav_icon.html  |  28 +-
 11 files changed, 500 insertions(+), 335 deletions(-)
 create mode 100644 assets/styles/sidenav.scss

diff --git a/assets/styles/app.scss b/assets/styles/app.scss
index d4270979d..4d9a0dba5 100644
--- a/assets/styles/app.scss
+++ b/assets/styles/app.scss
@@ -2,6 +2,7 @@
 @import './color-functions.scss';
 @import './custom.scss'; // Bootstrap customized
 @import './index.scss';
+@import './sidenav.scss';
 @import './article-list.scss';
 @import './icon-font.scss';
 @import './icon-font-small.scss';
diff --git a/assets/styles/breakpoints.scss b/assets/styles/breakpoints.scss
index 755dc9f1b..532beb73b 100644
--- a/assets/styles/breakpoints.scss
+++ b/assets/styles/breakpoints.scss
@@ -61,6 +61,12 @@
     }
 }
 
+@mixin large_phone {
+    @media only screen and (max-width: 768px) {
+        @content;
+    }
+}
+
 @mixin tablet {
     @media only screen and (orientation: portrait) and (min-width: 576px) and (max-width: 1439px), (orientation: landscape) and (min-width: 992px) and (max-width: 1439px) {
         @content;
diff --git a/assets/styles/custom-display.scss b/assets/styles/custom-display.scss
index d6129a07c..a63895b73 100644
--- a/assets/styles/custom-display.scss
+++ b/assets/styles/custom-display.scss
@@ -29,6 +29,10 @@
     .d-phone-none {display: none;}
     .d-phone-block {display: block;}
 }
+@include large_phone {
+    .d-phone-none {display: none;}
+    .d-phone-block {display: block;}
+}
 
 @include tablet {
     .d-tablet-none {display: none;}
diff --git a/assets/styles/custom-variables.scss b/assets/styles/custom-variables.scss
index 847880db0..5ab96ce49 100644
--- a/assets/styles/custom-variables.scss
+++ b/assets/styles/custom-variables.scss
@@ -404,6 +404,7 @@ $container-max-widths: (
     --sidenav-color-bg:                     var(--color-primary);
     --sidenav-color-item-bg:                transparent;
     --sidenav-color-item-fg:                hsla(0, 0%, 100%, 1);
+    --sidenav-color-item-bg--hover:         hsla(0, 0%, 0%, 0.16);
     --sidenav-color-item-bg--active:        hsla(0, 0%, 100%, 1);
     --sidenav-color-item-fg--active:        var(--color-primary);
     --sidenav-color-badge-bg:               hsla(0, 0%, 16%, 1);
@@ -411,18 +412,29 @@ $container-max-widths: (
     --sidenav-color-badge-fg:               hsla(0, 0%, 98%, 1);
     --sidenav-color-badge-fg--active:       hsla(0, 0%, 98%, 1);
     --sidenav-color-badge-outline--active:  var(--sidenav-color-item-bg--active);
+    --sidenav-item-size:                    var(--space--5);
+    --sidenav-item-font-size:               0.875rem;
     --sidenav-item-badge-size:              1.25rem;
     --sidenav-item-badge-font-size:         0.6875rem;
-    --sidenav-item-helper-icon-size:        1.25rem;
+    --sidenav-item-helper-icon-size:        1.125rem;
     --sidenav-item-helper-icon-fg:          var(--sidenav-color-bg);
     --sidenav-item-border-radius:           var(--border-radius--s);
     --separator-dot-size:                   3px;
     --separator-dot-color-bg:               var(--sidenav-color-item-fg);
     // Title and size options
-    --sidenav-item-title-display:           block; // set to none to hide the title
-    --sidenav-size-width:                   80px; // width of the sidenav on desktop
-    --sidenav-item-gap:                     8px; // left and right spacing between item and the bar on desktop
-    --sidenav-item-width:                   calc(var(--sidenav-size-width) - var(--sidenav-item-gap)); // width of the sidenav item on desktop
+    //--sidenav-item-title-display:           block; // set to none to hide the title
+    // --sidenav-size-width:                   56px; // width of the sidenav on desktop
+    // --sidenav-item-gap:                     8px; // left and right spacing between item and the bar on desktop
+    // --sidenav-item-width:                   calc(var(--sidenav-size-width) - var(--sidenav-item-gap)); // width of the sidenav item on desktop
+    --sidenav-item-radius:                  var(--border-radius--s);
+    --sidenav-size:                         3.5rem;
+    --sidenav-size-overlay:                 14rem;
+    --sidenav-size-pinned:                  14rem;
+    --sidenav-shadow-overlay:               4px 0 8px hsla(0, 0%, 0%, 0.24);
+    --sidenav-pin-button-color-bg-default:  hsla(0, 0%, 16%, 0.2);
+    --sidenav-pin-button-color-bg-hover:    hsla(0, 0%, 100%, 0.8);
+    --sidenav-pin-button-color-fg-default:  hsla(0, 0%, 100%, 1);
+    --sidenav-pin-button-color-fg-hover:    var(--color-primary);
 
     // COMPONENT: PROFILE MODAL
     --profile-header-height: 56px;
diff --git a/assets/styles/index.scss b/assets/styles/index.scss
index a89fc40be..e594fefc4 100644
--- a/assets/styles/index.scss
+++ b/assets/styles/index.scss
@@ -363,259 +363,6 @@ body.print {
     overflow: auto;
 }
 
-.sidenav {
-    flex: 0 0 var(--navbar-height--mobile);
-    background-color: var(--sidenav-color-bg);
-    position: relative;
-    padding: 0 4px;
-    display: flex;
-    overflow-y: auto;
-
-    &:dir(rtl) {
-        box-shadow: inset 3px 0px 8px rgba(0, 0, 0, 0.1);
-    }
-
-    @include phone {
-        padding: 0 2px;
-        overflow-y: hidden;
-    }
-    @include md {
-        flex: 0 0 var(--sidenav-size-width);
-    }
-}
-
-.sidenav-icons {
-    display: flex;
-    flex-direction: row;
-    margin: 0 auto;
-    gap: var(--space--0-5);
-    width: 100vw;
-    padding: 0;
-    list-style-type: none;
-
-    @include md {
-        padding-block-start: var(--space--1);
-        flex-direction: column;
-        overflow: visible;
-        width: auto;
-    }
-
-
-    .sidenav-icons__item {
-        margin: 4px 0;
-        align-self: stretch;
-        position: relative;
-        display: flex !important;
-        justify-content: center;
-        a {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex-direction: column;
-            gap: 2px;
-            &:hover {
-                text-decoration: none;
-            }
-            @include sm {
-                gap: 4px;
-            }
-
-
-        }
-        a, span {
-            border-radius: var(--sidenav-item-border-radius);
-            text-decoration: none;
-            width: 40px;
-            height: calc(var(--navbar-height--mobile) - var(--space--1));
-            min-height: auto;
-            padding: 2px 0;
-            line-height: var(--navbar-height--mobile);
-            text-align: center;
-            background-color: var(--sidenav-color-item-bg);
-
-            @include md {
-                width: var(--sidenav-item-width);
-                min-height: var(--navbar-height);
-                line-height: var(--navbar-height);
-                height: auto;
-            }
-            &:focus {
-                outline: none;
-            }
-            &:focus-visible {
-                box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 3px 4px rgba(255, 255, 255, .7);
-            }
-            i.icon--more {
-                opacity: .3;
-                @include sm {
-                    transform: rotate(90deg);
-                }
-            }
-        }
-        span {
-            display: block;
-            min-height: 34px;
-            line-height: 34px;
-            @include phone {
-                width: 20px;
-                height: 24px;
-                line-height: 50px;
-            }
-        }
-        .sidenav-icons__item-title {
-            display: none;
-            color: var(--sidenav-color-item-fg);
-            font-size: 10px;
-            font-weight: 700;
-            line-height: 1;
-            letter-spacing: 0.3px;
-            text-transform: uppercase;
-            overflow-wrap: break-word;
-            align-self: stretch;
-            @include md {
-                display: var(--sidenav-item-title-display);
-            }
-        }
-        .badge {
-            background-color: var(--sidenav-color-badge-bg);
-            color: var(--sidenav-color-badge-fg);
-            outline: 2px solid var(--sidenav-color-bg);
-            &.badge--icon {
-                background-color: var(--sidenav-color-item-bg--active);
-                [class^="icon-small--"],
-                [class^="icon-small--"] {
-                    color: var(--sidenav-color-item-fg--active) !important;
-                }
-            }
-        }
-        .sidenav-icons__badge,
-        .sidenav-icons__helper-icon {
-            position: absolute;
-            font-size: var(--sidenav-item-badge-font-size);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            border-radius: var(--border-radius--full);
-            background-color: var(--sidenav-color-badge-bg);
-            color: var(--sidenav-color-badge-fg);
-            outline: 2px solid var(--sidenav-color-bg);
-        }
-        .sidenav-icons__badge {
-            height: var(--sidenav-item-badge-size);
-            min-width: var(--sidenav-item-badge-size);
-            font-size: var(--sidenav-item-badge-font-size);
-            font-weight: 700;
-            line-height: 1;
-            inset-block-start: 3px;
-            inset-inline-end: 3px;
-            background-color: var(--sidenav-color-badge-bg);
-            color: var(--sidenav-color-badge-fg);
-            padding: 0.35em 0.6em;
-            &:empty {
-                display: none;
-            }
-            @include phone {
-                inset-block-start: 2px;
-                inset-inline-end: -4px;
-            }
-        }
-
-        .sidenav-icons__helper-icon {
-            height: var(--sidenav-item-helper-icon-size);
-            width: var(--sidenav-item-helper-icon-size);
-            background-color: var(--sidenav-color-item-fg);
-            color: var(--sidenav-item-helper-icon-fg);
-            padding: 0;
-            inset-block-start: 2px;
-            inset-inline-end: 8px;
-            [class^="icon-small--"],
-            [class^="icon-small--"] {
-                color: var(--sidenav-item-helper-icon-fg) !important;
-            }
-            @include phone {
-                inset-block-start: 2px;
-                inset-inline-end: -4px;
-            }
-        }
-
-        &.active {
-            .sidenav-icons__badge {
-                outline: 2px solid var(--sidenav-color-badge-outline--active);
-                background-color: var(--sidenav-color-badge-bg--active);
-                color: var(--sidenav-color-badge-fg--active);
-            }
-
-            a {
-                background-color: var(--sidenav-color-item-bg--active);
-                border-radius: 4px;
-                text-decoration: none;
-            }
-            i, .sidenav-icons__item-title {
-                color: var(--sidenav-color-item-fg--active);
-            }
-        }
-        .badge--icon {
-            inset-block-start: 2px;
-            inset-inline-end: 7px;
-        }
-        [class^="icon--"], [class*=" icon--"] {
-            color: var(--sidenav-color-item-fg);
-        }
-        &--report {
-            position: absolute;
-            inset-block-end: 0;
-            inset-inline-start: auto;
-            inset-inline-end: 50px;
-            @include sm {
-                inset-inline-start: auto;
-                inset-inline-end: auto;
-                inset-block-end: 56px;
-            }
-        }
-        &--admin {
-            position: absolute;
-            inset-block-end: 0;
-            inset-inline-start: auto;
-            inset-inline-end: 4px;
-
-            @include sm {
-                inset-inline-end: auto;
-            }
-        }
-    }
-    .sidenav-icons__stretch-separator {
-        flex-grow: 1;
-        align-self: stretch;
-        justify-self: stretch;
-        margin: auto;
-    }
-    .sidenav-icons__separator {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
-        flex-grow: 0;
-        flex-shrink: 0;
-        gap: calc(var(--separator-dot-size) * 1);
-        margin-block: auto;
-        margin-inline: var(--space--0-5);
-        .separator__dot {
-            border-radius: var(--border-radius--full);
-            display: block;
-            height: var(--separator-dot-size);
-            width: var(--separator-dot-size);
-            background-color: var(--separator-dot-color-bg);
-            opacity: 0.4;
-        }
-        @include md {
-            flex-direction: row;
-            margin-block: var(--space--1-5);
-            gap: calc(var(--separator-dot-size) * 1.5);
-        }
-
-    }
-}
-
 .content-header {
     position: relative;
 }
@@ -624,7 +371,7 @@ body.print {
     position: relative;
 }
 
-.divider:after{
+.divider:after {
     content: "";
     position: absolute;
     height: 0px;
@@ -4415,3 +4162,7 @@ article.list {
     color: var(--color-text--muted);
     font-size: inherit;
 }
+
+.tooltip {
+    pointer-events: none;
+}
diff --git a/assets/styles/sidenav.scss b/assets/styles/sidenav.scss
new file mode 100644
index 000000000..c1095dba9
--- /dev/null
+++ b/assets/styles/sidenav.scss
@@ -0,0 +1,355 @@
+.nav-block {
+    --pin-button-inset-end: 3.125rem;
+    --sidenav-transition: .3s ease;
+    background-color: var(--sidenav-color-bg);
+    position: relative;
+    overflow: visible;
+    z-index: 200;
+    transition: all var(--sidenav-transition);
+    flex: 0 0 var(--sidenav-size);
+
+    &:dir(rtl) {
+        box-shadow: inset 3px 0px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    @include large_phone {
+        padding: 0 2px;    
+        overflow-y: hidden;
+        flex: 0 0 var(--navbar-height--mobile);
+
+        .sidenav {
+            flex-direction: row;
+            padding-block-start: var(--space--0-5);
+            padding-block-end: 0 ;
+            padding-inline-start: var(--space--0-5);
+            padding-inline-end: 0 !important;
+            gap: var(--space--0-5);
+            height: var(--navbar-height--mobile);
+            overflow-x: auto;
+            position: static;
+            width: 100% !important;
+            .sidenav__item {
+                position: relative;
+                height: var(--sidenav-item-size);
+                
+                a, .sidenav__item-button {
+                    height: var(--sidenav-item-size);
+                    width: var(--sidenav-item-size);
+                    gap: 0;
+                    flex-grow: 0;
+                    flex-shrink: 0;
+                    flex-direction: column;
+                }
+                .sidenav__badge {
+                    inset-block-start: -2px;
+                    inset-inline-end: -5px;
+                }
+                .sidenav__helper-icon {
+                    inset-block-start: 0;
+                    inset-inline-end: 0;
+                }
+                .sidenav__item-title {
+                    position: absolute;
+                    opacity: 0 !important;
+                    width: 0 !important;
+                    inset-block-start: -1000px;
+                    font-size: 0.1px;
+                    line-height: 1;
+                    flex-grow: 0;
+                    flex-shrink: 1;
+                }
+            }
+            .nav-block__pin-button {
+                display: none !important;
+            }
+        }
+    }
+
+
+    &.nav-block--pinned {
+        flex: 0 0 var(--sidenav-size-pinned);
+        padding-inline-end: var(--space--1-5);
+        .sidenav {
+            width: 100%;
+            box-shadow: none;
+            padding-inline-end: var(--space--1-5);
+            .sidenav__item-title {
+                opacity: 1;
+                width: 100%;
+                padding-inline-end: var(--space--2);
+            }
+            .nav-block__pin-button {
+                transform: translateX(calc(var(--sidenav-size-pinned) - var(--pin-button-inset-end)));
+                [class^="icon--"], [class*=" icon--"] {
+                    transform: rotate(180deg);
+                }
+            }
+        }
+        @include large_phone {
+            flex: 0 0 var(--navbar-height--mobile) !important;
+            padding-inline-end: 0;
+            .sidenav {
+                height: var(--navbar-height--mobile);
+            }
+        }
+    }
+}
+
+.sidenav {
+    z-index: 1;
+    padding: 0;
+    padding-block-start: var(--space--5);
+    padding-block-end: var(--space--2);
+    padding-inline: var(--space--1);
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    gap: var(--space--1);
+    list-style-type: none;
+    background-color: var(--sidenav-color-bg);
+
+    position: absolute;
+    z-index: 100;
+    inset-block: 0;
+    inset-inline-start: 0;
+
+    width: var(--sidenav-size);
+    min-width: var(--sidenav-size);
+    transition: all var(--sidenav-transition);
+    overflow-y: auto;
+
+    .sidenav__item-icon {
+        --icon-block-radius: var(--sidenav-item-radius);
+        --icon-block-size: var(--sidenav-item-size);
+        position: relative;
+        background-color: transparent;
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: var(--icon-block-radius);
+        height: var(--icon-block-size);
+        width: var(--icon-block-size);
+        transition: all var(--sidenav-transition);
+    }
+
+    .sidenav__item-title {
+        opacity: 0;
+        width: 0;
+        color: var(--sidenav-color-item-fg);
+        font-size: var(--sidenav-item-font-size);
+        line-height: 1.1;
+        font-weight: 400;
+        overflow-wrap: break-word;
+        flex-grow: 1;
+        flex-shrink: 1;
+        transition: all var(--sidenav-transition);
+        overflow: hidden !important;
+        white-space: nowrap;
+    }
+
+    .nav-block__pin-button {
+        --pin-button-size: 1.5rem;
+        background-color: var(--sidenav-pin-button-color-bg-default);
+        height: var(--pin-button-size);
+        width: var(--pin-button-size);
+        border-radius: var(--border-radius--full);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 2;
+        border: none;
+        opacity: 0.6;
+        position: absolute;
+        inset-block-start: var(--space--1-5);
+        inset-inline-start: var(--space--2);
+        transform: translateX(0);
+        transition: all 0.5s ease;
+
+        [class^="icon--"], [class*=" icon--"] {
+            --icon-size: 18px;
+            color: var(--sidenav-pin-button-color-fg-default);
+        }
+
+        &:hover {
+            background-color: var(--sidenav-pin-button-color-bg-hover);
+            opacity: 1;
+            [class^="icon--"], [class*=" icon--"] {
+                color: var(--sidenav-pin-button-color-fg-hover);
+            }
+        }
+        &:active {
+            border: 2px solid var(--sidenav-color-bg);
+        }
+        &:focus {
+            outline: none;
+        }
+        &:focus-visible {
+            box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, 0.4), 0 0 2px 3px hsla(0, 0%, 100%, 0.5);
+        }
+    }
+
+    &:hover {
+        width: var(--sidenav-size-overlay);
+        box-shadow: var(--sidenav-shadow-overlay);
+        padding-inline-end: var(--space--1-5);
+        .sidenav__item-title {
+            opacity: 1;
+            width: 100%;
+            padding-inline-end: var(--space--3);
+        }
+
+        .nav-block__pin-button {
+            opacity: 1;
+            transform: translateX(calc(var(--sidenav-size-overlay) - var(--pin-button-inset-end)));
+        }
+    }
+
+    .sidenav__item {
+        position: relative;
+        border-radius: var(--sidenav-item-border-radius);
+        transition: all var(--sidenav-transition);
+        &:hover {
+            background-color: var(--sidenav-color-item-bg--hover);
+        }
+
+        a,
+        .sidenav__item-button {
+            border-radius: var(--sidenav-item-border-radius);
+            text-decoration: none;
+            height: var(--sidenav-item-size);
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            min-height: auto;
+            gap: var(--space--1);
+            flex-grow: 1;
+            flex-shrink: 1;
+            &:hover {
+                text-decoration: none;
+            }
+            &:focus {
+                outline: none;
+            }
+            &:focus-visible {
+                box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 3px 4px rgba(255, 255, 255, .7);
+            }
+        }
+
+        .badge {
+            background-color: var(--sidenav-color-badge-bg);
+            color: var(--sidenav-color-badge-fg);
+            outline: 2px solid var(--sidenav-color-bg);
+            &.badge--icon {
+                background-color: var(--sidenav-color-item-bg--active);
+                [class^="icon-small--"],
+                [class^="icon-small--"] {
+                    color: var(--sidenav-color-item-fg--active) !important;
+                }
+            }
+        }
+        .sidenav__badge,
+        .sidenav__helper-icon {
+            position: absolute;
+            font-size: var(--sidenav-item-badge-font-size);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: var(--border-radius--full);
+            background-color: var(--sidenav-color-badge-bg);
+            color: var(--sidenav-color-badge-fg);
+            outline: 2px solid var(--sidenav-color-bg);
+            z-index: 1;
+        }
+        .sidenav__badge {
+            height: var(--sidenav-item-badge-size);
+            min-width: var(--sidenav-item-badge-size);
+            font-size: var(--sidenav-item-badge-font-size);
+            font-weight: 700;
+            line-height: 1;
+            inset-block-start: -7px;
+            inset-inline-end: -4px;
+            background-color: var(--sidenav-color-badge-bg);
+            color: var(--sidenav-color-badge-fg);
+            padding: 0.35em 0.6em;
+            &:empty {
+                display: none;
+            }
+        }
+
+        .sidenav__helper-icon {
+            height: var(--sidenav-item-helper-icon-size);
+            width: var(--sidenav-item-helper-icon-size);
+            background-color: var(--sidenav-color-item-fg);
+            color: var(--sidenav-item-helper-icon-fg);
+            padding: 0;
+            inset-block-start: 0;
+            inset-inline-end: 0;
+            [class^="icon-small--"],
+            [class^="icon-small--"] {
+                color: var(--sidenav-item-helper-icon-fg) !important;
+            }
+        }
+
+        &.active {
+            .sidenav__badge {
+                outline: none;
+                box-shadow: -2px 4px 0 -2px var(--sidenav-color-badge-outline--active);
+                background-color: var(--sidenav-color-badge-bg--active);
+                color: var(--sidenav-color-badge-fg--active);
+            }
+
+            a {
+                background-color: var(--sidenav-color-item-bg--active);
+                border-radius: 4px;
+                text-decoration: none;
+            }
+            [class^="icon--"],
+            [class*=" icon--"],
+            .sidenav__item-title {
+                color: var(--sidenav-color-item-fg--active);
+            }
+        }
+        .badge--icon {
+            inset-block-start: 2px;
+            inset-inline-end: 7px;
+        }
+        [class^="icon--"], [class*=" icon--"] {
+            color: var(--sidenav-color-item-fg);
+        }
+    }
+
+
+    .sidenav__stretch-separator {
+        flex-grow: 1;
+        align-self: stretch;
+        justify-self: stretch;
+        margin: auto;
+    }
+    .sidenav__separator {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        flex-grow: 0;
+        flex-shrink: 0;
+        gap: calc(var(--separator-dot-size) * 1);
+        margin-block: auto;
+        margin-inline: var(--space--0-5);
+        .separator__dot {
+            border-radius: var(--border-radius--full);
+            display: block;
+            height: var(--separator-dot-size);
+            width: var(--separator-dot-size);
+            background-color: var(--separator-dot-color-bg);
+            opacity: 0.4;
+        }
+        @include md {
+            flex-direction: row;
+            margin-block: var(--space--1-5);
+            gap: calc(var(--separator-dot-size) * 1.5);
+        }
+
+    }
+}
\ No newline at end of file
diff --git a/assets/ui/components/ToolTip.tsx b/assets/ui/components/ToolTip.tsx
index 653e64610..17e69e50f 100644
--- a/assets/ui/components/ToolTip.tsx
+++ b/assets/ui/components/ToolTip.tsx
@@ -31,7 +31,8 @@ export class ToolTip extends React.PureComponent<any, any> {
             } else {
                 this.tooltip = new Tooltip(child, {
                     trigger: 'hover',
-                    placement: this.props.placement || 'top'
+                    placement: this.props.placement || 'top',
+                    title: this.props.title,
                 });
             }
         }
@@ -58,4 +59,5 @@ export class ToolTip extends React.PureComponent<any, any> {
 ToolTip.propTypes = {
     children: PropTypes.node.isRequired,
     placement: PropTypes.string,
+    title: PropTypes.string,
 };
diff --git a/design_app/src/components/SideNav.jsx b/design_app/src/components/SideNav.jsx
index 42b0a8b61..3e10b6840 100644
--- a/design_app/src/components/SideNav.jsx
+++ b/design_app/src/components/SideNav.jsx
@@ -1,81 +1,109 @@
-import React from 'react';
+import React, {useState} from 'react';
+import {ToolTip} from 'ui/components/ToolTip';
 
 function SideNav() {
+    const [isNavExpanded, setIsNavExpanded] = useState(false);
+    const handleNavExpanded = event => {
+        setIsNavExpanded(current => !current);
+    }
+
     return (
-    
-        <nav className="sidenav">
+        <nav className={`nav-block ${isNavExpanded ? 'nav-block--pinned' : ''}`}>
             <h3 className="a11y-only">Side Navigation</h3>
-            <ul className="sidenav-icons">           
-                <li className="sidenav-icons__item">
+            <ul className="sidenav">
+                <li className='d-phone-none'>
+                    <ToolTip placement="left" title={isNavExpanded ? "Collapse" : "Expand"}>
+                        <button className='nav-block__pin-button' aria-label={isNavExpanded ? "Collapse" : "Expand"} onClick={handleNavExpanded}>
+                            <i className="icon--arrow-end" role='presentation'></i>
+                        </button>
+                    </ToolTip>
+                </li>          
+                <li className="sidenav__item">
                     <a href="/" title="" data-toggle="tooltip" data-placement="right" aria-label="Home" role="button" data-original-title="Home">
-                        <i className="icon--home"></i>
-                        <div className="sidenav-icons__item-title">Home</div>
+                        <span class="sidenav__item-icon">
+                            <i className="icon--home" role='presentation'></i>
+                        </span>
+                        <span className="sidenav__item-title">Home</span>
                     </a>
                 </li>
-                <li className="sidenav-icons__item active">
+                <li className="sidenav__item active">
                     <a href="/wire" title="" data-toggle="tooltip" data-placement="right" aria-label="Wire" role="button" data-original-title="Wire">
-                        <div id="saved-items-count" className="sidenav-icons__badge">80</div>
-                        <i className="icon--text"></i>
-                        <div className="sidenav-icons__item-title">Wire</div>
+                        <span id="saved-items-count" className="sidenav__badge">80</span>
+                        <span class="sidenav__item-icon">
+                            <i className="icon--text" role='presentation'></i>
+                        </span>
+                        <span className="sidenav__item-title">Wire</span>
                     </a>
                 </li>
-                <li className="sidenav-icons__item">
+                <li className="sidenav__item">
                     <a href="/agenda" title="" data-toggle="tooltip" data-placement="right" aria-label="Agenda" role="button" data-original-title="Agenda">
-                        <i className="icon--calendar"></i>
-                        <div className="sidenav-icons__item-title">Agenda</div>
+                        <span class="sidenav__item-icon">
+                            <i className="icon--calendar" role='presentation'></i>
+                        </span>
+                        <span className="sidenav__item-title">Agenda</span>
                     </a>
                 </li>
-                <li className="sidenav-icons__item">
+                <li className="sidenav__item">
                     <a href="/monitoring" title="" data-toggle="tooltip" data-placement="right" aria-label="Monitoring" role="button" data-original-title="Monitoring">
-                        <i className="icon--monitoring"></i>
-                        <div className="sidenav-icons__item-title">Monitoring</div>
+                        <span class="sidenav__item-icon">
+                            <i className="icon--monitoring" role='presentation'></i>
+                        </span>
+                        <span className="sidenav__item-title">Monitoring</span>
                     </a>
                 </li>
 
-                <li className="sidenav-icons__separator">
+                <li className="sidenav__separator" role='presentation'>
                     <span className="separator__dot" aria-hidden="true"></span>
                     <span className="separator__dot" aria-hidden="true"></span>
                     <span className="separator__dot" aria-hidden="true"></span>
                     <span className="separator__dot" aria-hidden="true"></span>
                 </li>
 
-                <li className="sidenav-icons__item">
+                <li className="sidenav__item">
                     <a href="/bookmarks_wire" title="" data-toggle="tooltip" data-placement="right" aria-label="Saved / Watched Items" role="button" data-original-title="Saved / Watched">
-                        <div id="saved-items-count" className="sidenav-icons__badge">89</div>
-                        <i className="icon--bookmark"></i>
-                        <div className="sidenav-icons__item-title">Saved / Watched</div>
+                        <span id="saved-items-count" className="sidenav__badge">89</span>
+                        <span class="sidenav__item-icon">
+                           <i className="icon--bookmark" role='presentation'></i> 
+                        </span>
+                        <span className="sidenav__item-title">Saved / Watched</span>
                     </a>
                 </li>
 
-                <li className="sidenav-icons__separator">
+                <li className="sidenav__separator" role='presentation'>
                     <span className="separator__dot" aria-hidden="true"></span>
                     <span className="separator__dot" aria-hidden="true"></span>
                     <span className="separator__dot" aria-hidden="true"></span>
                     <span className="separator__dot" aria-hidden="true"></span>
                 </li>
 
-                <li className="sidenav-icons__item">
+                <li className="sidenav__item">
                     <a href="https://www.cpimages.com/" title="" data-toggle="tooltip" data-placement="right" aria-label="CP Images" target="_blank" data-original-title="CP Images">      
-                        <div className="sidenav-icons__helper-icon">
-                            <i className="icon-small--external"></i>
-                        </div>        
-                        <i className="icon--photo"></i>
-                        <div className="sidenav-icons__item-title">CP Images</div>
+                        <span class="sidenav__item-icon">
+                            <span className="sidenav__helper-icon">
+                                <i className="icon-small--external" role='presentation'></i>
+                            </span>
+                            <i className="icon--photo"></i>
+                        </span>
+                        <span className="sidenav__item-title">CP Images</span>
                     </a>                    
                 </li>
 
-                <li className="sidenav-icons__stretch-separator"></li>
+                <li className="sidenav__stretch-separator" role='presentation'></li>
 
-                <li className="sidenav-icons__item">
+                <li className="sidenav__item">
                     <a href="/reports/company_reports" title="" aria-label="Reports" role="button" data-toggle="tooltip" data-placement="right" data-original-title="Reports">
-                        <i className="icon--report"></i>
-                        <div className="sidenav-icons__item-title">Reports</div>
+                        <span className="sidenav__item-icon">
+                            <i className="icon--report" role='presentation'></i>
+                        </span>
+                        <span className="sidenav__item-title">Reports</span>
                     </a>
                 </li>            
-                <li className="sidenav-icons__item">
+                <li className="sidenav__item">
                     <a href="/settings/companies" title="" aria-label="Settings" role="button" data-toggle="tooltip" data-placement="right" data-original-title="Settings">
-                        <i className="icon--cog"></i>
-                        <div className="sidenav-icons__item-title">Settings</div>
+                        <span className="sidenav__item-icon">
+                            <i className="icon--cog" role='presentation'></i>
+                        </span>
+                        <span className="sidenav__item-title">Settings</span>
                     </a>
                 </li>  
             </ul>
diff --git a/design_app/src/index.js b/design_app/src/index.js
index d0e8fed5a..cb4c02333 100644
--- a/design_app/src/index.js
+++ b/design_app/src/index.js
@@ -7,7 +7,7 @@ import '../../assets/styles/app.scss'; // Newshub - import of everything
 import './assets/styles/_design_external-style.scss'; // Static file
 //import './assets/styles/theme.css'; // CP Theme OLD
 
-import './assets/styles/theme_News-Pro.css'; // CP News Pro Theme
+//import './assets/styles/theme_News-Pro.css'; // CP News Pro Theme
 //import './assets/styles/theme_Command-News.css'; // CP Command News Theme
 
 ReactDOM.render(
@@ -15,7 +15,7 @@ ReactDOM.render(
   document.getElementById('root'),
 );
 
-// Check if hot reloading is enable. If it is, changes won't reload the page.
+// Check if hot reloading is enable. If it is, changes will not reload the page.
 // This is related to webpack-dev-server and works on development only.
 if (module.hot) {
   module.hot.accept();
diff --git a/newsroom/templates/base_layout.html b/newsroom/templates/base_layout.html
index eedd2dd03..45271206c 100644
--- a/newsroom/templates/base_layout.html
+++ b/newsroom/templates/base_layout.html
@@ -73,15 +73,15 @@ <h3 class="a11y-only">{{ gettext('Main Navigation Bar') }}</h3>
 
     <div class="contentWrap {% block custom_content_style %}{% endblock %}">
         {% if session.get('name') %}
-        <nav class="sidenav">
+        <nav class="{`nav-block ${isNavExpanded ? 'nav-block--pinned' : ''}`}">
             <h3 class="a11y-only">{{ gettext('Side Navigation') }}</h3>
-            <ul class="sidenav-icons">
+            <ul class="sidenav">
 
                 {% block default_navs %}
                     {% for group in range(0, 10) %}
                         {% for nav in sidenavs(request.blueprint)|selectattr("group", "equalto", group) %}
                         {% if group > 0 and loop.first and loop.length %}
-                        <li class="sidenav-icons__separator">
+                        <li class="sidenav__separator" role="presentation">
                             <span class="separator__dot" aria-hidden="true"></span>
                             <span class="separator__dot" aria-hidden="true"></span>
                             <span class="separator__dot" aria-hidden="true"></span>
@@ -94,10 +94,10 @@ <h3 class="a11y-only">{{ gettext('Side Navigation') }}</h3>
                     {% endfor %}
                 {%  endblock %}
 
-                <li class="sidenav-icons__stretch-separator"></li>
+                <li class="sidenav__stretch-separator" role="presentation"></li>
 
                 {% if is_company_admin() %}
-                <li class="sidenav-icons__item  {% if request.endpoint == 'company_admin.index' %}active{% endif %}">
+                <li class="sidenav__item  {% if request.endpoint == 'company_admin.index' %}active{% endif %}">
                     <a
                         href="{{ url_for('company_admin.index') }}"
                         title="{{ gettext('Company Admin') }}"
@@ -107,14 +107,16 @@ <h3 class="a11y-only">{{ gettext('Side Navigation') }}</h3>
                         data-bs-placement="right"
                         data-test-id="sidenav-link-company_admin"
                     >
-                        <i class="icon--cog"></i>
-                        <div class="sidenav-icons__item-title">{{ gettext('Company Admin') }}</div>
+                        <span class="sidenav__item-icon">
+                            <i class="icon--cog" role="presentation"></i>
+                        </span>   
+                        <span class="sidenav__item-title">{{ gettext('Company Admin') }}</span>
                     </a>
                 </li>
                 {% endif %}
 
                 {% if is_admin_manager_or_company_admin() %}
-                <li class="sidenav-icons__item  {% if request.endpoint == 'reports.company_reports' %}active{% endif %}">
+                <li class="sidenav__item  {% if request.endpoint == 'reports.company_reports' %}active{% endif %}">
                   <a
                       href="{{ url_for('reports.company_reports') }}"
                       title="{{ gettext('Reports') }}"
@@ -124,25 +126,29 @@ <h3 class="a11y-only">{{ gettext('Side Navigation') }}</h3>
                       data-bs-placement="right"
                       data-test-id="sidenav-link-reports"
                   >
-                      <i class="icon--report"></i>
-                      <div class="sidenav-icons__item-title">{{ gettext('Reports') }}</div>
+                    <span class="sidenav__item-icon">
+                        <i class="icon--report"></i>
+                    </span>
+                    <span class="sidenav__item-title">{{ gettext('Reports') }}</span>
                   </a>
                 </li>
                 {% endif %}
                 {% for app in settings_apps|sort(attribute='weight') %}{% if loop.first and is_admin() %}
-                <li class="sidenav-icons__item  {% if request.blueprint == 'settings' %}active{% endif %}">
-                  <a
-                      href="{{ url_for('settings.app', app_id=app._id) }}"
-                      title="{{ gettext('Settings') }}"
-                      aria-label="{{ gettext('Settings') }}"
-                      role="button"
-                      data-bs-toggle="tooltip"
-                      data-bs-placement="right"
-                      data-test-id="sidenav-link-settings"
-                  >
-                      <i class="icon--cog"></i>
-                      <div class="sidenav-icons__item-title">{{ gettext('Settings') }}</div>
-                  </a>
+                <li class="sidenav__item  {% if request.blueprint == 'settings' %}active{% endif %}">
+                    <a
+                        href="{{ url_for('settings.app', app_id=app._id) }}"
+                        title="{{ gettext('Settings') }}"
+                        aria-label="{{ gettext('Settings') }}"
+                        role="button"
+                        data-bs-toggle="tooltip"
+                        data-bs-placement="right"
+                        data-test-id="sidenav-link-settings"
+                    >
+                        <span class="sidenav__item-icon">
+                            <i class="icon--cog" role="presentation"></i>
+                        </span>
+                        <span class="sidenav__item-title">{{ gettext('Settings') }}</span>
+                    </a>
                 </li>
                 {% endif %}{% endfor %}
             </ul>
diff --git a/newsroom/templates/sidenav_icon.html b/newsroom/templates/sidenav_icon.html
index 9b575d467..74777a393 100644
--- a/newsroom/templates/sidenav_icon.html
+++ b/newsroom/templates/sidenav_icon.html
@@ -1,23 +1,23 @@
-<li class="sidenav-icons__item {% if request.endpoint == nav.endpoint or request.endpoint in nav.secondary_endpoints %}active{% endif %} {% if nav.badge or nav.url %}badge--top-right{% endif %}">
+<li class="sidenav__item {% if request.endpoint == nav.endpoint or request.endpoint in nav.secondary_endpoints %}active{% endif %} {% if nav.badge or nav.url %}badge--top-right{% endif %}">
     <a href="{{ url_for(nav.endpoint) if nav.endpoint else nav.url }}" title="{{  gettext(nav.name) }}"
-        data-bs-toggle="tooltip"
-        data-bs-placement="right"
-        aria-label="{{  gettext(nav.name) }}"
         data-test-id="sidenav-link-{{ nav.name.lower().replace('/', '_').replace(' ', '_') }}"
         role="button"
         {% if nav.url %}target="_blank"{% endif %}
     >
         {% if nav.badge %}
-        <div id="{{ nav.badge }}" class="sidenav-icons__badge"></div>
+        <span id="{{ nav.badge }}" class="sidenav-icons__badge"></span>
         {% endif %}
-        {% block navurl %}
-        {% if nav.url %}
-        <div class="sidenav-icons__helper-icon">
-            <i class="icon-small--external"></i>
-        </div>
-        {% endif %}
-        {% endblock %}
-        <i class="icon--{{ nav.icon }}"></i>
-        <div class="sidenav-icons__item-title">{{  gettext(nav.name) }}</div>
+
+        <span class="sidenav__item-icon">
+            {% block navurl %}
+            {% if nav.url %}
+            <span class="sidenav__helper-icon">
+                <i class="icon-small--external"></i>
+            </span>
+            {% endif %}
+            {% endblock %}
+            <i class="icon--{{ nav.icon }}"></i>
+        </span>
+        <span class="sidenav__item-title">{{  gettext(nav.name) }}</span>
     </a>
 </li>
\ No newline at end of file

From 73ca8baa9e6a34a7a137c0b1b1bbe66d48ea69fa Mon Sep 17 00:00:00 2001
From: Nikola Stojanovic <68916411+dzonidoo@users.noreply.github.com>
Date: Fri, 15 Mar 2024 16:40:08 +0100
Subject: [PATCH 5/7] Implement the new navigation concept for Newshub (#808)

* add navigation

* changes after review

* fix lint

* chages after review
---
 assets/index.ts                      | 37 +++++++++++++++++++++++++---
 assets/styles/sidenav.scss           |  3 ++-
 newsroom/templates/base_layout.html  |  8 +++++-
 newsroom/templates/sidenav_icon.html |  4 +--
 4 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/assets/index.ts b/assets/index.ts
index fa60185e6..51e7cd329 100644
--- a/assets/index.ts
+++ b/assets/index.ts
@@ -7,9 +7,6 @@ import {gettext, isTouchDevice} from 'utils';
 import {registerCoverageFieldComponent} from './agenda/components/preview';
 import {Button} from './ui/components/Button';
 
-if (isTouchDevice()) {
-    document.documentElement.classList.add('no-touch');
-}
 
 interface IExtensions {
     prepareWirePreview?(content: HTMLElement, item: IArticle): HTMLElement;
@@ -49,3 +46,37 @@ export const exposed: IExposedForExtensions = {
 };
 
 import 'app';
+
+// navigation scripts
+if (isTouchDevice()) {
+    document.documentElement.classList.add('no-touch');
+}
+
+const navigation = 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 (navigation == null || pinButton == null) {
+        return null;
+    }
+
+    if (navigation.classList.contains('nav-block--pinned')) {
+        sessionStorage.removeItem('navigation-pinned');
+        navigation.classList.remove('nav-block--pinned');
+        pinButton.setAttribute('title', gettext('Expand'));
+    } else {
+        sessionStorage.setItem('navigation-pinned', 'true');
+        navigation.classList.add('nav-block--pinned');
+        pinButton.setAttribute('title', gettext('Collapse'));
+    }
+}
diff --git a/assets/styles/sidenav.scss b/assets/styles/sidenav.scss
index c1095dba9..6941fa8c8 100644
--- 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 @@
         }
 
     }
-}
\ No newline at end of file
+}
diff --git a/newsroom/templates/base_layout.html b/newsroom/templates/base_layout.html
index 45271206c..31f7e615e 100644
--- a/newsroom/templates/base_layout.html
+++ b/newsroom/templates/base_layout.html
@@ -73,10 +73,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) %}
diff --git a/newsroom/templates/sidenav_icon.html b/newsroom/templates/sidenav_icon.html
index 74777a393..e74c05147 100644
--- 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>
\ No newline at end of file
+</li>

From 89f5dd64643bdb0433ecdb64c732d91e69cbbc90 Mon Sep 17 00:00:00 2001
From: Petr Jasek <jasekpetr@gmail.com>
Date: Wed, 21 Aug 2024 15:03:06 +0200
Subject: [PATCH 6/7] fix e2e error

---
 assets/ui/components/ToolTip.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/assets/ui/components/ToolTip.tsx b/assets/ui/components/ToolTip.tsx
index 17e69e50f..385f1a350 100644
--- a/assets/ui/components/ToolTip.tsx
+++ b/assets/ui/components/ToolTip.tsx
@@ -29,11 +29,16 @@ export class ToolTip extends React.PureComponent<any, any> {
             } else if (!child.getAttribute('title')) {
                 console.error('Child of <ToolTip> must have a "title" attribute!');
             } else {
-                this.tooltip = new Tooltip(child, {
+                const options: Partial<Tooltip.Options> = {
                     trigger: 'hover',
                     placement: this.props.placement || 'top',
-                    title: this.props.title,
-                });
+                };
+
+                if (this.props.title) {
+                    options.title = this.props.title;
+                }
+
+                this.tooltip = new Tooltip(child, options);
             }
         }
     }

From 21a361ad4f465acee61c198f6ff593f6c52e19f1 Mon Sep 17 00:00:00 2001
From: dzonidoo <nikola71092@gmail.com>
Date: Mon, 9 Sep 2024 16:02:33 +0200
Subject: [PATCH 7/7] fix lint

---
 assets/ui/components/ContentDivider.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/assets/ui/components/ContentDivider.tsx b/assets/ui/components/ContentDivider.tsx
index 8954c1f5c..a754c1590 100644
--- a/assets/ui/components/ContentDivider.tsx
+++ b/assets/ui/components/ContentDivider.tsx
@@ -14,7 +14,7 @@ interface IProps {
 export class ContentDivider extends React.Component<IProps> {
 
     render() {
-        let classes = classNames('sd-content-divider', {
+        const classes = classNames('sd-content-divider', {
             'sd-content-divider--horizontal': this.props.orientation === undefined,
             [`sd-content-divider--${this.props.type}`]: this.props.type || this.props.type !== undefined,
             [`sd-content-divider--text-${this.props.align}`]: this.props.align || this.props.align !== undefined,
@@ -29,7 +29,7 @@ export class ContentDivider extends React.Component<IProps> {
 
         if (this.props.children) {
             return (
-                <div className={"sd-content-divider--with-text " + classes} role="separator">
+                <div className={'sd-content-divider--with-text ' + classes} role="separator">
                     <span className="sd-content-divider__inner-text">{this.props.children}</span>
                 </div>
             );
@@ -37,4 +37,4 @@ export class ContentDivider extends React.Component<IProps> {
             return <div className={classes} role="separator"></div>;
         }
     }
-}
\ No newline at end of file
+}