fix activities nav tabs indicator

frontend/src/css/files-activities.css

@@ -73,25 +73,7 @@
   font-size: 14px;
 }
 
-.nav.activities-nav-indicator-container .nav-item .nav-link {
+.nav.nav-indicator-container .nav-item .nav-link {
   border: none;
-}
-
-.activities-nav-indicator-container::before {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  height: 2px;
-  width: 80px;
-  background: #ED7109;
-  border-radius: 2px;
-  transition: transform 0.3s ease;
-}
-
-.activities-nav-indicator-container[data-active="all"]::before {
-  transform: translateX(0%);
-}
-
-.activities-nav-indicator-container[data-active="mine"]::before {
-  transform: translateX(108px);
+  margin: 0;
 }

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

@@ -33,6 +33,8 @@ class FilesActivities extends Component {
     this.curPathList = [];
     this.oldPathList = [];
     this.availableUserEmails = new Set();
+    this.itemRefs = [];
+    this.itemWidths = [];
   }
 
   componentDidMount() {
@@ -77,12 +79,25 @@ class FilesActivities extends Component {
       const isMyActivities = location.pathname.includes('my-activities');
       this.setState({ onlyMine: isMyActivities });
     });
+
+    this.measureItems();
+  }
+
+  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') {
@@ -239,15 +254,24 @@ class FilesActivities extends Component {
 
   render() {
     const { targetUsers, availableUsers, onlyMine } = this.state;
+    const activeIndex = onlyMine ? 1 : 0;
+    const indicatorWidth = this.itemWidths[activeIndex] || 78;
+    const indicatorOffset = this.itemWidths.slice(0, activeIndex).reduce((a, b) => a + b, 0);
     return (
       <div className="main-panel-center">
         <div className="cur-view-container" id="activities">
           <div className="cur-view-path">
-            <ul className="nav activities-nav-indicator-container position-relative" data-active={onlyMine ? 'mine' : 'all'}>
-              <li className="nav-item">
+            <ul
+              className="nav nav-indicator-container position-relative"
+              style={{
+                '--indicator-width': `${indicatorWidth}px`,
+                '--indicator-offset': `${indicatorOffset}px`
+              }}
+            >
+              <li className="nav-item px-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">
+              <li className="nav-item px-4" ref={el => this.itemRefs[1] = el}>
                 <Link to={`${siteRoot}my-activities/`} className={`nav-link${onlyMine ? ' active' : ''}`}>{gettext('My Activities')}</Link>
               </li>
             </ul>