fix: fixed width issues of old and new sidebar (#1374)

Co-authored-by: Awais Ansari <79941147+awais-ansari@users.noreply.github.com>

src/courseware/course/new-sidebar/sidebars/discussions-notifications/DiscussionsNotificationsSidebar.jsx

@@ -14,19 +14,19 @@ const DiscussionsNotificationsSidebar = () => {
   const { hideNotificationbar } = useContext(SidebarContext);
 
   return (
-    <div className="sticky-top vh-100">
-      <SidebarBase
-        ariaLabel={intl.formatMessage(messages.discussionNotificationTray)}
-        sidebarId={ID}
-        className="d-flex flex-column flex-fill"
-        showTitleBar={false}
-        showBorder={false}
-      >
+    <SidebarBase
+      ariaLabel={intl.formatMessage(messages.discussionNotificationTray)}
+      sidebarId={ID}
+      className="d-flex flex-column flex-fill"
+      showTitleBar={false}
+      showBorder={false}
+    >
+      <div className="sticky-top vh-100">
         <NotificationTray />
         {!hideNotificationbar && <div className="my-1.5" />}
         <DiscussionsSidebar />
-      </SidebarBase>
-    </div>
+      </div>
+    </SidebarBase>
   );
 };
 

src/courseware/course/sequence/sequence-navigation/SequenceNavigationTabs.jsx

@@ -5,7 +5,9 @@ import classNames from 'classnames';
 import UnitButton from './UnitButton';
 import SequenceNavigationDropdown from './SequenceNavigationDropdown';
 import useIndexOfLastVisibleChild from '../../../../generic/tabs/useIndexOfLastVisibleChild';
-import { useIsOnXLDesktop, useIsSidebarOpen } from './hooks';
+import {
+  useIsOnXLDesktop, useIsOnMediumDesktop, useIsOnLargeDesktop, useIsSidebarOpen,
+} from './hooks';
 
 const SequenceNavigationTabs = ({
   unitIds, unitId, showCompletion, onNavigate,
@@ -15,21 +17,28 @@ const SequenceNavigationTabs = ({
     indexOfLastVisibleChild,
     containerRef,
     invisibleStyle,
-  ] = useIndexOfLastVisibleChild();
+  ] = useIndexOfLastVisibleChild(isSidebarOpen);
   const isOnXLDesktop = useIsOnXLDesktop();
-  const shouldDisplayDropdown = indexOfLastVisibleChild === -1;
+  const isOnLargeDesktop = useIsOnLargeDesktop();
+  const isOnMediumDesktop = useIsOnMediumDesktop();
+  const shouldDisplayDropdown = indexOfLastVisibleChild === -1 || indexOfLastVisibleChild < unitIds.length - 1;
 
   return (
-    <div style={{ flexBasis: '100%', minWidth: 0 }}>
+    <div
+      style={{ flexBasis: '100%', minWidth: 0 }}
+      className={classNames({
+        'navigation-tab-width-xl': isOnXLDesktop && isSidebarOpen,
+        'navigation-tab-width-large': isOnLargeDesktop && isSidebarOpen,
+        'navigation-tab-width-medium': isOnMediumDesktop && isSidebarOpen,
+      })}
+    >
       <div
-        ref={containerRef}
-        className={classNames('sequence-navigation-tabs-container', {
-          'navigation-tab-width': isOnXLDesktop && isSidebarOpen,
-        })}
+        className="sequence-navigation-tabs-container"
       >
         <div
           className="sequence-navigation-tabs d-flex flex-grow-1"
           style={shouldDisplayDropdown ? invisibleStyle : null}
+          ref={containerRef}
         >
           {unitIds.map(buttonUnitId => (
             <UnitButton

src/courseware/course/sequence/sequence-navigation/hooks.js

@@ -73,9 +73,19 @@ export function useSequenceNavigationMetadata(currentSequenceId, currentUnitId)
   };
 }
 
+export function useIsOnMediumDesktop() {
+  const windowSize = useWindowSize();
+  return windowSize.width >= breakpoints.medium.minWidth && windowSize.width < breakpoints.extraLarge.minWidth;
+}
+
+export function useIsOnLargeDesktop() {
+  const windowSize = useWindowSize();
+  return windowSize.width >= breakpoints.extraLarge.minWidth && windowSize.width < breakpoints.extraLarge.maxWidth;
+}
+
 export function useIsOnXLDesktop() {
   const windowSize = useWindowSize();
-  return windowSize.width >= breakpoints.extraLarge.minWidth;
+  return windowSize.width >= breakpoints.extraLarge.maxWidth;
 }
 
 export function useIsSidebarOpen(unitId) {
@@ -84,6 +94,6 @@ export function useIsSidebarOpen(unitId) {
   const { currentSidebar } = useContext(isNewDiscussionSidebarViewEnabled ? NewSidebarContext : SidebarContext);
   const topic = useModel('discussionTopics', unitId);
 
-  return (currentSidebar === WIDGETS.NOTIFICATIONS) || (
+  return (currentSidebar === WIDGETS.NOTIFICATIONS) || (currentSidebar === 'DISCUSSIONS_NOTIFICATIONS') || (
     currentSidebar === WIDGETS.DISCUSSIONS && !!(topic?.id || topic?.enabledInContext));
 }

src/generic/tabs/useIndexOfLastVisibleChild.js

@@ -30,7 +30,7 @@ const invisibleStyle = {
  *    included when determining which children will fit or not. Usage of this ref
  *    is optional.
  */
-export default function useIndexOfLastVisibleChild() {
+export default function useIndexOfLastVisibleChild(isSidebarOpen) {
   const containerElementRef = useRef(null);
   const overflowElementRef = useRef(null);
   const containingRectRef = useRef({});
@@ -72,7 +72,7 @@ export default function useIndexOfLastVisibleChild() {
 
     setIndexOfLastVisibleChild(nextIndexOfLastVisibleChild);
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [windowSize, containerElementRef.current]);
+  }, [windowSize, containerElementRef.current, isSidebarOpen]);
 
   return [indexOfLastVisibleChild, containerElementRef, invisibleStyle, overflowElementRef];
 }

src/index.scss

@@ -173,8 +173,16 @@
     }
   }
 
-  .navigation-tab-width {
-    max-width: 46rem;
+  .navigation-tab-width-xl {
+    max-width: 47rem;
+  }
+
+  .navigation-tab-width-large {
+    max-width: 28rem;
+  }
+
+  .navigation-tab-width-medium{
+    max-width: 23.5rem;
   }
 
   .sequence-navigation-dropdown {