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

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

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();
-  }
-
-  componentDidUpdate(prevProps) {
-    if (this.props.currentItem !== prevProps.currentItem) {
-      this.measureItems();
-    }
+    this.forceUpdate();
   }
 
   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 indicatorOffset = this.itemWidths.slice(0, activeIndex).reduce((a, b) => a + b, 0);
+    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 (
       <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>
             );
           })}