fix nav tabs margin and indicator, animate notification tabs (#8024)

Co-authored-by: zhouwenxuan <aries@Mac.local>

frontend/src/components/common/notification-popover/index.css

@@ -198,6 +198,10 @@
   color: #ED7109;
 }
 
+.notification-container .nav-indicator-container::before {
+  bottom: 0px;
+}
+
 @media (max-width: 768px) {
   .notification-container {
     right: -60px;

frontend/src/components/common/notification-popover/index.js

@@ -3,13 +3,20 @@ import PropTypes from 'prop-types';
 import { Popover } from 'reactstrap';
 import { gettext } from '../../../utils/constants';
 import SeahubModalCloseIcon from '../seahub-modal-close';
+import { NAV_ITEM_MARGIN } from '../../../constants';
 
 import './index.css';
 
 class NotificationPopover extends React.Component {
 
+  constructor(props) {
+    super(props);
+    this.itemRefs = [];
+  }
+
   componentDidMount() {
     document.addEventListener('mousedown', this.handleOutsideClick, true);
+    this.forceUpdate();
   }
 
   componentWillUnmount() {
@@ -39,6 +46,11 @@ class NotificationPopover extends React.Component {
 
   render() {
     const { headerText = '', bodyText = '', footerText = '', currentTab, generalNoticeListUnseen, discussionNoticeListUnseen } = this.props;
+    const activeIndex = currentTab === 'general' ? 0 : 1;
+    const itemWidths = this.itemRefs.map(ref => ref?.offsetWidth);
+    const indicatorWidth = itemWidths[activeIndex];
+    const indicatorOffset = itemWidths.slice(0, activeIndex).reduce((a, b) => a + b, 0) + (2 * activeIndex + 1) * NAV_ITEM_MARGIN;
+
     return (
       <Popover
         className="notification-wrapper"
@@ -55,15 +67,29 @@ class NotificationPopover extends React.Component {
           </div>
           <div className="notification-body">
             <div className="mark-notifications">
-              <ul className="nav">
+              <ul
-                <li className="nav-item" onClick={() => this.tabItemClick('general')}>
+                className="nav nav-indicator-container position-relative"
-                  <span className={`nav-link ${currentTab === 'general' ? 'active' : ''}`}>
+                style={{
+                  '--indicator-width': `${indicatorWidth}px`,
+                  '--indicator-offset': `${indicatorOffset}px`
+                }}
+              >
+                <li
+                  className="nav-item mx-3"
+                  ref={el => this.itemRefs[0] = el}
+                  onClick={() => this.tabItemClick('general')}
+                >
+                  <span className={`m-0 nav-link ${currentTab === 'general' ? 'active' : ''}`}>
                     {gettext('General')}
                     {generalNoticeListUnseen > 0 && <span>({generalNoticeListUnseen})</span>}
                   </span>
                 </li>
-                <li className="nav-item" onClick={() => this.tabItemClick('discussion')}>
+                <li
-                  <span className={`nav-link ${currentTab === 'discussion' ? 'active' : ''}`}>
+                  className="nav-item mx-3"
+                  ref={el => this.itemRefs[1] = el}
+                  onClick={() => this.tabItemClick('discussion')}
+                >
+                  <span className={`m-0 nav-link ${currentTab === 'discussion' ? 'active' : ''}`}>
                     {gettext('Discussion')}
                     {discussionNoticeListUnseen > 0 && <span>({discussionNoticeListUnseen})</span>}
                   </span>

frontend/src/constants/index.js

@@ -75,3 +75,5 @@ export const SEARCH_FILTER_BY_DATE_TYPE_KEY = {
 };
 
 export const SEARCH_FILTERS_SHOW_KEY = 'search_filters_show';
+
+export const NAV_ITEM_MARGIN = 12;

frontend/src/css/layout.css

@@ -356,14 +356,19 @@ img[src=""],img:not([src]) { /* for first loading img*/
   color: #666;
 }
 
+.nav-indicator-container .nav-item {
+  min-width: fit-content;
+}
+
 .nav-indicator-container .nav-item .nav-link {
   border: none;
+  min-width: fit-content;
 }
 
 .nav-indicator-container::before {
   content: '';
   position: absolute;
-  bottom: 0;
+  bottom: -2px;
   height: 2px;
   width: var(--indicator-width);
   background: #ED7109;

frontend/src/pages/dashboard/files-activities.js

@@ -13,6 +13,8 @@ import '../../css/files-activities.css';
 
 dayjs.locale(window.app.config.lang);
 
+const NAV_ITEM_MARGIN = 16;
+
 class FilesActivities extends Component {
 
   constructor(props) {
@@ -34,7 +36,6 @@ class FilesActivities extends Component {
     this.oldPathList = [];
     this.availableUserEmails = new Set();
     this.itemRefs = [];
-    this.itemWidths = [];
   }
 
   componentDidMount() {
@@ -80,24 +81,13 @@ class FilesActivities extends Component {
       this.setState({ onlyMine: isMyActivities });
     });
 
-    this.measureItems();
+    this.forceUpdate();
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    if (this.state.onlyMine !== prevState.onlyMine) {
-      this.measureItems();
-    }
   }
 
   componentWillUnmount() {
     this.unlisten && this.unlisten();
   }
 
-  measureItems = () => {
-    this.itemWidths = this.itemRefs.map(ref => ref?.offsetWidth);
-    this.forceUpdate();
-  };
-
   mergePublishEvents = (events) => {
     events.forEach((item) => {
       if (item.op_type === 'publish') {
@@ -255,8 +245,9 @@ class FilesActivities extends Component {
   render() {
     const { targetUsers, availableUsers, onlyMine } = this.state;
     const activeIndex = onlyMine ? 1 : 0;
-    const indicatorWidth = this.itemWidths[activeIndex] || 78;
+    const itemWidths = this.itemRefs.map(ref => ref?.offsetWidth);
-    const indicatorOffset = this.itemWidths.slice(0, activeIndex).reduce((a, b) => a + b, 0);
+    const indicatorWidth = itemWidths[activeIndex];
+    const indicatorOffset = itemWidths.slice(0, activeIndex).reduce((a, b) => a + b, 0) + (2 * activeIndex + 1) * NAV_ITEM_MARGIN;
     return (
       <div className="main-panel-center">
         <div className="cur-view-container" id="activities">
@@ -268,10 +259,10 @@ class FilesActivities extends Component {
                 '--indicator-offset': `${indicatorOffset}px`
               }}
             >
-              <li className="nav-item px-4" ref={el => this.itemRefs[0] = el}>
+              <li className="nav-item mx-4" ref={el => this.itemRefs[0] = el}>
                 <Link to={`${siteRoot}dashboard/`} className={`nav-link${onlyMine ? '' : ' active'}`}>{gettext('All Activities')}</Link>
               </li>
-              <li className="nav-item px-4" ref={el => this.itemRefs[1] = el}>
+              <li className="nav-item mx-4" ref={el => this.itemRefs[1] = el}>
                 <Link to={`${siteRoot}my-activities/`} className={`nav-link${onlyMine ? ' active' : ''}`}>{gettext('My Activities')}</Link>
               </li>
             </ul>

frontend/src/pages/sys-admin/admin-logs/logs-nav.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from '@gatsbyjs/reach-router';
 import { siteRoot, gettext } from '../../../utils/constants';
+import { NAV_ITEM_MARGIN } from '../../../constants';
 
 const propTypes = {
   currentItem: PropTypes.string.isRequired
@@ -16,18 +17,18 @@ class LogsNav extends React.Component {
       { name: 'login', urlPart: 'admin-logs/login', text: gettext('Admin Login Logs') },
     ];
     this.itemRefs = [];
-    this.itemWidths = [];
   }
 
   componentDidMount() {
-    this.itemWidths = this.itemRefs.map(ref => ref?.offsetWidth || 0);
+    this.forceUpdate();
   }
 
   render() {
     const { currentItem } = this.props;
     const activeIndex = this.navItems.findIndex(item => item.name === currentItem) || 0;
-    const indicatorWidth = this.itemWidths[activeIndex] || 167;
+    const itemWidths = this.itemRefs.map(ref => ref?.offsetWidth);
-    const indicatorOffset = this.itemWidths.slice(0, activeIndex).reduce((prev, cur) => prev + cur, 0);
+    const indicatorWidth = itemWidths[activeIndex];
+    const indicatorOffset = itemWidths.slice(0, activeIndex).reduce((prev, cur) => prev + cur, 0) + (2 * activeIndex + 1) * NAV_ITEM_MARGIN;
     return (
       <div className="cur-view-path tab-nav-container">
         <ul
@@ -40,11 +41,11 @@ class LogsNav extends React.Component {
           {this.navItems.map((item, index) => {
             return (
               <li
-                className="nav-item"
+                className="nav-item mx-3"
                 key={index}
                 ref={el => this.itemRefs[index] = el}
               >
-                <Link to={`${siteRoot}sys/${item.urlPart}/`} className={`nav-link${currentItem == item.name ? ' active' : ''}`}>{item.text}</Link>
+                <Link to={`${siteRoot}sys/${item.urlPart}/`} className={`m-0 nav-link${currentItem == item.name ? ' active' : ''}`}>{item.text}</Link>
               </li>
             );
           })}

frontend/src/pages/sys-admin/devices/devices-nav.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from '@gatsbyjs/reach-router';
 import { siteRoot, gettext, isPro } from '../../../utils/constants';
+import { NAV_ITEM_MARGIN } from '../../../constants';
 
 const propTypes = {
   currentItem: PropTypes.string.isRequired
@@ -19,22 +20,18 @@ class Nav extends React.Component {
       this.navItems.push({ name: 'errors', urlPart: 'errors', text: gettext('Errors') });
     }
     this.itemRefs = [];
-    this.itemWidths = [];
   }
 
   componentDidMount() {
-    this.measureItems();
+    this.forceUpdate();
   }
 
-  measureItems = () => {
-    this.itemWidths = this.itemRefs.map(ref => ref?.offsetWidth || 77);
-  };
-
   render() {
     const { currentItem } = this.props;
     const activeIndex = this.navItems.findIndex(item => item.name === currentItem) || 0;
-    const indicatorWidth = this.itemWidths[activeIndex] || 77;
+    const itemWidths = this.itemRefs.map(ref => ref?.offsetWidth);
-    const indicatorOffset = this.itemWidths.slice(0, activeIndex).reduce((a, b) => a + b, 0);
+    const indicatorWidth = itemWidths[activeIndex];
+    const indicatorOffset = itemWidths.slice(0, activeIndex).reduce((a, b) => a + b, 0) + (2 * activeIndex + 1) * NAV_ITEM_MARGIN;
 
     return (
       <div className="cur-view-path tab-nav-container">
@@ -48,11 +45,11 @@ class Nav extends React.Component {
           {this.navItems.map((item, index) => {
             return (
               <li
-                className="nav-item"
+                className="nav-item mx-3"
                 key={index}
                 ref={el => this.itemRefs[index] = el}
               >
-                <Link to={`${siteRoot}sys/devices/${item.urlPart}/`} className={`nav-link${currentItem == item.name ? ' active' : ''}`}>{item.text}</Link>
+                <Link to={`${siteRoot}sys/devices/${item.urlPart}/`} className={`m-0 nav-link${currentItem == item.name ? ' active' : ''}`}>{item.text}</Link>
               </li>
             );
           })}

frontend/src/pages/sys-admin/links/links-nav.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Link } from '@gatsbyjs/reach-router';
 import { siteRoot, gettext } from '../../../utils/constants';
 import SortMenu from '../../../components/sort-menu';
+import { NAV_ITEM_MARGIN } from '../../../constants';
 
 const propTypes = {
   currentItem: PropTypes.string.isRequired,
@@ -27,11 +28,10 @@ class Nav extends React.Component {
       { value: 'view_cnt-desc', text: gettext('Descending by visit count') }
     ];
     this.itemRefs = [];
-    this.itemWidths = [];
   }
 
   componentDidMount() {
-    this.itemWidths = this.itemRefs.map(ref => ref?.offsetWidth || 98);
+    this.forceUpdate();
   }
 
   onSelectSortOption = (item) => {
@@ -43,8 +43,9 @@ class Nav extends React.Component {
     const { currentItem, sortBy, sortOrder } = this.props;
     const showSortIcon = currentItem == 'shareLinks';
     const activeIndex = this.navItems.findIndex(item => item.name === currentItem) || 0;
-    const indicatorWidth = this.itemWidths[activeIndex] || 98;
+    const itemWidths = this.itemRefs.map(ref => ref?.offsetWidth);
-    const indicatorOffset = this.itemWidths.slice(0, activeIndex).reduce((a, b) => a + b, 0);
+    const indicatorWidth = itemWidths[activeIndex];
+    const indicatorOffset = itemWidths.slice(0, activeIndex).reduce((a, b) => a + b, 0) + (2 * activeIndex + 1) * NAV_ITEM_MARGIN;
     return (
       <div className="cur-view-path tab-nav-container">
         <ul
@@ -57,11 +58,11 @@ class Nav extends React.Component {
           {this.navItems.map((item, index) => {
             return (
               <li
-                className="nav-item"
+                className="nav-item mx-3"
                 key={index}
                 ref={el => this.itemRefs[index] = el}
               >
-                <Link to={`${siteRoot}sys/${item.urlPart}/`} className={`nav-link${currentItem == item.name ? ' active' : ''}`}>{item.text}</Link>
+                <Link to={`${siteRoot}sys/${item.urlPart}/`} className={`m-0 nav-link${currentItem == item.name ? ' active' : ''}`}>{item.text}</Link>
               </li>
             );
           })}

frontend/src/pages/sys-admin/logs-page/logs-nav.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from '@gatsbyjs/reach-router';
 import { siteRoot, gettext } from '../../../utils/constants';
+import { NAV_ITEM_MARGIN } from '../../../constants';
 
 const propTypes = {
   currentItem: PropTypes.string.isRequired
@@ -20,18 +21,18 @@ class Nav extends React.Component {
       { name: 'groupMember', urlPart: 'logs/group-member-audit', text: gettext('Group Member') },
     ];
     this.itemRefs = [];
-    this.itemWidths = [];
   }
 
   componentDidMount() {
-    this.itemWidths = this.itemRefs.map(ref => ref?.offsetWidth) || 59;
+    this.forceUpdate();
   }
 
   render() {
     const { currentItem } = this.props;
     const activeIndex = this.navItems.findIndex(item => item.name === currentItem) || 0;
-    const indicatorWidth = this.itemWidths[activeIndex] || 59;
+    const itemWidths = this.itemRefs.map(ref => ref?.offsetWidth);
-    const leftOffset = this.itemWidths.slice(0, activeIndex).reduce((prev, cur) => prev + cur, 0);
+    const indicatorWidth = itemWidths[activeIndex];
+    const leftOffset = itemWidths.slice(0, activeIndex).reduce((prev, cur) => prev + cur, 0) + (2 * activeIndex + 1) * NAV_ITEM_MARGIN;
     return (
       <div className="cur-view-path tab-nav-container">
         <ul
@@ -44,11 +45,11 @@ class Nav extends React.Component {
           {this.navItems.map((item, index) => {
             return (
               <li
-                className="nav-item"
+                className="nav-item mx-3"
                 key={index}
                 ref={el => this.itemRefs[index] = el}
               >
-                <Link to={`${siteRoot}sys/${item.urlPart}/`} className={`nav-link${currentItem == item.name ? ' active' : ''}`}>{item.text}</Link>
+                <Link to={`${siteRoot}sys/${item.urlPart}/`} className={`m-0 nav-link${currentItem == item.name ? ' active' : ''}`}>{item.text}</Link>
               </li>
             );
           })}

frontend/src/pages/sys-admin/repos/repos-nav.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Link } from '@gatsbyjs/reach-router';
 import { siteRoot, gettext } from '../../../utils/constants';
 import SortMenu from '../../../components/sort-menu';
+import { NAV_ITEM_MARGIN } from '../../../constants';
 
 const propTypes = {
   currentItem: PropTypes.string.isRequired,
@@ -25,17 +26,10 @@ class Nav extends React.Component {
       { value: 'size-desc', text: gettext('Descending by size') }
     ];
     this.itemRefs = [];
-    this.itemWidths = [];
   }
 
   componentDidMount() {
-    this.measureItems();
+    this.forceUpdate();
-  }
-
-  componentDidUpdate(prevProps) {
-    if (this.props.currentItem !== prevProps.currentItem) {
-      this.measureItems();
-    }
   }
 
   onSelectSortOption = (item) => {
@@ -43,17 +37,13 @@ class Nav extends React.Component {
     this.props.sortItems(sortBy);
   };
 
-  measureItems = () => {
-    this.itemWidths = this.itemRefs.map(ref => ref?.offsetWidth || 77);
-    this.forceUpdate();
-  };
-
   render() {
     const { currentItem, sortBy, sortOrder = 'desc' } = this.props;
     const showSortIcon = currentItem == 'all-libraries' || currentItem == 'all-wikis';
     const activeIndex = this.navItems.findIndex(item => item.name === currentItem) || 0;
-    const indicatorWidth = this.itemWidths[activeIndex] || 56;
+    const itemWidths = this.itemRefs.map(ref => ref?.offsetWidth);
-    const indicatorOffset = this.itemWidths.slice(0, activeIndex).reduce((a, b) => a + b, 0);
+    const indicatorWidth = itemWidths[activeIndex];
+    const indicatorOffset = itemWidths.slice(0, activeIndex).reduce((a, b) => a + b, 0) + (2 * activeIndex + 1) * NAV_ITEM_MARGIN;
 
     return (
       <div className="cur-view-path tab-nav-container">
@@ -67,11 +57,11 @@ class Nav extends React.Component {
           {this.navItems.map((item, index) => {
             return (
               <li
-                className="nav-item"
+                className="nav-item mx-3"
                 key={index}
                 ref={el => this.itemRefs[index] = el}
               >
-                <Link to={`${siteRoot}sys/${item.urlPart}/`} className={`nav-link${currentItem == item.name ? ' active' : ''}`}>{item.text}</Link>
+                <Link to={`${siteRoot}sys/${item.urlPart}/`} className={`m-0 nav-link${currentItem == item.name ? ' active' : ''}`}>{item.text}</Link>
               </li>
             );
           })}

frontend/src/pages/sys-admin/statistic/statistic-nav.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from '@gatsbyjs/reach-router';
 import { siteRoot, gettext } from '../../../utils/constants';
+import { NAV_ITEM_MARGIN } from '../../../constants';
 
 const propTypes = {
   currentItem: PropTypes.string.isRequired
@@ -20,22 +21,18 @@ class Nav extends React.Component {
       { name: 'metricsStatistic', urlPart: 'statistics/metrics', text: gettext('Metrics') },
     ];
     this.itemRefs = [];
-    this.itemWidths = [];
   }
 
   componentDidMount() {
-    this.measureItems();
+    this.forceUpdate();
   }
 
-  measureItems = () => {
-    this.itemWidths = this.itemRefs.map(ref => ref?.offsetWidth || 0);
-  };
-
   render() {
     const { currentItem } = this.props;
     const activeIndex = this.navItems.findIndex(item => item.name === currentItem);
-    const indicatorWidth = this.itemWidths[activeIndex] || 56;
+    const itemWidths = this.itemRefs.map(ref => ref?.offsetWidth);
-    const indicatorOffset = this.itemWidths.slice(0, activeIndex).reduce((a, b) => a + b, 0);
+    const indicatorWidth = itemWidths[activeIndex];
+    const indicatorOffset = itemWidths.slice(0, activeIndex).reduce((a, b) => a + b, 0) + (2 * activeIndex + 1) * NAV_ITEM_MARGIN;
 
     return (
       <div className="cur-view-path tab-nav-container">
@@ -49,11 +46,11 @@ class Nav extends React.Component {
           {this.navItems.map((item, index) => {
             return (
               <li
-                className="nav-item"
+                className="nav-item mx-3"
                 key={index}
                 ref={el => this.itemRefs[index] = el}
               >
-                <Link to={`${siteRoot}sys/${item.urlPart}/`} className={`nav-link${currentItem == item.name ? ' active' : ''}`}>{item.text}</Link>
+                <Link to={`${siteRoot}sys/${item.urlPart}/`} className={`m-0 nav-link${currentItem == item.name ? ' active' : ''}`}>{item.text}</Link>
               </li>
             );
           })}

frontend/src/pages/sys-admin/users/user-nav.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from '@gatsbyjs/reach-router';
 import { siteRoot, gettext } from '../../../utils/constants';
+import { NAV_ITEM_MARGIN } from '../../../constants';
 
 const propTypes = {
   email: PropTypes.string,
@@ -21,22 +22,18 @@ class Nav extends React.Component {
       { name: 'groups', urlPart: 'groups', text: gettext('Groups') }
     ];
     this.itemRefs = [];
-    this.itemWidths = [];
   }
 
   componentDidMount() {
-    this.measureItems();
+    this.forceUpdate();
   }
 
-  measureItems = () => {
-    this.itemWidths = this.itemRefs.map(ref => ref?.offsetWidth || 77);
-  };
-
   render() {
     const { currentItem, email, userName } = this.props;
     const activeIndex = this.navItems.findIndex(item => item.name === currentItem) || 0;
-    const indicatorWidth = this.itemWidths[activeIndex] || 56;
+    const itemWidths = this.itemRefs.map(ref => ref?.offsetWidth);
-    const indicatorOffset = this.itemWidths.slice(0, activeIndex).reduce((a, b) => a + b, 0);
+    const indicatorWidth = itemWidths[activeIndex];
+    const indicatorOffset = itemWidths.slice(0, activeIndex).reduce((a, b) => a + b, 0) + (2 * activeIndex + 1) * NAV_ITEM_MARGIN;
     return (
       <div>
         <div className="cur-view-path">
@@ -52,11 +49,11 @@ class Nav extends React.Component {
           {this.navItems.map((item, index) => {
             return (
               <li
-                className="nav-item"
+                className="nav-item mx-3"
                 key={index}
                 ref={el => this.itemRefs[index] = el}
               >
-                <Link to={`${siteRoot}sys/user/${encodeURIComponent(email)}/${item.urlPart}`} className={`nav-link mx-3 ${currentItem == item.name ? ' active' : ''}`}>{item.text}</Link>
+                <Link to={`${siteRoot}sys/user/${encodeURIComponent(email)}/${item.urlPart}`} className={`nav-link m-0 ${currentItem == item.name ? ' active' : ''}`}>{item.text}</Link>
               </li>
             );
           })}

frontend/src/pages/sys-admin/users/users-nav.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Link } from '@gatsbyjs/reach-router';
 import { siteRoot, gettext, haveLDAP, isDefaultAdmin } from '../../../utils/constants';
 import SortMenu from '../../../components/sort-menu';
+import { NAV_ITEM_MARGIN } from '../../../constants';
 
 const propTypes = {
   currentItem: PropTypes.string.isRequired,
@@ -35,11 +36,10 @@ class Nav extends React.Component {
     ];
 
     this.itemRefs = [];
-    this.itemWidths = [];
   }
 
   componentDidMount() {
-    this.measureItems();
+    this.forceUpdate();
   }
 
   onSelectSortOption = (item) => {
@@ -47,16 +47,13 @@ class Nav extends React.Component {
     this.props.sortItems(sortBy, sortOrder);
   };
 
-  measureItems = () => {
-    this.itemWidths = this.itemRefs.map(ref => ref?.offsetWidth || 77);
-  };
-
   render() {
     const { currentItem, sortBy, sortOrder } = this.props;
     const showSortIcon = currentItem == 'database' || currentItem == 'ldap-imported';
     const activeIndex = this.navItems.findIndex(item => item.name === currentItem) || 0;
-    const indicatorWidth = this.itemWidths[activeIndex] || 85;
+    const itemWidths = this.itemRefs.map(ref => ref?.offsetWidth);
-    const indicatorOffset = this.itemWidths.slice(0, activeIndex).reduce((a, b) => a + b, 0);
+    const indicatorWidth = itemWidths[activeIndex];
+    const indicatorOffset = itemWidths.slice(0, activeIndex).reduce((a, b) => a + b, 0) + (2 * activeIndex + 1) * NAV_ITEM_MARGIN;
 
     return (
       <div className="cur-view-path tab-nav-container">
@@ -70,11 +67,11 @@ class Nav extends React.Component {
           {this.navItems.map((item, index) => {
             return (
               <li
-                className="nav-item"
+                className="nav-item mx-3"
                 key={index}
                 ref={el => this.itemRefs[index] = el}
               >
-                <Link to={`${siteRoot}sys/${item.urlPart}/`} className={`nav-link${currentItem == item.name ? ' active' : ''}`}>{item.text}</Link>
+                <Link to={`${siteRoot}sys/${item.urlPart}/`} className={`m-0 nav-link${currentItem == item.name ? ' active' : ''}`}>{item.text}</Link>
               </li>
             );
           })}

frontend/src/pages/sys-admin/virus-scan/nav.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from '@gatsbyjs/reach-router';
 import { siteRoot, gettext } from '../../../utils/constants';
+import { NAV_ITEM_MARGIN } from '../../../constants';
 
 const propTypes = {
   currentItem: PropTypes.string.isRequired
@@ -16,18 +17,18 @@ class Nav extends React.Component {
       { name: 'unhandled', urlPart: 'unhandled', text: gettext('Unhandled') }
     ];
     this.itemRefs = [];
-    this.itemWidths = [];
   }
 
   componentDidMount() {
-    this.itemWidths = this.itemRefs.map(ref => ref?.offsetWidth) || 59;
+    this.forceUpdate();
   }
 
   render() {
     const { currentItem } = this.props;
     const activeIndex = this.navItems.findIndex(item => item.name === currentItem) || 0;
-    const indicatorWidth = this.itemWidths[activeIndex] || 59;
+    const itemWidths = this.itemRefs.map(ref => ref?.offsetWidth);
-    const indicatorOffset = this.itemWidths.slice(0, activeIndex).reduce((prev, cur) => prev + cur, 0);
+    const indicatorWidth = itemWidths[activeIndex];
+    const indicatorOffset = itemWidths.slice(0, activeIndex).reduce((prev, cur) => prev + cur, 0) + (2 * activeIndex + 1) * NAV_ITEM_MARGIN;
     return (
       <div className="cur-view-path tab-nav-container">
         <ul
@@ -40,11 +41,11 @@ class Nav extends React.Component {
           {this.navItems.map((item, index) => {
             return (
               <li
-                className="nav-item"
+                className="nav-item mx-3"
                 key={index}
                 ref={el => this.itemRefs[index] = el}
               >
-                <Link to={`${siteRoot}sys/virus-files/${item.urlPart}/`} className={`nav-link${currentItem == item.name ? ' active' : ''}`}>{item.text}</Link>
+                <Link to={`${siteRoot}sys/virus-files/${item.urlPart}/`} className={`m-0 nav-link${currentItem == item.name ? ' active' : ''}`}>{item.text}</Link>
               </li>
             );
           })}