From e86335c5d8cda31a8bf7a4507ddac5683796fc0f Mon Sep 17 00:00:00 2001
From: julianajlk <julianajlk@gmail.com>
Date: Mon, 15 Mar 2021 16:44:51 -0400
Subject: [PATCH 01/20] Add Sidebar and SidebarNotificationButton components

---
 src/courseware/course/Course.jsx              | 41 +++++++++---
 src/courseware/course/CourseBreadcrumbs.jsx   |  2 +-
 src/courseware/course/Sidebar.jsx             | 43 +++++++++++++
 src/courseware/course/Sidebar.scss            | 63 +++++++++++++++++++
 .../course/SidebarNotificationButton.jsx      | 28 +++++++++
 .../course/SidebarNotificationButton.scss     | 44 +++++++++++++
 src/courseware/course/messages.js             | 26 ++++++++
 src/courseware/course/sequence/Sequence.jsx   | 18 ++++++
 .../SequenceNavigation.jsx                    | 18 +++++-
 src/index.scss                                |  8 +++
 10 files changed, 280 insertions(+), 11 deletions(-)
 create mode 100644 src/courseware/course/Sidebar.jsx
 create mode 100644 src/courseware/course/Sidebar.scss
 create mode 100644 src/courseware/course/SidebarNotificationButton.jsx
 create mode 100644 src/courseware/course/SidebarNotificationButton.scss
 create mode 100644 src/courseware/course/messages.js

diff --git a/src/courseware/course/Course.jsx b/src/courseware/course/Course.jsx
index 2220d63e48..cc1b7cf1d5 100644
--- a/src/courseware/course/Course.jsx
+++ b/src/courseware/course/Course.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
 import { useDispatch } from 'react-redux';
@@ -13,8 +13,11 @@ import Sequence from './sequence';
 import { CelebrationModal, shouldCelebrateOnSectionLoad } from './celebration';
 import ContentTools from './content-tools';
 import CourseBreadcrumbs from './CourseBreadcrumbs';
+import SidebarNotificationButton from './SidebarNotificationButton';
+
 import CourseSock from '../../generic/course-sock';
 import { useModel } from '../../generic/model-store';
+import useWindowSize from '../../generic/tabs/useWindowSize';
 
 /** [MM-P2P] Experiment */
 import { initCoursewareMMP2P, MMP2PBlockModal } from '../../experiments/mm-p2p';
@@ -60,6 +63,15 @@ function Course({
   /** [MM-P2P] Experiment */
   const MMP2P = initCoursewareMMP2P(courseId, sequenceId, unitId);
 
+  const windowSize = useWindowSize();
+  const isMobileWidth = windowSize.width <= 576;
+
+  const [sidebarVisible, setSidebar] = useState(false);
+  const isSidebarVisible = () => sidebarVisible && setSidebar;
+  const toggleSidebar = () => {
+    if (!sidebarVisible) { setSidebar(true); } else { setSidebar(false); }
+  };
+
   return (
     <>
       <Helmet>
@@ -76,13 +88,22 @@ function Course({
           }}
         />
       )}
-      <CourseBreadcrumbs
-        courseId={courseId}
-        sectionId={section ? section.id : null}
-        sequenceId={sequenceId}
-        //* * [MM-P2P] Experiment */
-        mmp2p={MMP2P}
-      />
+      <div className="breadcrumb-container">
+        <CourseBreadcrumbs
+          courseId={courseId}
+          sectionId={section ? section.id : null}
+          sequenceId={sequenceId}
+          //* * [MM-P2P] Experiment */
+          mmp2p={MMP2P}
+        />
+        { !isMobileWidth ? (
+          <SidebarNotificationButton
+            toggleSidebar={toggleSidebar}
+            isSidebarVisible={isSidebarVisible}
+          />
+        ) : null}
+      </div>
+
       <AlertList topic="sequence" />
       <Sequence
         unitId={unitId}
@@ -91,6 +112,10 @@ function Course({
         unitNavigationHandler={unitNavigationHandler}
         nextSequenceHandler={nextSequenceHandler}
         previousSequenceHandler={previousSequenceHandler}
+        toggleSidebar={toggleSidebar}
+        isSidebarVisible={isSidebarVisible}
+        sidebarVisible={sidebarVisible}
+        isMobileWidth={isMobileWidth}
         //* * [MM-P2P] Experiment */
         mmp2p={MMP2P}
       />
diff --git a/src/courseware/course/CourseBreadcrumbs.jsx b/src/courseware/course/CourseBreadcrumbs.jsx
index a90dd5e4b3..d9890a0734 100644
--- a/src/courseware/course/CourseBreadcrumbs.jsx
+++ b/src/courseware/course/CourseBreadcrumbs.jsx
@@ -60,7 +60,7 @@ export default function CourseBreadcrumbs({
   }, [courseStatus, sequenceStatus]);
 
   return (
-    <nav aria-label="breadcrumb" className="my-4">
+    <nav aria-label="breadcrumb" className="my-4 d-inline-block">
       <ol className="list-unstyled d-flex m-0">
         <CourseBreadcrumb
           url={`${getConfig().LMS_BASE_URL}/courses/${course.id}/course/`}
diff --git a/src/courseware/course/Sidebar.jsx b/src/courseware/course/Sidebar.jsx
new file mode 100644
index 0000000000..8928b94195
--- /dev/null
+++ b/src/courseware/course/Sidebar.jsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Icon } from '@edx/paragon';
+import { ArrowBackIos, Close } from '@edx/paragon/icons';
+import './Sidebar.scss';
+import messages from './messages';
+
+function Sidebar({
+  intl, sidebarVisible, toggleSidebar, isMobileWidth,
+}) {
+  return (
+    sidebarVisible ? (
+      <div className="sidebar-container ml-0 ml-sm-4">
+        {isMobileWidth
+          ? (
+            <div className="mobile-close-container" onClick={() => { toggleSidebar(); }} onKeyDown={() => { toggleSidebar(); }} role="button" tabIndex="0" alt={intl.formatMessage(messages.responsiveCloseSidebar)}>
+              <Icon src={ArrowBackIos} />
+              <span className="mobile-close">{intl.formatMessage(messages.responsiveCloseSidebar)}</span>
+            </div>
+          )
+          : null}
+        <div className="sidebar-header px-3">
+          <span>{intl.formatMessage(messages.notification)}</span>
+          {!isMobileWidth
+            ? <Icon src={Close} className="close-btn" onClick={() => { toggleSidebar(); }} onKeyDown={() => { toggleSidebar(); }} role="button" tabIndex="0" alt={intl.formatMessage(messages.closeButton)} />
+            : null}
+        </div>
+        <div className="sidebar-divider" />
+        {/* expiration box to be inserted here */}
+      </div>
+    ) : null
+  );
+}
+
+Sidebar.propTypes = {
+  intl: intlShape.isRequired,
+  toggleSidebar: PropTypes.func.isRequired,
+  sidebarVisible: PropTypes.bool.isRequired,
+  isMobileWidth: PropTypes.bool.isRequired,
+};
+
+export default injectIntl(Sidebar);
diff --git a/src/courseware/course/Sidebar.scss b/src/courseware/course/Sidebar.scss
new file mode 100644
index 0000000000..788ea1c494
--- /dev/null
+++ b/src/courseware/course/Sidebar.scss
@@ -0,0 +1,63 @@
+@import "~@edx/brand/paragon/fonts";
+@import "~@edx/brand/paragon/variables";
+@import "~@edx/paragon/scss/core/core";
+@import "~@edx/brand/paragon/overrides";
+
+.sidebar-container {
+    border: 1px solid rgb(225, 221, 219);
+    width: 330px;
+    vertical-align: top;
+
+    @media (max-width: map-get($grid-breakpoints, 'md')) {
+        position: fixed; 
+        top: 0; 
+        bottom: 0; 
+        left: 0; 
+        right: 0;
+        width: 100%;
+        height: 100%;
+        background-color: white;
+        margin: 0;
+        border: none;
+    }
+}
+
+.sidebar-header {
+    padding-top: 14px;
+    padding-bottom: 10px;
+    font-size: 1rem;
+
+    span {
+        display: inline-block;
+    }
+}
+
+.close-btn {
+    float: right;
+}
+
+.sidebar-divider {
+    height: 0.5rem;
+    background: rgb(249, 249, 249);
+    border-top: 1px solid rgb(225, 221, 219);
+    border-bottom: 1px solid rgb(225, 221, 219);
+}
+
+.mobile-close-container {
+    padding-top: 0.5rem;
+    padding-bottom: 0.75rem;
+    border-bottom: 1px solid #E4E4E4;
+
+    span {
+        display: inline-block;
+    }
+    svg {
+        margin-top: 7px;
+        margin-left: 15px;
+    }
+}
+
+.mobile-close {
+    font-weight: 500;
+    margin-left: 1.5rem;
+}
\ No newline at end of file
diff --git a/src/courseware/course/SidebarNotificationButton.jsx b/src/courseware/course/SidebarNotificationButton.jsx
new file mode 100644
index 0000000000..fa4c376fe1
--- /dev/null
+++ b/src/courseware/course/SidebarNotificationButton.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Icon } from '@edx/paragon';
+import { WatchOutline } from '@edx/paragon/icons';
+
+import './SidebarNotificationButton.scss';
+import messages from './messages';
+
+function SidebarNotificationButton({ intl, toggleSidebar, isSidebarVisible }) {
+  return (
+    <div className={classNames('sidebar-notification-btn-container', { active: isSidebarVisible() })} onClick={() => { toggleSidebar(); }} onKeyDown={() => { toggleSidebar(); }} role="button" tabIndex="0">
+      <div className="sidebar-notification-btn">
+        <Icon src={WatchOutline} className="sidebar-notification-icon" alt={intl.formatMessage(messages.notificationButton)} />
+        <span className="notification-dot p-1" />
+      </div>
+    </div>
+  );
+}
+
+SidebarNotificationButton.propTypes = {
+  intl: intlShape.isRequired,
+  toggleSidebar: PropTypes.func.isRequired,
+  isSidebarVisible: PropTypes.func.isRequired,
+};
+
+export default injectIntl(SidebarNotificationButton);
diff --git a/src/courseware/course/SidebarNotificationButton.scss b/src/courseware/course/SidebarNotificationButton.scss
new file mode 100644
index 0000000000..e6ef5b19d1
--- /dev/null
+++ b/src/courseware/course/SidebarNotificationButton.scss
@@ -0,0 +1,44 @@
+@import "~@edx/brand/paragon/fonts";
+@import "~@edx/brand/paragon/variables";
+@import "~@edx/paragon/scss/core/core";
+@import "~@edx/brand/paragon/overrides";
+
+.sidebar-notification-btn-container {
+    border: 1px solid $gray-200;
+    width: 54px;
+    height: 40px;
+    float: right;
+    margin-top: 10px;
+
+    @media (max-width: map-get($grid-breakpoints, 'md')) {
+        border: none;
+        margin: 5px 20px 0 20px;
+    }
+}
+
+.active {
+    border-bottom: 3px solid $primary-700;
+}
+
+.sidebar-notification-btn {
+    position: relative;
+}
+
+.sidebar-notification-icon {
+    top: 7px;
+    bottom: 13px;
+    margin: 0 auto;
+    width: 20px;
+}
+
+.notification-dot {
+    right: 15px;
+    top: 0.5rem;
+    background-color: $danger-500;
+    border-radius: 50%;
+    position: absolute;
+    display: inline-block;
+    @media (max-width: map-get($grid-breakpoints, 'md')) {
+        right: 7px;
+    }
+}
\ No newline at end of file
diff --git a/src/courseware/course/messages.js b/src/courseware/course/messages.js
new file mode 100644
index 0000000000..858865b663
--- /dev/null
+++ b/src/courseware/course/messages.js
@@ -0,0 +1,26 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  notificationButton: {
+    id: 'sidebar.notificationButton',
+    defaultMessage: 'Sidebar notification button',
+    description: 'Button to open the sidebar',
+  },
+  closeButton: {
+    id: 'sidebar.closeButton',
+    defaultMessage: 'Close',
+    description: 'Button for the learner to close the sidebar',
+  },
+  responsiveCloseSidebar: {
+    id: 'sidebar.responsiveCloseSidebar',
+    defaultMessage: 'Back to course',
+    description: 'Responsive link for the learner to go back to course and close sidebar',
+  },
+  notification: {
+    id: 'sidebar.notification',
+    defaultMessage: 'Notifications',
+    description: 'Text displayed for sidebar notifications',
+  },
+});
+
+export default messages;
diff --git a/src/courseware/course/sequence/Sequence.jsx b/src/courseware/course/sequence/Sequence.jsx
index 010a683cd5..57bee50129 100644
--- a/src/courseware/course/sequence/Sequence.jsx
+++ b/src/courseware/course/sequence/Sequence.jsx
@@ -19,6 +19,7 @@ import CourseLicense from '../course-license';
 import messages from './messages';
 import { SequenceNavigation, UnitNavigation } from './sequence-navigation';
 import SequenceContent from './SequenceContent';
+import Sidebar from '../Sidebar';
 
 /** [MM-P2P] Experiment */
 import { isMobile } from '../../../experiments/mm-p2p/utils';
@@ -32,6 +33,10 @@ function Sequence({
   nextSequenceHandler,
   previousSequenceHandler,
   intl,
+  toggleSidebar,
+  sidebarVisible,
+  isSidebarVisible,
+  isMobileWidth,
   mmp2p,
 }) {
   const course = useModel('coursewareMeta', courseId);
@@ -167,6 +172,9 @@ function Sequence({
                 handlePrevious();
               }}
               goToCourseExitPage={() => goToCourseExitPage()}
+              toggleSidebar={toggleSidebar}
+              isSidebarVisible={isSidebarVisible}
+              isMobileWidth={isMobileWidth}
             />
             <div className="unit-container flex-grow-1">
               <SequenceContent
@@ -196,6 +204,12 @@ function Sequence({
             </div>
           </div>
 
+          <Sidebar
+            toggleSidebar={toggleSidebar}
+            sidebarVisible={sidebarVisible}
+            isMobileWidth={isMobileWidth}
+          />
+
           {/** [MM-P2P] Experiment */}
           {(mmp2p.state.isEnabled && mmp2p.flyover.isVisible) && (
             isMobile()
@@ -224,6 +238,10 @@ Sequence.propTypes = {
   nextSequenceHandler: PropTypes.func.isRequired,
   previousSequenceHandler: PropTypes.func.isRequired,
   intl: intlShape.isRequired,
+  toggleSidebar: PropTypes.func.isRequired,
+  sidebarVisible: PropTypes.bool.isRequired,
+  isSidebarVisible: PropTypes.func.isRequired,
+  isMobileWidth: PropTypes.bool.isRequired,
 
   /** [MM-P2P] Experiment */
   mmp2p: PropTypes.shape({
diff --git a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
index aaa6eb43f9..a86bf59fc3 100644
--- a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
+++ b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
@@ -13,6 +13,7 @@ import SequenceNavigationTabs from './SequenceNavigationTabs';
 import { useSequenceNavigationMetadata } from './hooks';
 import { useModel } from '../../../../generic/model-store';
 import { LOADED } from '../../../data/slice';
+import SidebarNotificationButton from '../../SidebarNotificationButton';
 
 import messages from './messages';
 /** [MM-P2P] Experiment */
@@ -27,6 +28,9 @@ function SequenceNavigation({
   nextSequenceHandler,
   previousSequenceHandler,
   goToCourseExitPage,
+  toggleSidebar,
+  isSidebarVisible,
+  isMobileWidth,
   mmp2p,
 }) {
   const sequence = useModel('sequences', sequenceId);
@@ -67,7 +71,7 @@ function SequenceNavigation({
     const disabled = isLastUnit && !exitActive;
     return (
       <Button variant="link" className="next-btn" onClick={buttonOnClick} disabled={disabled}>
-        {buttonText}
+        {!isMobileWidth ? buttonText : null}
         <FontAwesomeIcon icon={faChevronRight} className="ml-2" size="sm" />
       </Button>
     );
@@ -77,11 +81,18 @@ function SequenceNavigation({
     <nav className={classNames('sequence-navigation', className)}>
       <Button variant="link" className="previous-btn" onClick={previousSequenceHandler} disabled={isFirstUnit}>
         <FontAwesomeIcon icon={faChevronLeft} className="mr-2" size="sm" />
-        {intl.formatMessage(messages.previousButton)}
+        {!isMobileWidth ? intl.formatMessage(messages.previousButton) : null}
       </Button>
       {renderUnitButtons()}
       {renderNextButton()}
 
+      {isMobileWidth ? (
+        <SidebarNotificationButton
+          toggleSidebar={toggleSidebar}
+          isSidebarVisible={isSidebarVisible}
+        />
+      ) : null}
+
       {/** [MM-P2P] Experiment */}
       { mmp2p.state.isEnabled && <MMP2PFlyoverTriggerMobile options={mmp2p} /> }
       <div className="rev1512ToggleFlyoverSequenceLocation" />
@@ -98,6 +109,9 @@ SequenceNavigation.propTypes = {
   nextSequenceHandler: PropTypes.func.isRequired,
   previousSequenceHandler: PropTypes.func.isRequired,
   goToCourseExitPage: PropTypes.func.isRequired,
+  toggleSidebar: PropTypes.func.isRequired,
+  isSidebarVisible: PropTypes.func.isRequired,
+  isMobileWidth: PropTypes.bool.isRequired,
   /** [MM-P2P] Experiment */
   mmp2p: PropTypes.shape({
     state: PropTypes.shape({
diff --git a/src/index.scss b/src/index.scss
index 8e8f03fac6..9cacc02c96 100755
--- a/src/index.scss
+++ b/src/index.scss
@@ -94,6 +94,12 @@
   }
 }
 
+.breadcrumb-container {
+  @media (min-width: map-get($grid-breakpoints, 'sm')) {
+    max-width: 1440px;
+  }
+}
+
 .sequence-container {
   display: flex;
   flex-direction: column;
@@ -361,6 +367,8 @@
 
 // Import component-specific sass files
 @import 'courseware/course/celebration/CelebrationModal.scss';
+@import 'courseware/course/Sidebar.scss';
+@import 'courseware/course/SidebarNotificationButton.scss';
 @import 'shared/streak-celebration/StreakCelebrationModal.scss';
 @import 'courseware/course/content-tools/calculator/calculator.scss';
 @import 'courseware/course/content-tools/contentTools.scss';

From 0853f95a3cedc2d77235f7a5ae9e89a262aa659f Mon Sep 17 00:00:00 2001
From: julianajlk <julianajlk@gmail.com>
Date: Mon, 15 Mar 2021 22:07:27 -0400
Subject: [PATCH 02/20] Add tests

---
 src/courseware/course/Course.test.jsx         | 22 +++++++++
 src/courseware/course/Sidebar.test.jsx        | 48 +++++++++++++++++++
 .../course/sequence/Sequence.test.jsx         | 11 +++++
 .../SequenceNavigation.test.jsx               | 14 ++++++
 4 files changed, 95 insertions(+)
 create mode 100644 src/courseware/course/Sidebar.test.jsx

diff --git a/src/courseware/course/Course.test.jsx b/src/courseware/course/Course.test.jsx
index 389ce8ddd5..b1ad0a5351 100644
--- a/src/courseware/course/Course.test.jsx
+++ b/src/courseware/course/Course.test.jsx
@@ -19,6 +19,7 @@ describe('Course', () => {
     nextSequenceHandler: () => {},
     previousSequenceHandler: () => {},
     unitNavigationHandler: () => {},
+    toggleSidebar: () => {},
   };
 
   beforeAll(async () => {
@@ -85,6 +86,27 @@ describe('Course', () => {
     expect(screen.getByRole('button', { name: 'Learn About Verified Certificates' })).toBeInTheDocument();
   });
 
+  it('displays sidebar notification button', async () => {
+    const toggleSidebar = jest.fn();
+    const isSidebarVisible = jest.fn();
+
+    const courseMetadata = Factory.build('courseMetadata');
+    const testStore = await initializeTestStore({ courseMetadata, excludeFetchSequence: true }, false);
+    const testData = {
+      ...mockData,
+      toggleSidebar,
+      isSidebarVisible,
+    };
+    render(<Course {...testData} courseId={courseMetadata.id} />, { store: testStore });
+
+    const sidebarButton = screen.getByRole('button', { name: /Sidebar notification button/i });
+
+    fireEvent.click(sidebarButton);
+    expect(sidebarButton)
+      .toBeInTheDocument()
+      .toHaveClass('active');
+  });
+
   it('displays offer and expiration alert', async () => {
     const courseMetadata = Factory.build('courseMetadata', {
       access_expiration: {
diff --git a/src/courseware/course/Sidebar.test.jsx b/src/courseware/course/Sidebar.test.jsx
new file mode 100644
index 0000000000..6117549b93
--- /dev/null
+++ b/src/courseware/course/Sidebar.test.jsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { Factory } from 'rosie';
+import {
+  render, initializeTestStore, screen, fireEvent, waitFor,
+} from '../../setupTest';
+import Sidebar from './Sidebar';
+
+describe('Sidebar', () => {
+  let mockData;
+  const courseMetadata = Factory.build('courseMetadata');
+
+  beforeEach(async () => {
+    mockData = {
+      sidebarVisible: false,
+      toggleSidebar: () => {},
+      isResponsiveWidth: false,
+    };
+  });
+
+  it('renders sidebar', async () => {
+    const testStore = await initializeTestStore({ courseMetadata, excludeFetchSequence: true }, false);
+    const testData = { ...mockData, sidebarVisible: true };
+    const { container } = render(<Sidebar {...testData} />, { store: testStore });
+
+    expect(container).toBeInTheDocument();
+    expect(container).toHaveTextContent('Notifications');
+  });
+
+  it('renders sidebar and mobile close button at responsive width', async () => {
+    const sidebarVisible = true;
+    const isResponsiveWidth = true;
+    const toggleSidebar = jest.fn();
+    const testStore = await initializeTestStore({ courseMetadata, excludeFetchSequence: true }, false);
+    const testData = {
+      ...mockData,
+      sidebarVisible,
+      isResponsiveWidth,
+      toggleSidebar,
+    };
+    render(<Sidebar {...testData} />, { store: testStore });
+
+    const responsiveCloseButton = screen.getByRole('button', { name: 'Back to course' });
+    await waitFor(() => expect(responsiveCloseButton).toBeInTheDocument());
+
+    fireEvent.click(responsiveCloseButton);
+    expect(toggleSidebar).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/courseware/course/sequence/Sequence.test.jsx b/src/courseware/course/sequence/Sequence.test.jsx
index 9d710b8490..720aa028a3 100644
--- a/src/courseware/course/sequence/Sequence.test.jsx
+++ b/src/courseware/course/sequence/Sequence.test.jsx
@@ -28,6 +28,7 @@ describe('Sequence', () => {
       unitNavigationHandler: () => {},
       nextSequenceHandler: () => {},
       previousSequenceHandler: () => {},
+      sidebarVisible: false,
     };
   });
 
@@ -129,6 +130,16 @@ describe('Sequence', () => {
     expect(screen.getAllByRole('button', { name: /previous|next/i }).length).toEqual(4);
   });
 
+  it('renders sidebar in sequence', async () => {
+    const testData = {
+      ...mockData,
+      sidebarVisible: true,
+    };
+
+    render(<Sequence {...testData} />);
+    expect(await screen.findByText('Notifications')).toBeInTheDocument();
+  });
+
   describe('sequence and unit navigation buttons', () => {
     let testStore;
     const sequenceBlocks = [Factory.build(
diff --git a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.test.jsx b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.test.jsx
index 58ac8c576e..96696a4501 100644
--- a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.test.jsx
+++ b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.test.jsx
@@ -29,6 +29,7 @@ describe('Sequence Navigation', () => {
       onNavigate: () => {},
       nextSequenceHandler: () => {},
       goToCourseExitPage: () => {},
+      isMobileWidth: false,
     };
   });
 
@@ -162,4 +163,17 @@ describe('Sequence Navigation', () => {
     fireEvent.click(screen.getByRole('button', { name: /next/i }));
     expect(nextSequenceHandler).toHaveBeenCalledTimes(1);
   });
+
+  it('renders sidebar notification button in sequence', async () => {
+    const toggleSidebar = jest.fn();
+    const isSidebarVisible = jest.fn();
+    const isMobileWidth = true;
+    render(<SequenceNavigation {...mockData} {...{ toggleSidebar, isSidebarVisible, isMobileWidth }} />);
+
+    const sidebarButton = screen.getByRole('button', { name: /Sidebar notification button/i });
+
+    expect(sidebarButton).toBeInTheDocument();
+    fireEvent.click(sidebarButton);
+    expect(toggleSidebar).toHaveBeenCalledTimes(1);
+  });
 });

From ff81ee19828dd5565a4a0dc1752b9e96705abbdd Mon Sep 17 00:00:00 2001
From: julianajlk <julianajlk@gmail.com>
Date: Thu, 18 Mar 2021 10:25:30 -0400
Subject: [PATCH 03/20] Change resposiveness to apply at tablet md size

---
 src/courseware/course/Course.jsx              |  6 +++---
 src/courseware/course/Sidebar.jsx             | 20 ++++++++++++-------
 src/courseware/course/Sidebar.scss            | 14 ++++++-------
 .../course/SidebarNotificationButton.jsx      |  2 +-
 .../course/SidebarNotificationButton.scss     |  4 ++--
 src/courseware/course/sequence/Sequence.jsx   | 19 ++++++++++--------
 .../SequenceNavigation.jsx                    | 17 +++++++++-------
 .../SequenceNavigation.test.jsx               |  6 +++---
 8 files changed, 49 insertions(+), 39 deletions(-)

diff --git a/src/courseware/course/Course.jsx b/src/courseware/course/Course.jsx
index cc1b7cf1d5..b1074298a3 100644
--- a/src/courseware/course/Course.jsx
+++ b/src/courseware/course/Course.jsx
@@ -64,7 +64,7 @@ function Course({
   const MMP2P = initCoursewareMMP2P(courseId, sequenceId, unitId);
 
   const windowSize = useWindowSize();
-  const isMobileWidth = windowSize.width <= 576;
+  const isResponsiveWidth = windowSize.width <= 768;
 
   const [sidebarVisible, setSidebar] = useState(false);
   const isSidebarVisible = () => sidebarVisible && setSidebar;
@@ -96,7 +96,7 @@ function Course({
           //* * [MM-P2P] Experiment */
           mmp2p={MMP2P}
         />
-        { !isMobileWidth ? (
+        { !isResponsiveWidth ? (
           <SidebarNotificationButton
             toggleSidebar={toggleSidebar}
             isSidebarVisible={isSidebarVisible}
@@ -115,7 +115,7 @@ function Course({
         toggleSidebar={toggleSidebar}
         isSidebarVisible={isSidebarVisible}
         sidebarVisible={sidebarVisible}
-        isMobileWidth={isMobileWidth}
+        isResponsiveWidth={isResponsiveWidth}
         //* * [MM-P2P] Experiment */
         mmp2p={MMP2P}
       />
diff --git a/src/courseware/course/Sidebar.jsx b/src/courseware/course/Sidebar.jsx
index 8928b94195..d94b49ca91 100644
--- a/src/courseware/course/Sidebar.jsx
+++ b/src/courseware/course/Sidebar.jsx
@@ -7,12 +7,12 @@ import './Sidebar.scss';
 import messages from './messages';
 
 function Sidebar({
-  intl, sidebarVisible, toggleSidebar, isMobileWidth,
+  intl, sidebarVisible, toggleSidebar, isResponsiveWidth,
 }) {
   return (
     sidebarVisible ? (
-      <div className="sidebar-container ml-0 ml-sm-4">
-        {isMobileWidth
+      <div className="sidebar-container ml-0 ml-lg-4">
+        {isResponsiveWidth
           ? (
             <div className="mobile-close-container" onClick={() => { toggleSidebar(); }} onKeyDown={() => { toggleSidebar(); }} role="button" tabIndex="0" alt={intl.formatMessage(messages.responsiveCloseSidebar)}>
               <Icon src={ArrowBackIos} />
@@ -22,7 +22,7 @@ function Sidebar({
           : null}
         <div className="sidebar-header px-3">
           <span>{intl.formatMessage(messages.notification)}</span>
-          {!isMobileWidth
+          {!isResponsiveWidth
             ? <Icon src={Close} className="close-btn" onClick={() => { toggleSidebar(); }} onKeyDown={() => { toggleSidebar(); }} role="button" tabIndex="0" alt={intl.formatMessage(messages.closeButton)} />
             : null}
         </div>
@@ -35,9 +35,15 @@ function Sidebar({
 
 Sidebar.propTypes = {
   intl: intlShape.isRequired,
-  toggleSidebar: PropTypes.func.isRequired,
-  sidebarVisible: PropTypes.bool.isRequired,
-  isMobileWidth: PropTypes.bool.isRequired,
+  toggleSidebar: PropTypes.func,
+  sidebarVisible: PropTypes.bool,
+  isResponsiveWidth: PropTypes.bool,
+};
+
+Sidebar.defaultProps = {
+  toggleSidebar: null,
+  sidebarVisible: null,
+  isResponsiveWidth: null,
 };
 
 export default injectIntl(Sidebar);
diff --git a/src/courseware/course/Sidebar.scss b/src/courseware/course/Sidebar.scss
index 788ea1c494..a8b08157a2 100644
--- a/src/courseware/course/Sidebar.scss
+++ b/src/courseware/course/Sidebar.scss
@@ -4,7 +4,7 @@
 @import "~@edx/brand/paragon/overrides";
 
 .sidebar-container {
-    border: 1px solid rgb(225, 221, 219);
+    border: 1px solid $gray-200;
     width: 330px;
     vertical-align: top;
 
@@ -23,9 +23,7 @@
 }
 
 .sidebar-header {
-    padding-top: 14px;
-    padding-bottom: 10px;
-    font-size: 1rem;
+    padding: 0.625rem 0;
 
     span {
         display: inline-block;
@@ -38,15 +36,15 @@
 
 .sidebar-divider {
     height: 0.5rem;
-    background: rgb(249, 249, 249);
-    border-top: 1px solid rgb(225, 221, 219);
-    border-bottom: 1px solid rgb(225, 221, 219);
+    background: $gray-100;
+    border-top: 1px solid $gray-200;
+    border-bottom: 1px solid $gray-200;
 }
 
 .mobile-close-container {
     padding-top: 0.5rem;
     padding-bottom: 0.75rem;
-    border-bottom: 1px solid #E4E4E4;
+    border-bottom: 1px solid $gray-200;
 
     span {
         display: inline-block;
diff --git a/src/courseware/course/SidebarNotificationButton.jsx b/src/courseware/course/SidebarNotificationButton.jsx
index fa4c376fe1..45fe89daf8 100644
--- a/src/courseware/course/SidebarNotificationButton.jsx
+++ b/src/courseware/course/SidebarNotificationButton.jsx
@@ -10,7 +10,7 @@ import messages from './messages';
 
 function SidebarNotificationButton({ intl, toggleSidebar, isSidebarVisible }) {
   return (
-    <div className={classNames('sidebar-notification-btn-container', { active: isSidebarVisible() })} onClick={() => { toggleSidebar(); }} onKeyDown={() => { toggleSidebar(); }} role="button" tabIndex="0">
+    <div className={classNames('sidebar-notification-btn-container', { active: isSidebarVisible() })} data-testid="SidebarButton" onClick={() => { toggleSidebar(); }} onKeyDown={() => { toggleSidebar(); }} role="button" tabIndex="0" alt={intl.formatMessage(messages.notificationButton)}>
       <div className="sidebar-notification-btn">
         <Icon src={WatchOutline} className="sidebar-notification-icon" alt={intl.formatMessage(messages.notificationButton)} />
         <span className="notification-dot p-1" />
diff --git a/src/courseware/course/SidebarNotificationButton.scss b/src/courseware/course/SidebarNotificationButton.scss
index e6ef5b19d1..e7ff7261df 100644
--- a/src/courseware/course/SidebarNotificationButton.scss
+++ b/src/courseware/course/SidebarNotificationButton.scss
@@ -8,7 +8,7 @@
     width: 54px;
     height: 40px;
     float: right;
-    margin-top: 10px;
+    margin-top: 0.625rem;
 
     @media (max-width: map-get($grid-breakpoints, 'md')) {
         border: none;
@@ -28,7 +28,7 @@
     top: 7px;
     bottom: 13px;
     margin: 0 auto;
-    width: 20px;
+    width: 1.25rem;
 }
 
 .notification-dot {
diff --git a/src/courseware/course/sequence/Sequence.jsx b/src/courseware/course/sequence/Sequence.jsx
index 57bee50129..38f2c3370a 100644
--- a/src/courseware/course/sequence/Sequence.jsx
+++ b/src/courseware/course/sequence/Sequence.jsx
@@ -36,7 +36,7 @@ function Sequence({
   toggleSidebar,
   sidebarVisible,
   isSidebarVisible,
-  isMobileWidth,
+  isResponsiveWidth,
   mmp2p,
 }) {
   const course = useModel('coursewareMeta', courseId);
@@ -174,7 +174,7 @@ function Sequence({
               goToCourseExitPage={() => goToCourseExitPage()}
               toggleSidebar={toggleSidebar}
               isSidebarVisible={isSidebarVisible}
-              isMobileWidth={isMobileWidth}
+              isResponsiveWidth={isResponsiveWidth}
             />
             <div className="unit-container flex-grow-1">
               <SequenceContent
@@ -203,11 +203,10 @@ function Sequence({
               )}
             </div>
           </div>
-
           <Sidebar
             toggleSidebar={toggleSidebar}
             sidebarVisible={sidebarVisible}
-            isMobileWidth={isMobileWidth}
+            isResponsiveWidth={isResponsiveWidth}
           />
 
           {/** [MM-P2P] Experiment */}
@@ -238,10 +237,10 @@ Sequence.propTypes = {
   nextSequenceHandler: PropTypes.func.isRequired,
   previousSequenceHandler: PropTypes.func.isRequired,
   intl: intlShape.isRequired,
-  toggleSidebar: PropTypes.func.isRequired,
-  sidebarVisible: PropTypes.bool.isRequired,
-  isSidebarVisible: PropTypes.func.isRequired,
-  isMobileWidth: PropTypes.bool.isRequired,
+  toggleSidebar: PropTypes.func,
+  sidebarVisible: PropTypes.bool,
+  isSidebarVisible: PropTypes.func,
+  isResponsiveWidth: PropTypes.bool,
 
   /** [MM-P2P] Experiment */
   mmp2p: PropTypes.shape({
@@ -260,6 +259,10 @@ Sequence.propTypes = {
 Sequence.defaultProps = {
   sequenceId: null,
   unitId: null,
+  toggleSidebar: null,
+  sidebarVisible: null,
+  isSidebarVisible: null,
+  isResponsiveWidth: null,
 
   /** [MM-P2P] Experiment */
   mmp2p: {
diff --git a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
index a86bf59fc3..ec19ee9c29 100644
--- a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
+++ b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
@@ -30,7 +30,7 @@ function SequenceNavigation({
   goToCourseExitPage,
   toggleSidebar,
   isSidebarVisible,
-  isMobileWidth,
+  isResponsiveWidth,
   mmp2p,
 }) {
   const sequence = useModel('sequences', sequenceId);
@@ -71,7 +71,7 @@ function SequenceNavigation({
     const disabled = isLastUnit && !exitActive;
     return (
       <Button variant="link" className="next-btn" onClick={buttonOnClick} disabled={disabled}>
-        {!isMobileWidth ? buttonText : null}
+        {!isResponsiveWidth ? buttonText : null}
         <FontAwesomeIcon icon={faChevronRight} className="ml-2" size="sm" />
       </Button>
     );
@@ -81,12 +81,12 @@ function SequenceNavigation({
     <nav className={classNames('sequence-navigation', className)}>
       <Button variant="link" className="previous-btn" onClick={previousSequenceHandler} disabled={isFirstUnit}>
         <FontAwesomeIcon icon={faChevronLeft} className="mr-2" size="sm" />
-        {!isMobileWidth ? intl.formatMessage(messages.previousButton) : null}
+        {!isResponsiveWidth ? intl.formatMessage(messages.previousButton) : null}
       </Button>
       {renderUnitButtons()}
       {renderNextButton()}
 
-      {isMobileWidth ? (
+      {isResponsiveWidth ? (
         <SidebarNotificationButton
           toggleSidebar={toggleSidebar}
           isSidebarVisible={isSidebarVisible}
@@ -109,9 +109,9 @@ SequenceNavigation.propTypes = {
   nextSequenceHandler: PropTypes.func.isRequired,
   previousSequenceHandler: PropTypes.func.isRequired,
   goToCourseExitPage: PropTypes.func.isRequired,
-  toggleSidebar: PropTypes.func.isRequired,
-  isSidebarVisible: PropTypes.func.isRequired,
-  isMobileWidth: PropTypes.bool.isRequired,
+  toggleSidebar: PropTypes.func,
+  isSidebarVisible: PropTypes.func,
+  isResponsiveWidth: PropTypes.bool,
   /** [MM-P2P] Experiment */
   mmp2p: PropTypes.shape({
     state: PropTypes.shape({
@@ -123,6 +123,9 @@ SequenceNavigation.propTypes = {
 SequenceNavigation.defaultProps = {
   className: null,
   unitId: null,
+  toggleSidebar: null,
+  isSidebarVisible: null,
+  isResponsiveWidth: null,
 
   /** [MM-P2P] Experiment */
   mmp2p: {
diff --git a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.test.jsx b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.test.jsx
index 96696a4501..9c3220fa25 100644
--- a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.test.jsx
+++ b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.test.jsx
@@ -29,7 +29,7 @@ describe('Sequence Navigation', () => {
       onNavigate: () => {},
       nextSequenceHandler: () => {},
       goToCourseExitPage: () => {},
-      isMobileWidth: false,
+      isResponsiveWidth: false,
     };
   });
 
@@ -167,8 +167,8 @@ describe('Sequence Navigation', () => {
   it('renders sidebar notification button in sequence', async () => {
     const toggleSidebar = jest.fn();
     const isSidebarVisible = jest.fn();
-    const isMobileWidth = true;
-    render(<SequenceNavigation {...mockData} {...{ toggleSidebar, isSidebarVisible, isMobileWidth }} />);
+    const isResponsiveWidth = true;
+    render(<SequenceNavigation {...mockData} {...{ toggleSidebar, isSidebarVisible, isResponsiveWidth }} />);
 
     const sidebarButton = screen.getByRole('button', { name: /Sidebar notification button/i });
 

From b227c941e5daa77553f8d42231b3e6742c7eadf9 Mon Sep 17 00:00:00 2001
From: julianajlk <julianajlk@gmail.com>
Date: Tue, 23 Mar 2021 10:16:16 -0400
Subject: [PATCH 04/20] Remove REV-1512 experiment code

---
 .../course/sequence/sequence-navigation/SequenceNavigation.jsx   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
index ec19ee9c29..1ebad35f45 100644
--- a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
+++ b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
@@ -95,7 +95,6 @@ function SequenceNavigation({
 
       {/** [MM-P2P] Experiment */}
       { mmp2p.state.isEnabled && <MMP2PFlyoverTriggerMobile options={mmp2p} /> }
-      <div className="rev1512ToggleFlyoverSequenceLocation" />
     </nav>
   );
 }

From fea9899bdd0da32ed0690c0c89741fdc4cb4e881 Mon Sep 17 00:00:00 2001
From: julianajlk <julianajlk@gmail.com>
Date: Fri, 2 Apr 2021 10:27:12 -0400
Subject: [PATCH 05/20] After UX asked for changes in responsive version

---
 src/courseware/course/Course.jsx              | 16 ++++++----
 src/courseware/course/CourseBreadcrumbs.jsx   |  6 +++-
 src/courseware/course/Sidebar.jsx             | 16 ++++++----
 src/courseware/course/Sidebar.scss            | 26 +++++++++------
 .../course/SidebarNotificationButton.jsx      | 17 +++++++---
 .../course/SidebarNotificationButton.scss     | 32 +++++++++----------
 src/courseware/course/sequence/Sequence.jsx   | 13 +++++---
 .../SequenceNavigation.jsx                    | 16 +++++-----
 src/index.scss                                |  1 +
 9 files changed, 86 insertions(+), 57 deletions(-)

diff --git a/src/courseware/course/Course.jsx b/src/courseware/course/Course.jsx
index b1074298a3..81facbecbb 100644
--- a/src/courseware/course/Course.jsx
+++ b/src/courseware/course/Course.jsx
@@ -60,11 +60,9 @@ function Course({
     courseId, sequenceId, unitId, celebrateFirstSection, dispatch, celebrations,
   );
 
-  /** [MM-P2P] Experiment */
-  const MMP2P = initCoursewareMMP2P(courseId, sequenceId, unitId);
-
   const windowSize = useWindowSize();
-  const isResponsiveWidth = windowSize.width <= 768;
+  const isTabletWidth = windowSize.width < 992;
+  const isMobileWidth = windowSize.width < 576;
 
   const [sidebarVisible, setSidebar] = useState(false);
   const isSidebarVisible = () => sidebarVisible && setSidebar;
@@ -72,6 +70,9 @@ function Course({
     if (!sidebarVisible) { setSidebar(true); } else { setSidebar(false); }
   };
 
+  /** [MM-P2P] Experiment */
+  const MMP2P = initCoursewareMMP2P(courseId, sequenceId, unitId);
+
   return (
     <>
       <Helmet>
@@ -93,10 +94,12 @@ function Course({
           courseId={courseId}
           sectionId={section ? section.id : null}
           sequenceId={sequenceId}
+          isMobileWidth={isMobileWidth}
           //* * [MM-P2P] Experiment */
           mmp2p={MMP2P}
         />
-        { !isResponsiveWidth ? (
+        {/* JK: add conditional/cookie to hide/show Sidebar here */}
+        { !isMobileWidth ? (
           <SidebarNotificationButton
             toggleSidebar={toggleSidebar}
             isSidebarVisible={isSidebarVisible}
@@ -115,7 +118,8 @@ function Course({
         toggleSidebar={toggleSidebar}
         isSidebarVisible={isSidebarVisible}
         sidebarVisible={sidebarVisible}
-        isResponsiveWidth={isResponsiveWidth}
+        isTabletWidth={isTabletWidth}
+        isMobileWidth={isMobileWidth}
         //* * [MM-P2P] Experiment */
         mmp2p={MMP2P}
       />
diff --git a/src/courseware/course/CourseBreadcrumbs.jsx b/src/courseware/course/CourseBreadcrumbs.jsx
index d9890a0734..7b79c15253 100644
--- a/src/courseware/course/CourseBreadcrumbs.jsx
+++ b/src/courseware/course/CourseBreadcrumbs.jsx
@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react';
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { getConfig } from '@edx/frontend-platform';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
@@ -39,6 +40,7 @@ export default function CourseBreadcrumbs({
   courseId,
   sectionId,
   sequenceId,
+  isMobileWidth,
   /** [MM-P2P] Experiment */
   mmp2p,
 }) {
@@ -60,7 +62,7 @@ export default function CourseBreadcrumbs({
   }, [courseStatus, sequenceStatus]);
 
   return (
-    <nav aria-label="breadcrumb" className="my-4 d-inline-block">
+    <nav aria-label="breadcrumb" className={classNames('my-4 d-inline-block', { 'col-10': !isMobileWidth })}>
       <ol className="list-unstyled d-flex m-0">
         <CourseBreadcrumb
           url={`${getConfig().LMS_BASE_URL}/courses/${course.id}/course/`}
@@ -101,6 +103,7 @@ CourseBreadcrumbs.propTypes = {
   courseId: PropTypes.string.isRequired,
   sectionId: PropTypes.string,
   sequenceId: PropTypes.string,
+  isMobileWidth: PropTypes.bool,
   /** [MM-P2P] Experiment */
   mmp2p: PropTypes.shape({
     state: PropTypes.shape({
@@ -112,6 +115,7 @@ CourseBreadcrumbs.propTypes = {
 CourseBreadcrumbs.defaultProps = {
   sectionId: null,
   sequenceId: null,
+  isMobileWidth: null,
 
   /** [MM-P2P] Experiment */
   mmp2p: {},
diff --git a/src/courseware/course/Sidebar.jsx b/src/courseware/course/Sidebar.jsx
index d94b49ca91..22757061d4 100644
--- a/src/courseware/course/Sidebar.jsx
+++ b/src/courseware/course/Sidebar.jsx
@@ -7,12 +7,12 @@ import './Sidebar.scss';
 import messages from './messages';
 
 function Sidebar({
-  intl, sidebarVisible, toggleSidebar, isResponsiveWidth,
+  intl, sidebarVisible, toggleSidebar, isTabletWidth,
 }) {
   return (
     sidebarVisible ? (
       <div className="sidebar-container ml-0 ml-lg-4">
-        {isResponsiveWidth
+        {isTabletWidth
           ? (
             <div className="mobile-close-container" onClick={() => { toggleSidebar(); }} onKeyDown={() => { toggleSidebar(); }} role="button" tabIndex="0" alt={intl.formatMessage(messages.responsiveCloseSidebar)}>
               <Icon src={ArrowBackIos} />
@@ -22,12 +22,16 @@ function Sidebar({
           : null}
         <div className="sidebar-header px-3">
           <span>{intl.formatMessage(messages.notification)}</span>
-          {!isResponsiveWidth
+          {!isTabletWidth
             ? <Icon src={Close} className="close-btn" onClick={() => { toggleSidebar(); }} onKeyDown={() => { toggleSidebar(); }} role="button" tabIndex="0" alt={intl.formatMessage(messages.closeButton)} />
             : null}
         </div>
         <div className="sidebar-divider" />
-        {/* expiration box to be inserted here */}
+        <div className="sidebar-content">
+          {/* JK: add conditional here */}
+          <p>You have no new notifications at this time.</p>
+          {/* expiration box to be inserted here */}
+        </div>
       </div>
     ) : null
   );
@@ -37,13 +41,13 @@ Sidebar.propTypes = {
   intl: intlShape.isRequired,
   toggleSidebar: PropTypes.func,
   sidebarVisible: PropTypes.bool,
-  isResponsiveWidth: PropTypes.bool,
+  isTabletWidth: PropTypes.bool,
 };
 
 Sidebar.defaultProps = {
   toggleSidebar: null,
   sidebarVisible: null,
-  isResponsiveWidth: null,
+  isTabletWidth: null,
 };
 
 export default injectIntl(Sidebar);
diff --git a/src/courseware/course/Sidebar.scss b/src/courseware/course/Sidebar.scss
index a8b08157a2..95d823234e 100644
--- a/src/courseware/course/Sidebar.scss
+++ b/src/courseware/course/Sidebar.scss
@@ -4,11 +4,12 @@
 @import "~@edx/brand/paragon/overrides";
 
 .sidebar-container {
-    border: 1px solid $gray-200;
-    width: 330px;
+    border: 1px solid $light-400;
+    border-radius: 4px;
+    width: 20rem;
     vertical-align: top;
 
-    @media (max-width: map-get($grid-breakpoints, 'md')) {
+    @media (max-width: map-get($grid-breakpoints, 'lg')) {
         position: fixed; 
         top: 0; 
         bottom: 0; 
@@ -19,6 +20,7 @@
         background-color: white;
         margin: 0;
         border: none;
+        border-radius: 0;
     }
 }
 
@@ -35,27 +37,33 @@
 }
 
 .sidebar-divider {
+    width: 100.5%;
     height: 0.5rem;
     background: $gray-100;
-    border-top: 1px solid $gray-200;
-    border-bottom: 1px solid $gray-200;
+    border: 1px solid $light-400;
+    border-left: 0;
+}
+
+.sidebar-content {
+    padding: 1rem;
+    font-size: 0.875rem;
 }
 
 .mobile-close-container {
     padding-top: 0.5rem;
     padding-bottom: 0.75rem;
-    border-bottom: 1px solid $gray-200;
+    border-bottom: 1px solid $light-400;
 
     span {
         display: inline-block;
     }
     svg {
-        margin-top: 7px;
-        margin-left: 15px;
+        top: 0.4rem;
+        left: 0.8rem;
     }
 }
 
 .mobile-close {
     font-weight: 500;
-    margin-left: 1.5rem;
+    margin-left: 1.2rem;
 }
\ No newline at end of file
diff --git a/src/courseware/course/SidebarNotificationButton.jsx b/src/courseware/course/SidebarNotificationButton.jsx
index 45fe89daf8..d544c7d72e 100644
--- a/src/courseware/course/SidebarNotificationButton.jsx
+++ b/src/courseware/course/SidebarNotificationButton.jsx
@@ -10,11 +10,18 @@ import messages from './messages';
 
 function SidebarNotificationButton({ intl, toggleSidebar, isSidebarVisible }) {
   return (
-    <div className={classNames('sidebar-notification-btn-container', { active: isSidebarVisible() })} data-testid="SidebarButton" onClick={() => { toggleSidebar(); }} onKeyDown={() => { toggleSidebar(); }} role="button" tabIndex="0" alt={intl.formatMessage(messages.notificationButton)}>
-      <div className="sidebar-notification-btn">
-        <Icon src={WatchOutline} className="sidebar-notification-icon" alt={intl.formatMessage(messages.notificationButton)} />
-        <span className="notification-dot p-1" />
-      </div>
+    <div
+      className={classNames('sidebar-notification-btn-container', { active: isSidebarVisible() })}
+      data-testid="SidebarButton"
+      role="button"
+      tabIndex="0"
+      onClick={() => { toggleSidebar(); }}
+      onKeyDown={() => { toggleSidebar(); }}
+      alt={intl.formatMessage(messages.notificationButton)}
+    >
+      <Icon src={WatchOutline} className="sidebar-notification-icon" alt={intl.formatMessage(messages.notificationButton)} />
+      {/* JK: add conditional for icon with red dot */}
+      <span className="notification-dot p-1" />
     </div>
   );
 }
diff --git a/src/courseware/course/SidebarNotificationButton.scss b/src/courseware/course/SidebarNotificationButton.scss
index e7ff7261df..4ae3267796 100644
--- a/src/courseware/course/SidebarNotificationButton.scss
+++ b/src/courseware/course/SidebarNotificationButton.scss
@@ -4,15 +4,19 @@
 @import "~@edx/brand/paragon/overrides";
 
 .sidebar-notification-btn-container {
-    border: 1px solid $gray-200;
-    width: 54px;
-    height: 40px;
+    border: 1px solid $light-400;
+    width: 3.375rem;
+    height: 2.5rem;
     float: right;
     margin-top: 0.625rem;
 
-    @media (max-width: map-get($grid-breakpoints, 'md')) {
+    position: relative;
+    display: flex;
+	align-items: center;
+
+    @media (max-width: -1 + map-get($grid-breakpoints, 'sm')) {
         border: none;
-        margin: 5px 20px 0 20px;
+        margin: 0.3rem 1.25rem 0 1.25rem;
     }
 }
 
@@ -20,25 +24,19 @@
     border-bottom: 3px solid $primary-700;
 }
 
-.sidebar-notification-btn {
-    position: relative;
-}
-
 .sidebar-notification-icon {
-    top: 7px;
-    bottom: 13px;
+    position: absolute;
     margin: 0 auto;
-    width: 1.25rem;
 }
 
 .notification-dot {
-    right: 15px;
-    top: 0.5rem;
     background-color: $danger-500;
     border-radius: 50%;
     position: absolute;
-    display: inline-block;
-    @media (max-width: map-get($grid-breakpoints, 'md')) {
-        right: 7px;
+    right: 1rem;
+    top: 0.5rem;
+
+    @media (max-width: -1 + map-get($grid-breakpoints, 'sm')) {
+        right: 0.5rem;
     }
 }
\ No newline at end of file
diff --git a/src/courseware/course/sequence/Sequence.jsx b/src/courseware/course/sequence/Sequence.jsx
index 38f2c3370a..601e1ff65b 100644
--- a/src/courseware/course/sequence/Sequence.jsx
+++ b/src/courseware/course/sequence/Sequence.jsx
@@ -36,7 +36,8 @@ function Sequence({
   toggleSidebar,
   sidebarVisible,
   isSidebarVisible,
-  isResponsiveWidth,
+  isTabletWidth,
+  isMobileWidth,
   mmp2p,
 }) {
   const course = useModel('coursewareMeta', courseId);
@@ -174,7 +175,7 @@ function Sequence({
               goToCourseExitPage={() => goToCourseExitPage()}
               toggleSidebar={toggleSidebar}
               isSidebarVisible={isSidebarVisible}
-              isResponsiveWidth={isResponsiveWidth}
+              isMobileWidth={isMobileWidth}
             />
             <div className="unit-container flex-grow-1">
               <SequenceContent
@@ -206,7 +207,7 @@ function Sequence({
           <Sidebar
             toggleSidebar={toggleSidebar}
             sidebarVisible={sidebarVisible}
-            isResponsiveWidth={isResponsiveWidth}
+            isTabletWidth={isTabletWidth}
           />
 
           {/** [MM-P2P] Experiment */}
@@ -240,7 +241,8 @@ Sequence.propTypes = {
   toggleSidebar: PropTypes.func,
   sidebarVisible: PropTypes.bool,
   isSidebarVisible: PropTypes.func,
-  isResponsiveWidth: PropTypes.bool,
+  isTabletWidth: PropTypes.bool,
+  isMobileWidth: PropTypes.bool,
 
   /** [MM-P2P] Experiment */
   mmp2p: PropTypes.shape({
@@ -262,7 +264,8 @@ Sequence.defaultProps = {
   toggleSidebar: null,
   sidebarVisible: null,
   isSidebarVisible: null,
-  isResponsiveWidth: null,
+  isTabletWidth: null,
+  isMobileWidth: null,
 
   /** [MM-P2P] Experiment */
   mmp2p: {
diff --git a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
index 1ebad35f45..b7c067e0b0 100644
--- a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
+++ b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
@@ -30,7 +30,7 @@ function SequenceNavigation({
   goToCourseExitPage,
   toggleSidebar,
   isSidebarVisible,
-  isResponsiveWidth,
+  isMobileWidth,
   mmp2p,
 }) {
   const sequence = useModel('sequences', sequenceId);
@@ -71,8 +71,8 @@ function SequenceNavigation({
     const disabled = isLastUnit && !exitActive;
     return (
       <Button variant="link" className="next-btn" onClick={buttonOnClick} disabled={disabled}>
-        {!isResponsiveWidth ? buttonText : null}
-        <FontAwesomeIcon icon={faChevronRight} className="ml-2" size="sm" />
+        {!isMobileWidth ? buttonText : null}
+        <FontAwesomeIcon icon={faChevronRight} className="mx-3 mr-sm-0 ml-sm-2" size="sm" />
       </Button>
     );
   };
@@ -80,13 +80,13 @@ function SequenceNavigation({
   return sequenceStatus === LOADED && (
     <nav className={classNames('sequence-navigation', className)}>
       <Button variant="link" className="previous-btn" onClick={previousSequenceHandler} disabled={isFirstUnit}>
-        <FontAwesomeIcon icon={faChevronLeft} className="mr-2" size="sm" />
-        {!isResponsiveWidth ? intl.formatMessage(messages.previousButton) : null}
+        <FontAwesomeIcon icon={faChevronLeft} className="mx-3 ml-sm-0 mr-sm-2" size="sm" />
+        {!isMobileWidth ? intl.formatMessage(messages.previousButton) : null}
       </Button>
       {renderUnitButtons()}
       {renderNextButton()}
 
-      {isResponsiveWidth ? (
+      {isMobileWidth ? (
         <SidebarNotificationButton
           toggleSidebar={toggleSidebar}
           isSidebarVisible={isSidebarVisible}
@@ -110,7 +110,7 @@ SequenceNavigation.propTypes = {
   goToCourseExitPage: PropTypes.func.isRequired,
   toggleSidebar: PropTypes.func,
   isSidebarVisible: PropTypes.func,
-  isResponsiveWidth: PropTypes.bool,
+  isMobileWidth: PropTypes.bool,
   /** [MM-P2P] Experiment */
   mmp2p: PropTypes.shape({
     state: PropTypes.shape({
@@ -124,7 +124,7 @@ SequenceNavigation.defaultProps = {
   unitId: null,
   toggleSidebar: null,
   isSidebarVisible: null,
-  isResponsiveWidth: null,
+  isMobileWidth: null,
 
   /** [MM-P2P] Experiment */
   mmp2p: {
diff --git a/src/index.scss b/src/index.scss
index 9cacc02c96..43969e467a 100755
--- a/src/index.scss
+++ b/src/index.scss
@@ -251,6 +251,7 @@
   }
 
   .previous-btn, .next-btn {
+    border: 1px solid $light-400 !important;
     color: $gray-700;
     display: inline-flex;
     justify-content: center;

From 52a21424c3621092fb7c5239cc89e22f562c5956 Mon Sep 17 00:00:00 2001
From: julianajlk <julianajlk@gmail.com>
Date: Mon, 5 Apr 2021 20:36:18 -0400
Subject: [PATCH 06/20] Move notification icon and red dot to separate
 component

---
 src/courseware/course/NotificationIcon.jsx    | 25 ++++++++++++++++++
 .../course/SidebarNotificationButton.jsx      | 17 +++++-------
 .../course/SidebarNotificationButton.scss     | 26 +++----------------
 src/index.scss                                |  2 ++
 4 files changed, 37 insertions(+), 33 deletions(-)
 create mode 100644 src/courseware/course/NotificationIcon.jsx

diff --git a/src/courseware/course/NotificationIcon.jsx b/src/courseware/course/NotificationIcon.jsx
new file mode 100644
index 0000000000..de74de0599
--- /dev/null
+++ b/src/courseware/course/NotificationIcon.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Icon } from '@edx/paragon';
+import { WatchOutline } from '@edx/paragon/icons';
+
+import messages from './messages';
+
+function NotificationIcon({ intl, status, notificationColor }) {
+  return (
+    <div className="position-relative">
+      <Icon src={WatchOutline} className="m-0 m-auto" alt={intl.formatMessage(messages.notificationButton)} />
+      {status === 'active' ? <span className={classNames(notificationColor, 'rounded-circle p-1 position-absolute')} style={{ top: '0.1rem', right: '0.55rem' }} /> : null }
+    </div>
+  );
+}
+
+NotificationIcon.propTypes = {
+  intl: intlShape.isRequired,
+  status: PropTypes.string.isRequired,
+  notificationColor: PropTypes.string.isRequired,
+};
+
+export default injectIntl(NotificationIcon);
diff --git a/src/courseware/course/SidebarNotificationButton.jsx b/src/courseware/course/SidebarNotificationButton.jsx
index d544c7d72e..95df1a152f 100644
--- a/src/courseware/course/SidebarNotificationButton.jsx
+++ b/src/courseware/course/SidebarNotificationButton.jsx
@@ -2,27 +2,22 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Icon } from '@edx/paragon';
-import { WatchOutline } from '@edx/paragon/icons';
 
+import NotificationIcon from './NotificationIcon';
 import './SidebarNotificationButton.scss';
 import messages from './messages';
 
 function SidebarNotificationButton({ intl, toggleSidebar, isSidebarVisible }) {
   return (
-    <div
-      className={classNames('sidebar-notification-btn-container', { active: isSidebarVisible() })}
+    <button
+      className={classNames('sidebar-notification-btn', { active: isSidebarVisible() })}
+      type="button"
       data-testid="SidebarButton"
-      role="button"
-      tabIndex="0"
       onClick={() => { toggleSidebar(); }}
-      onKeyDown={() => { toggleSidebar(); }}
       alt={intl.formatMessage(messages.notificationButton)}
     >
-      <Icon src={WatchOutline} className="sidebar-notification-icon" alt={intl.formatMessage(messages.notificationButton)} />
-      {/* JK: add conditional for icon with red dot */}
-      <span className="notification-dot p-1" />
-    </div>
+      <NotificationIcon status="active" notificationColor="bg-danger-500" />
+    </button>
   );
 }
 
diff --git a/src/courseware/course/SidebarNotificationButton.scss b/src/courseware/course/SidebarNotificationButton.scss
index 4ae3267796..3bc7009fbb 100644
--- a/src/courseware/course/SidebarNotificationButton.scss
+++ b/src/courseware/course/SidebarNotificationButton.scss
@@ -3,16 +3,15 @@
 @import "~@edx/paragon/scss/core/core";
 @import "~@edx/brand/paragon/overrides";
 
-.sidebar-notification-btn-container {
+.sidebar-notification-btn {
     border: 1px solid $light-400;
+    background: none;
     width: 3.375rem;
     height: 2.5rem;
-    float: right;
     margin-top: 0.625rem;
 
-    position: relative;
-    display: flex;
-	align-items: center;
+    position: absolute;
+    right: 0;
 
     @media (max-width: -1 + map-get($grid-breakpoints, 'sm')) {
         border: none;
@@ -23,20 +22,3 @@
 .active {
     border-bottom: 3px solid $primary-700;
 }
-
-.sidebar-notification-icon {
-    position: absolute;
-    margin: 0 auto;
-}
-
-.notification-dot {
-    background-color: $danger-500;
-    border-radius: 50%;
-    position: absolute;
-    right: 1rem;
-    top: 0.5rem;
-
-    @media (max-width: -1 + map-get($grid-breakpoints, 'sm')) {
-        right: 0.5rem;
-    }
-}
\ No newline at end of file
diff --git a/src/index.scss b/src/index.scss
index 43969e467a..80fa157ce8 100755
--- a/src/index.scss
+++ b/src/index.scss
@@ -95,6 +95,8 @@
 }
 
 .breadcrumb-container {
+  position: relative;
+
   @media (min-width: map-get($grid-breakpoints, 'sm')) {
     max-width: 1440px;
   }

From b773e3e8ad31447a7ddf722cfc015505607c9430 Mon Sep 17 00:00:00 2001
From: julianajlk <julianajlk@gmail.com>
Date: Thu, 15 Apr 2021 10:45:14 -0400
Subject: [PATCH 07/20] Change conditional outside of Sidebar component and
 update Sidebar.test to mock useWindowSize

---
 src/courseware/course/Sidebar.jsx           | 48 +++++++++------------
 src/courseware/course/Sidebar.test.jsx      | 34 +++++++++------
 src/courseware/course/sequence/Sequence.jsx | 14 +++---
 3 files changed, 49 insertions(+), 47 deletions(-)

diff --git a/src/courseware/course/Sidebar.jsx b/src/courseware/course/Sidebar.jsx
index 22757061d4..4c9b50b671 100644
--- a/src/courseware/course/Sidebar.jsx
+++ b/src/courseware/course/Sidebar.jsx
@@ -5,49 +5,43 @@ import { Icon } from '@edx/paragon';
 import { ArrowBackIos, Close } from '@edx/paragon/icons';
 import './Sidebar.scss';
 import messages from './messages';
+import useWindowSize from '../../generic/tabs/useWindowSize';
 
 function Sidebar({
-  intl, sidebarVisible, toggleSidebar, isTabletWidth,
+  intl, toggleSidebar,
 }) {
+  const shouldDisplayFullScreen = useWindowSize().width < 992;
   return (
-    sidebarVisible ? (
-      <div className="sidebar-container ml-0 ml-lg-4">
-        {isTabletWidth
-          ? (
-            <div className="mobile-close-container" onClick={() => { toggleSidebar(); }} onKeyDown={() => { toggleSidebar(); }} role="button" tabIndex="0" alt={intl.formatMessage(messages.responsiveCloseSidebar)}>
-              <Icon src={ArrowBackIos} />
-              <span className="mobile-close">{intl.formatMessage(messages.responsiveCloseSidebar)}</span>
-            </div>
-          )
-          : null}
-        <div className="sidebar-header px-3">
-          <span>{intl.formatMessage(messages.notification)}</span>
-          {!isTabletWidth
-            ? <Icon src={Close} className="close-btn" onClick={() => { toggleSidebar(); }} onKeyDown={() => { toggleSidebar(); }} role="button" tabIndex="0" alt={intl.formatMessage(messages.closeButton)} />
-            : null}
-        </div>
-        <div className="sidebar-divider" />
-        <div className="sidebar-content">
-          {/* JK: add conditional here */}
-          <p>You have no new notifications at this time.</p>
-          {/* expiration box to be inserted here */}
+    <div className="sidebar-container ml-0 ml-lg-4">
+      {shouldDisplayFullScreen ? (
+        <div className="mobile-close-container" onClick={() => { toggleSidebar(); }} onKeyDown={() => { toggleSidebar(); }} role="button" tabIndex="0" alt={intl.formatMessage(messages.responsiveCloseSidebar)}>
+          <Icon src={ArrowBackIos} />
+          <span className="mobile-close">{intl.formatMessage(messages.responsiveCloseSidebar)}</span>
         </div>
+      ) : null}
+      <div className="sidebar-header px-3">
+        <span>{intl.formatMessage(messages.notification)}</span>
+        {shouldDisplayFullScreen
+          ? null
+          : <Icon src={Close} className="close-btn" onClick={() => { toggleSidebar(); }} onKeyDown={() => { toggleSidebar(); }} role="button" tabIndex="0" alt={intl.formatMessage(messages.closeButton)} />}
+      </div>
+      <div className="sidebar-divider" />
+      <div className="sidebar-content">
+        {/* JK: add conditional here */}
+        <p>You have no new notifications at this time.</p>
+        {/* expiration box to be inserted here */}
       </div>
-    ) : null
+    </div>
   );
 }
 
 Sidebar.propTypes = {
   intl: intlShape.isRequired,
   toggleSidebar: PropTypes.func,
-  sidebarVisible: PropTypes.bool,
-  isTabletWidth: PropTypes.bool,
 };
 
 Sidebar.defaultProps = {
   toggleSidebar: null,
-  sidebarVisible: null,
-  isTabletWidth: null,
 };
 
 export default injectIntl(Sidebar);
diff --git a/src/courseware/course/Sidebar.test.jsx b/src/courseware/course/Sidebar.test.jsx
index 6117549b93..3101c06bd3 100644
--- a/src/courseware/course/Sidebar.test.jsx
+++ b/src/courseware/course/Sidebar.test.jsx
@@ -4,6 +4,9 @@ import {
   render, initializeTestStore, screen, fireEvent, waitFor,
 } from '../../setupTest';
 import Sidebar from './Sidebar';
+import useWindowSize from '../../generic/tabs/useWindowSize';
+
+jest.mock('../../generic/tabs/useWindowSize');
 
 describe('Sidebar', () => {
   let mockData;
@@ -11,33 +14,40 @@ describe('Sidebar', () => {
 
   beforeEach(async () => {
     mockData = {
-      sidebarVisible: false,
       toggleSidebar: () => {},
-      isResponsiveWidth: false,
     };
   });
 
+  beforeAll(async () => {
+    await initializeTestStore({ courseMetadata, excludeFetchCourse: true, excludeFetchSequence: true });
+  });
+
   it('renders sidebar', async () => {
-    const testStore = await initializeTestStore({ courseMetadata, excludeFetchSequence: true }, false);
-    const testData = { ...mockData, sidebarVisible: true };
-    const { container } = render(<Sidebar {...testData} />, { store: testStore });
+    useWindowSize.mockReturnValue({ width: 1200, height: 422 });
+    const { container } = render(<Sidebar {...mockData} />);
 
     expect(container).toBeInTheDocument();
     expect(container).toHaveTextContent('Notifications');
+    expect(container).not.toHaveTextContent('Back to course');
+  });
+
+  it('renders no notifications message', async () => {
+    // JK: add conditional if "no notifications"/upgradeable
+    const testData = { ...mockData };
+    const { container } = render(<Sidebar {...testData} />);
+
+    expect(container).toBeInTheDocument();
+    expect(container).toHaveTextContent('You have no new notifications at this time.');
   });
 
-  it('renders sidebar and mobile close button at responsive width', async () => {
-    const sidebarVisible = true;
-    const isResponsiveWidth = true;
+  it('renders sidebar with full screen "Back to course" at response width', async () => {
+    useWindowSize.mockReturnValue({ width: 991, height: 422 });
     const toggleSidebar = jest.fn();
-    const testStore = await initializeTestStore({ courseMetadata, excludeFetchSequence: true }, false);
     const testData = {
       ...mockData,
-      sidebarVisible,
-      isResponsiveWidth,
       toggleSidebar,
     };
-    render(<Sidebar {...testData} />, { store: testStore });
+    render(<Sidebar {...testData} />);
 
     const responsiveCloseButton = screen.getByRole('button', { name: 'Back to course' });
     await waitFor(() => expect(responsiveCloseButton).toBeInTheDocument());
diff --git a/src/courseware/course/sequence/Sequence.jsx b/src/courseware/course/sequence/Sequence.jsx
index 601e1ff65b..cff72eff8f 100644
--- a/src/courseware/course/sequence/Sequence.jsx
+++ b/src/courseware/course/sequence/Sequence.jsx
@@ -36,7 +36,6 @@ function Sequence({
   toggleSidebar,
   sidebarVisible,
   isSidebarVisible,
-  isTabletWidth,
   isMobileWidth,
   mmp2p,
 }) {
@@ -204,11 +203,12 @@ function Sequence({
               )}
             </div>
           </div>
-          <Sidebar
-            toggleSidebar={toggleSidebar}
-            sidebarVisible={sidebarVisible}
-            isTabletWidth={isTabletWidth}
-          />
+          {sidebarVisible ? (
+            <Sidebar
+              toggleSidebar={toggleSidebar}
+              sidebarVisible={sidebarVisible}
+            />
+          ) : null }
 
           {/** [MM-P2P] Experiment */}
           {(mmp2p.state.isEnabled && mmp2p.flyover.isVisible) && (
@@ -241,7 +241,6 @@ Sequence.propTypes = {
   toggleSidebar: PropTypes.func,
   sidebarVisible: PropTypes.bool,
   isSidebarVisible: PropTypes.func,
-  isTabletWidth: PropTypes.bool,
   isMobileWidth: PropTypes.bool,
 
   /** [MM-P2P] Experiment */
@@ -264,7 +263,6 @@ Sequence.defaultProps = {
   toggleSidebar: null,
   sidebarVisible: null,
   isSidebarVisible: null,
-  isTabletWidth: null,
   isMobileWidth: null,
 
   /** [MM-P2P] Experiment */

From 635f7e017adbd2478f070896a0fe62d3729c948e Mon Sep 17 00:00:00 2001
From: julianajlk <julianajlk@gmail.com>
Date: Thu, 15 Apr 2021 11:52:11 -0400
Subject: [PATCH 08/20] Update Course/CourseBreadcrumbs screen size conditional

---
 src/courseware/course/Course.jsx            | 9 ++-------
 src/courseware/course/CourseBreadcrumbs.jsx | 5 +----
 2 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/src/courseware/course/Course.jsx b/src/courseware/course/Course.jsx
index 81facbecbb..5c003c9fb2 100644
--- a/src/courseware/course/Course.jsx
+++ b/src/courseware/course/Course.jsx
@@ -60,9 +60,7 @@ function Course({
     courseId, sequenceId, unitId, celebrateFirstSection, dispatch, celebrations,
   );
 
-  const windowSize = useWindowSize();
-  const isTabletWidth = windowSize.width < 992;
-  const isMobileWidth = windowSize.width < 576;
+  const shouldDisplaySidebarButton = useWindowSize().width > 576;
 
   const [sidebarVisible, setSidebar] = useState(false);
   const isSidebarVisible = () => sidebarVisible && setSidebar;
@@ -94,12 +92,11 @@ function Course({
           courseId={courseId}
           sectionId={section ? section.id : null}
           sequenceId={sequenceId}
-          isMobileWidth={isMobileWidth}
           //* * [MM-P2P] Experiment */
           mmp2p={MMP2P}
         />
         {/* JK: add conditional/cookie to hide/show Sidebar here */}
-        { !isMobileWidth ? (
+        { shouldDisplaySidebarButton ? (
           <SidebarNotificationButton
             toggleSidebar={toggleSidebar}
             isSidebarVisible={isSidebarVisible}
@@ -118,8 +115,6 @@ function Course({
         toggleSidebar={toggleSidebar}
         isSidebarVisible={isSidebarVisible}
         sidebarVisible={sidebarVisible}
-        isTabletWidth={isTabletWidth}
-        isMobileWidth={isMobileWidth}
         //* * [MM-P2P] Experiment */
         mmp2p={MMP2P}
       />
diff --git a/src/courseware/course/CourseBreadcrumbs.jsx b/src/courseware/course/CourseBreadcrumbs.jsx
index 7b79c15253..0f5e32fb55 100644
--- a/src/courseware/course/CourseBreadcrumbs.jsx
+++ b/src/courseware/course/CourseBreadcrumbs.jsx
@@ -40,7 +40,6 @@ export default function CourseBreadcrumbs({
   courseId,
   sectionId,
   sequenceId,
-  isMobileWidth,
   /** [MM-P2P] Experiment */
   mmp2p,
 }) {
@@ -62,7 +61,7 @@ export default function CourseBreadcrumbs({
   }, [courseStatus, sequenceStatus]);
 
   return (
-    <nav aria-label="breadcrumb" className={classNames('my-4 d-inline-block', { 'col-10': !isMobileWidth })}>
+    <nav aria-label="breadcrumb" className={classNames('my-4 d-inline-block col-sm-10')}>
       <ol className="list-unstyled d-flex m-0">
         <CourseBreadcrumb
           url={`${getConfig().LMS_BASE_URL}/courses/${course.id}/course/`}
@@ -103,7 +102,6 @@ CourseBreadcrumbs.propTypes = {
   courseId: PropTypes.string.isRequired,
   sectionId: PropTypes.string,
   sequenceId: PropTypes.string,
-  isMobileWidth: PropTypes.bool,
   /** [MM-P2P] Experiment */
   mmp2p: PropTypes.shape({
     state: PropTypes.shape({
@@ -115,7 +113,6 @@ CourseBreadcrumbs.propTypes = {
 CourseBreadcrumbs.defaultProps = {
   sectionId: null,
   sequenceId: null,
-  isMobileWidth: null,
 
   /** [MM-P2P] Experiment */
   mmp2p: {},

From 5afefc5e40103f56a95b18c688fbcaf414e2bf29 Mon Sep 17 00:00:00 2001
From: julianajlk <julianajlk@gmail.com>
Date: Thu, 15 Apr 2021 12:16:36 -0400
Subject: [PATCH 09/20] Update styling on notification button and icon

---
 src/courseware/course/NotificationIcon.jsx           | 6 +++---
 src/courseware/course/SidebarNotificationButton.jsx  | 4 +++-
 src/courseware/course/SidebarNotificationButton.scss | 4 ++--
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/courseware/course/NotificationIcon.jsx b/src/courseware/course/NotificationIcon.jsx
index de74de0599..38b387751d 100644
--- a/src/courseware/course/NotificationIcon.jsx
+++ b/src/courseware/course/NotificationIcon.jsx
@@ -9,10 +9,10 @@ import messages from './messages';
 
 function NotificationIcon({ intl, status, notificationColor }) {
   return (
-    <div className="position-relative">
+    <>
       <Icon src={WatchOutline} className="m-0 m-auto" alt={intl.formatMessage(messages.notificationButton)} />
-      {status === 'active' ? <span className={classNames(notificationColor, 'rounded-circle p-1 position-absolute')} style={{ top: '0.1rem', right: '0.55rem' }} /> : null }
-    </div>
+      {status === 'active' ? <span className={classNames(notificationColor, 'rounded-circle p-1 position-absolute')} style={{ top: '0.3rem', right: '0.55rem' }} /> : null }
+    </>
   );
 }
 
diff --git a/src/courseware/course/SidebarNotificationButton.jsx b/src/courseware/course/SidebarNotificationButton.jsx
index 95df1a152f..9302f4f9cd 100644
--- a/src/courseware/course/SidebarNotificationButton.jsx
+++ b/src/courseware/course/SidebarNotificationButton.jsx
@@ -16,7 +16,9 @@ function SidebarNotificationButton({ intl, toggleSidebar, isSidebarVisible }) {
       onClick={() => { toggleSidebar(); }}
       alt={intl.formatMessage(messages.notificationButton)}
     >
-      <NotificationIcon status="active" notificationColor="bg-danger-500" />
+      <div className="position-relative d-flex align-items-center" style={{ width: '2.4rem', height: '2rem' }}>
+        <NotificationIcon status="active" notificationColor="bg-danger-500" />
+      </div>
     </button>
   );
 }
diff --git a/src/courseware/course/SidebarNotificationButton.scss b/src/courseware/course/SidebarNotificationButton.scss
index 3bc7009fbb..6d5b5c9d30 100644
--- a/src/courseware/course/SidebarNotificationButton.scss
+++ b/src/courseware/course/SidebarNotificationButton.scss
@@ -6,8 +6,6 @@
 .sidebar-notification-btn {
     border: 1px solid $light-400;
     background: none;
-    width: 3.375rem;
-    height: 2.5rem;
     margin-top: 0.625rem;
 
     position: absolute;
@@ -16,6 +14,8 @@
     @media (max-width: -1 + map-get($grid-breakpoints, 'sm')) {
         border: none;
         margin: 0.3rem 1.25rem 0 1.25rem;
+        top: 0.1rem;
+        right: -3rem;
     }
 }
 

From d73f7fcf4011a5fddd98fbff9014bdf895709aa9 Mon Sep 17 00:00:00 2001
From: julianajlk <julianajlk@gmail.com>
Date: Thu, 15 Apr 2021 12:35:47 -0400
Subject: [PATCH 10/20] Update SequenceNav/SequenceNav.test screen size
 conditional

---
 .../SequenceNavigation.jsx                    | 26 +++++--------------
 .../SequenceNavigation.test.jsx               | 14 ----------
 2 files changed, 6 insertions(+), 34 deletions(-)

diff --git a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
index b7c067e0b0..92ce3138c3 100644
--- a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
+++ b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
@@ -13,7 +13,7 @@ import SequenceNavigationTabs from './SequenceNavigationTabs';
 import { useSequenceNavigationMetadata } from './hooks';
 import { useModel } from '../../../../generic/model-store';
 import { LOADED } from '../../../data/slice';
-import SidebarNotificationButton from '../../SidebarNotificationButton';
+import useWindowSize from '../../../../generic/tabs/useWindowSize';
 
 import messages from './messages';
 /** [MM-P2P] Experiment */
@@ -28,9 +28,6 @@ function SequenceNavigation({
   nextSequenceHandler,
   previousSequenceHandler,
   goToCourseExitPage,
-  toggleSidebar,
-  isSidebarVisible,
-  isMobileWidth,
   mmp2p,
 }) {
   const sequence = useModel('sequences', sequenceId);
@@ -43,6 +40,8 @@ function SequenceNavigation({
     sequence.gatedContent !== undefined && sequence.gatedContent.gated
   ) : undefined;
 
+  const shouldDisplaySidebarButton = useWindowSize().width > 576;
+
   const renderUnitButtons = () => {
     if (isLocked) {
       return (
@@ -71,28 +70,21 @@ function SequenceNavigation({
     const disabled = isLastUnit && !exitActive;
     return (
       <Button variant="link" className="next-btn" onClick={buttonOnClick} disabled={disabled}>
-        {!isMobileWidth ? buttonText : null}
+        {shouldDisplaySidebarButton ? buttonText : null}
         <FontAwesomeIcon icon={faChevronRight} className="mx-3 mr-sm-0 ml-sm-2" size="sm" />
       </Button>
     );
   };
 
   return sequenceStatus === LOADED && (
-    <nav className={classNames('sequence-navigation', className)}>
+    <nav className={classNames('sequence-navigation', className, { 'mr-4': !shouldDisplaySidebarButton })}>
       <Button variant="link" className="previous-btn" onClick={previousSequenceHandler} disabled={isFirstUnit}>
         <FontAwesomeIcon icon={faChevronLeft} className="mx-3 ml-sm-0 mr-sm-2" size="sm" />
-        {!isMobileWidth ? intl.formatMessage(messages.previousButton) : null}
+        {shouldDisplaySidebarButton ? intl.formatMessage(messages.previousButton) : null}
       </Button>
       {renderUnitButtons()}
       {renderNextButton()}
 
-      {isMobileWidth ? (
-        <SidebarNotificationButton
-          toggleSidebar={toggleSidebar}
-          isSidebarVisible={isSidebarVisible}
-        />
-      ) : null}
-
       {/** [MM-P2P] Experiment */}
       { mmp2p.state.isEnabled && <MMP2PFlyoverTriggerMobile options={mmp2p} /> }
     </nav>
@@ -108,9 +100,6 @@ SequenceNavigation.propTypes = {
   nextSequenceHandler: PropTypes.func.isRequired,
   previousSequenceHandler: PropTypes.func.isRequired,
   goToCourseExitPage: PropTypes.func.isRequired,
-  toggleSidebar: PropTypes.func,
-  isSidebarVisible: PropTypes.func,
-  isMobileWidth: PropTypes.bool,
   /** [MM-P2P] Experiment */
   mmp2p: PropTypes.shape({
     state: PropTypes.shape({
@@ -122,9 +111,6 @@ SequenceNavigation.propTypes = {
 SequenceNavigation.defaultProps = {
   className: null,
   unitId: null,
-  toggleSidebar: null,
-  isSidebarVisible: null,
-  isMobileWidth: null,
 
   /** [MM-P2P] Experiment */
   mmp2p: {
diff --git a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.test.jsx b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.test.jsx
index 9c3220fa25..58ac8c576e 100644
--- a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.test.jsx
+++ b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.test.jsx
@@ -29,7 +29,6 @@ describe('Sequence Navigation', () => {
       onNavigate: () => {},
       nextSequenceHandler: () => {},
       goToCourseExitPage: () => {},
-      isResponsiveWidth: false,
     };
   });
 
@@ -163,17 +162,4 @@ describe('Sequence Navigation', () => {
     fireEvent.click(screen.getByRole('button', { name: /next/i }));
     expect(nextSequenceHandler).toHaveBeenCalledTimes(1);
   });
-
-  it('renders sidebar notification button in sequence', async () => {
-    const toggleSidebar = jest.fn();
-    const isSidebarVisible = jest.fn();
-    const isResponsiveWidth = true;
-    render(<SequenceNavigation {...mockData} {...{ toggleSidebar, isSidebarVisible, isResponsiveWidth }} />);
-
-    const sidebarButton = screen.getByRole('button', { name: /Sidebar notification button/i });
-
-    expect(sidebarButton).toBeInTheDocument();
-    fireEvent.click(sidebarButton);
-    expect(toggleSidebar).toHaveBeenCalledTimes(1);
-  });
 });

From a238f9155697691f47ce085a6f51f3d2a968bc67 Mon Sep 17 00:00:00 2001
From: julianajlk <julianajlk@gmail.com>
Date: Thu, 15 Apr 2021 14:15:23 -0400
Subject: [PATCH 11/20] Remove unused props from Sequence

---
 src/courseware/course/sequence/Sequence.jsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/courseware/course/sequence/Sequence.jsx b/src/courseware/course/sequence/Sequence.jsx
index cff72eff8f..89e8aae0ed 100644
--- a/src/courseware/course/sequence/Sequence.jsx
+++ b/src/courseware/course/sequence/Sequence.jsx
@@ -36,7 +36,6 @@ function Sequence({
   toggleSidebar,
   sidebarVisible,
   isSidebarVisible,
-  isMobileWidth,
   mmp2p,
 }) {
   const course = useModel('coursewareMeta', courseId);
@@ -174,7 +173,6 @@ function Sequence({
               goToCourseExitPage={() => goToCourseExitPage()}
               toggleSidebar={toggleSidebar}
               isSidebarVisible={isSidebarVisible}
-              isMobileWidth={isMobileWidth}
             />
             <div className="unit-container flex-grow-1">
               <SequenceContent
@@ -241,7 +239,6 @@ Sequence.propTypes = {
   toggleSidebar: PropTypes.func,
   sidebarVisible: PropTypes.bool,
   isSidebarVisible: PropTypes.func,
-  isMobileWidth: PropTypes.bool,
 
   /** [MM-P2P] Experiment */
   mmp2p: PropTypes.shape({
@@ -263,7 +260,6 @@ Sequence.defaultProps = {
   toggleSidebar: null,
   sidebarVisible: null,
   isSidebarVisible: null,
-  isMobileWidth: null,
 
   /** [MM-P2P] Experiment */
   mmp2p: {

From 2609953f5783168a6f288c29508e6cceb9c35762 Mon Sep 17 00:00:00 2001
From: julianajlk <julianajlk@gmail.com>
Date: Thu, 15 Apr 2021 14:57:13 -0400
Subject: [PATCH 12/20] Add SidebarNotificationButton to Sequence i/o
 SequenceNavigation component

---
 src/courseware/course/sequence/Sequence.jsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/courseware/course/sequence/Sequence.jsx b/src/courseware/course/sequence/Sequence.jsx
index 89e8aae0ed..30fb70ea6a 100644
--- a/src/courseware/course/sequence/Sequence.jsx
+++ b/src/courseware/course/sequence/Sequence.jsx
@@ -13,6 +13,7 @@ import { history } from '@edx/frontend-platform';
 
 import PageLoading from '../../../generic/PageLoading';
 import { UserMessagesContext, ALERT_TYPES } from '../../../generic/user-messages';
+import useWindowSize from '../../../generic/tabs/useWindowSize';
 import { useModel } from '../../../generic/model-store';
 
 import CourseLicense from '../course-license';
@@ -20,6 +21,7 @@ import messages from './messages';
 import { SequenceNavigation, UnitNavigation } from './sequence-navigation';
 import SequenceContent from './SequenceContent';
 import Sidebar from '../Sidebar';
+import SidebarNotificationButton from '../SidebarNotificationButton';
 
 /** [MM-P2P] Experiment */
 import { isMobile } from '../../../experiments/mm-p2p/utils';
@@ -42,6 +44,8 @@ function Sequence({
   const sequence = useModel('sequences', sequenceId);
   const unit = useModel('units', unitId);
   const sequenceStatus = useSelector(state => state.courseware.sequenceStatus);
+  const shouldDisplaySidebarButton = useWindowSize().width < 576;
+
   const handleNext = () => {
     const nextIndex = sequence.unitIds.indexOf(unitId) + 1;
     if (nextIndex < sequence.unitIds.length) {
@@ -174,6 +178,14 @@ function Sequence({
               toggleSidebar={toggleSidebar}
               isSidebarVisible={isSidebarVisible}
             />
+
+            {shouldDisplaySidebarButton ? (
+              <SidebarNotificationButton
+                toggleSidebar={toggleSidebar}
+                isSidebarVisible={isSidebarVisible}
+              />
+            ) : null}
+
             <div className="unit-container flex-grow-1">
               <SequenceContent
                 courseId={courseId}

From 86d79b8dd467e19392f04357ff461fad5ba49e24 Mon Sep 17 00:00:00 2001
From: julianajlk <julianajlk@gmail.com>
Date: Thu, 15 Apr 2021 15:28:54 -0400
Subject: [PATCH 13/20] Update inline CSS on sequence div

---
 src/courseware/course/sequence/Sequence.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/courseware/course/sequence/Sequence.jsx b/src/courseware/course/sequence/Sequence.jsx
index 30fb70ea6a..dcb1851157 100644
--- a/src/courseware/course/sequence/Sequence.jsx
+++ b/src/courseware/course/sequence/Sequence.jsx
@@ -3,6 +3,7 @@ import React, {
   useEffect, useContext, useState,
 } from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import {
   sendTrackEvent,
   sendTrackingLogEvent,
@@ -153,7 +154,7 @@ function Sequence({
     return (
       <div>
         <div className="sequence-container" style={{ display: 'inline-flex', flexDirection: 'row' }}>
-          <div className="sequence" style={{ width: '100%' }}>
+          <div className={classNames('sequence', { 'position-relative': shouldDisplaySidebarButton })} style={{ width: '100%' }}>
             <SequenceNavigation
               sequenceId={sequenceId}
               unitId={unitId}

From ade188e64402aa4e1c89807b29638a94c99b5425 Mon Sep 17 00:00:00 2001
From: julianajlk <julianajlk@gmail.com>
Date: Thu, 15 Apr 2021 15:54:26 -0400
Subject: [PATCH 14/20] Install js-cookie for handling cookies

---
 package-lock.json | 5 +++++
 package.json      | 1 +
 2 files changed, 6 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 20b78564a0..deba109501 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13886,6 +13886,11 @@
         }
       }
     },
+    "js-cookie": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
+      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
diff --git a/package.json b/package.json
index 7099a250ca..8d75655f4d 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,7 @@
     "@reduxjs/toolkit": "1.3.6",
     "classnames": "2.2.6",
     "core-js": "3.6.5",
+    "js-cookie": "2.2.1",
     "lodash.camelcase": "^4.3.0",
     "prop-types": "15.7.2",
     "react": "16.13.1",

From a98714a066cb203fb8bb34c5d22a70bff0f99bca Mon Sep 17 00:00:00 2001
From: julianajlk <julianajlk@gmail.com>
Date: Mon, 12 Apr 2021 00:55:07 -0400
Subject: [PATCH 15/20] Add temporary cookie code to hide sidebar and button

---
 src/courseware/course/Course.jsx                     | 11 +++++++++--
 src/courseware/course/Course.test.jsx                | 12 ++++++++----
 src/courseware/course/Sidebar.jsx                    |  3 +--
 src/courseware/course/Sidebar.test.jsx               |  2 +-
 src/courseware/course/SidebarNotificationButton.jsx  |  1 -
 src/courseware/course/sequence/Sequence.jsx          |  8 +++++---
 .../sequence-navigation/SequenceNavigation.jsx       | 11 +++++++----
 7 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/src/courseware/course/Course.jsx b/src/courseware/course/Course.jsx
index 5c003c9fb2..0d6da3498a 100644
--- a/src/courseware/course/Course.jsx
+++ b/src/courseware/course/Course.jsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
 import { useDispatch } from 'react-redux';
+import Cookies from 'js-cookie';
 import { getConfig } from '@edx/frontend-platform';
 
 import { AlertList } from '../../generic/user-messages';
@@ -60,6 +61,11 @@ function Course({
     courseId, sequenceId, unitId, celebrateFirstSection, dispatch, celebrations,
   );
 
+  // In order to see the Value Prop sidebar in prod, a cookie should be set in
+  // the browser console and refresh: document.cookie = 'value_prop_cookie=true';
+  // All of the cookie code temporary and should be removed in REV-2130.
+  const isCookieSet = Cookies.get('value_prop_cookie') === 'true';
+
   const shouldDisplaySidebarButton = useWindowSize().width > 576;
 
   const [sidebarVisible, setSidebar] = useState(false);
@@ -95,8 +101,8 @@ function Course({
           //* * [MM-P2P] Experiment */
           mmp2p={MMP2P}
         />
-        {/* JK: add conditional/cookie to hide/show Sidebar here */}
-        { shouldDisplaySidebarButton ? (
+
+        { shouldDisplaySidebarButton && isCookieSet ? (
           <SidebarNotificationButton
             toggleSidebar={toggleSidebar}
             isSidebarVisible={isSidebarVisible}
@@ -115,6 +121,7 @@ function Course({
         toggleSidebar={toggleSidebar}
         isSidebarVisible={isSidebarVisible}
         sidebarVisible={sidebarVisible}
+        isCookieSet={isCookieSet}
         //* * [MM-P2P] Experiment */
         mmp2p={MMP2P}
       />
diff --git a/src/courseware/course/Course.test.jsx b/src/courseware/course/Course.test.jsx
index b1ad0a5351..a5910aa825 100644
--- a/src/courseware/course/Course.test.jsx
+++ b/src/courseware/course/Course.test.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Factory } from 'rosie';
+import Cookies from 'js-cookie';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import {
   loadUnit, render, screen, waitFor, getByRole, initializeTestStore, fireEvent,
@@ -90,6 +91,11 @@ describe('Course', () => {
     const toggleSidebar = jest.fn();
     const isSidebarVisible = jest.fn();
 
+    const cookieName = 'value_prop_cookie';
+    Cookies.set = jest.fn();
+    Cookies.get = jest.fn().mockImplementation(() => cookieName);
+    const getSpy = jest.spyOn(Cookies, 'get').mockReturnValueOnce('true');
+
     const courseMetadata = Factory.build('courseMetadata');
     const testStore = await initializeTestStore({ courseMetadata, excludeFetchSequence: true }, false);
     const testData = {
@@ -101,10 +107,8 @@ describe('Course', () => {
 
     const sidebarButton = screen.getByRole('button', { name: /Sidebar notification button/i });
 
-    fireEvent.click(sidebarButton);
-    expect(sidebarButton)
-      .toBeInTheDocument()
-      .toHaveClass('active');
+    expect(getSpy).toBeCalledWith(cookieName);
+    expect(sidebarButton).toBeInTheDocument();
   });
 
   it('displays offer and expiration alert', async () => {
diff --git a/src/courseware/course/Sidebar.jsx b/src/courseware/course/Sidebar.jsx
index 4c9b50b671..39b8e1cd98 100644
--- a/src/courseware/course/Sidebar.jsx
+++ b/src/courseware/course/Sidebar.jsx
@@ -27,9 +27,8 @@ function Sidebar({
       </div>
       <div className="sidebar-divider" />
       <div className="sidebar-content">
-        {/* JK: add conditional here */}
+        {/* REV-2130 TODO: add conditional here to display expiration box or display below message */}
         <p>You have no new notifications at this time.</p>
-        {/* expiration box to be inserted here */}
       </div>
     </div>
   );
diff --git a/src/courseware/course/Sidebar.test.jsx b/src/courseware/course/Sidebar.test.jsx
index 3101c06bd3..2fda5c0294 100644
--- a/src/courseware/course/Sidebar.test.jsx
+++ b/src/courseware/course/Sidebar.test.jsx
@@ -32,7 +32,7 @@ describe('Sidebar', () => {
   });
 
   it('renders no notifications message', async () => {
-    // JK: add conditional if "no notifications"/upgradeable
+    // REV-2130 TODO: add conditional if no expiration box/upgradeable
     const testData = { ...mockData };
     const { container } = render(<Sidebar {...testData} />);
 
diff --git a/src/courseware/course/SidebarNotificationButton.jsx b/src/courseware/course/SidebarNotificationButton.jsx
index 9302f4f9cd..acbc3511ac 100644
--- a/src/courseware/course/SidebarNotificationButton.jsx
+++ b/src/courseware/course/SidebarNotificationButton.jsx
@@ -12,7 +12,6 @@ function SidebarNotificationButton({ intl, toggleSidebar, isSidebarVisible }) {
     <button
       className={classNames('sidebar-notification-btn', { active: isSidebarVisible() })}
       type="button"
-      data-testid="SidebarButton"
       onClick={() => { toggleSidebar(); }}
       alt={intl.formatMessage(messages.notificationButton)}
     >
diff --git a/src/courseware/course/sequence/Sequence.jsx b/src/courseware/course/sequence/Sequence.jsx
index dcb1851157..c99d34faa7 100644
--- a/src/courseware/course/sequence/Sequence.jsx
+++ b/src/courseware/course/sequence/Sequence.jsx
@@ -39,6 +39,7 @@ function Sequence({
   toggleSidebar,
   sidebarVisible,
   isSidebarVisible,
+  isCookieSet,
   mmp2p,
 }) {
   const course = useModel('coursewareMeta', courseId);
@@ -176,11 +177,10 @@ function Sequence({
                 handlePrevious();
               }}
               goToCourseExitPage={() => goToCourseExitPage()}
-              toggleSidebar={toggleSidebar}
-              isSidebarVisible={isSidebarVisible}
+              isCookieSet={isCookieSet}
             />
 
-            {shouldDisplaySidebarButton ? (
+            {shouldDisplaySidebarButton && isCookieSet ? (
               <SidebarNotificationButton
                 toggleSidebar={toggleSidebar}
                 isSidebarVisible={isSidebarVisible}
@@ -252,6 +252,7 @@ Sequence.propTypes = {
   toggleSidebar: PropTypes.func,
   sidebarVisible: PropTypes.bool,
   isSidebarVisible: PropTypes.func,
+  isCookieSet: PropTypes.bool,
 
   /** [MM-P2P] Experiment */
   mmp2p: PropTypes.shape({
@@ -273,6 +274,7 @@ Sequence.defaultProps = {
   toggleSidebar: null,
   sidebarVisible: null,
   isSidebarVisible: null,
+  isCookieSet: null,
 
   /** [MM-P2P] Experiment */
   mmp2p: {
diff --git a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
index 92ce3138c3..3e2f3c949a 100644
--- a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
+++ b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
@@ -28,6 +28,7 @@ function SequenceNavigation({
   nextSequenceHandler,
   previousSequenceHandler,
   goToCourseExitPage,
+  isCookieSet,
   mmp2p,
 }) {
   const sequence = useModel('sequences', sequenceId);
@@ -40,7 +41,7 @@ function SequenceNavigation({
     sequence.gatedContent !== undefined && sequence.gatedContent.gated
   ) : undefined;
 
-  const shouldDisplaySidebarButton = useWindowSize().width > 576;
+  const shouldDisplaySidebarButton = useWindowSize().width < 576 && isCookieSet;
 
   const renderUnitButtons = () => {
     if (isLocked) {
@@ -70,17 +71,17 @@ function SequenceNavigation({
     const disabled = isLastUnit && !exitActive;
     return (
       <Button variant="link" className="next-btn" onClick={buttonOnClick} disabled={disabled}>
-        {shouldDisplaySidebarButton ? buttonText : null}
+        {shouldDisplaySidebarButton ? null : buttonText}
         <FontAwesomeIcon icon={faChevronRight} className="mx-3 mr-sm-0 ml-sm-2" size="sm" />
       </Button>
     );
   };
 
   return sequenceStatus === LOADED && (
-    <nav className={classNames('sequence-navigation', className, { 'mr-4': !shouldDisplaySidebarButton })}>
+    <nav className={classNames('sequence-navigation', className, { 'mr-4': !shouldDisplaySidebarButton && isCookieSet })}>
       <Button variant="link" className="previous-btn" onClick={previousSequenceHandler} disabled={isFirstUnit}>
         <FontAwesomeIcon icon={faChevronLeft} className="mx-3 ml-sm-0 mr-sm-2" size="sm" />
-        {shouldDisplaySidebarButton ? intl.formatMessage(messages.previousButton) : null}
+        {shouldDisplaySidebarButton ? null : intl.formatMessage(messages.previousButton)}
       </Button>
       {renderUnitButtons()}
       {renderNextButton()}
@@ -100,6 +101,7 @@ SequenceNavigation.propTypes = {
   nextSequenceHandler: PropTypes.func.isRequired,
   previousSequenceHandler: PropTypes.func.isRequired,
   goToCourseExitPage: PropTypes.func.isRequired,
+  isCookieSet: PropTypes.bool,
   /** [MM-P2P] Experiment */
   mmp2p: PropTypes.shape({
     state: PropTypes.shape({
@@ -111,6 +113,7 @@ SequenceNavigation.propTypes = {
 SequenceNavigation.defaultProps = {
   className: null,
   unitId: null,
+  isCookieSet: null,
 
   /** [MM-P2P] Experiment */
   mmp2p: {

From 3bf88c74551f23050e18f9be3052ebe24fe5e1f6 Mon Sep 17 00:00:00 2001
From: julianajlk <julianajlk@gmail.com>
Date: Tue, 13 Apr 2021 09:37:42 -0400
Subject: [PATCH 16/20] Styling/a11y updates

---
 src/courseware/course/Course.jsx              |  4 +--
 src/courseware/course/Course.test.jsx         |  4 +--
 src/courseware/course/NotificationIcon.jsx    |  6 ++--
 src/courseware/course/Sidebar.jsx             | 10 +++---
 .../course/SidebarNotificationButton.jsx      |  5 +--
 .../course/SidebarNotificationButton.scss     | 10 +++++-
 src/courseware/course/messages.js             | 34 ++++++++++++-------
 .../SequenceNavigation.jsx                    |  2 +-
 8 files changed, 48 insertions(+), 27 deletions(-)

diff --git a/src/courseware/course/Course.jsx b/src/courseware/course/Course.jsx
index 0d6da3498a..b872a1007c 100644
--- a/src/courseware/course/Course.jsx
+++ b/src/courseware/course/Course.jsx
@@ -61,12 +61,12 @@ function Course({
     courseId, sequenceId, unitId, celebrateFirstSection, dispatch, celebrations,
   );
 
+  // REV-2130 TODO: temporary cookie code that should be removed.
   // In order to see the Value Prop sidebar in prod, a cookie should be set in
   // the browser console and refresh: document.cookie = 'value_prop_cookie=true';
-  // All of the cookie code temporary and should be removed in REV-2130.
   const isCookieSet = Cookies.get('value_prop_cookie') === 'true';
 
-  const shouldDisplaySidebarButton = useWindowSize().width > 576;
+  const shouldDisplaySidebarButton = useWindowSize().width >= 576;
 
   const [sidebarVisible, setSidebar] = useState(false);
   const isSidebarVisible = () => sidebarVisible && setSidebar;
diff --git a/src/courseware/course/Course.test.jsx b/src/courseware/course/Course.test.jsx
index a5910aa825..1fd41e7ae8 100644
--- a/src/courseware/course/Course.test.jsx
+++ b/src/courseware/course/Course.test.jsx
@@ -105,10 +105,10 @@ describe('Course', () => {
     };
     render(<Course {...testData} courseId={courseMetadata.id} />, { store: testStore });
 
-    const sidebarButton = screen.getByRole('button', { name: /Sidebar notification button/i });
+    const sidebarOpenButton = screen.getByRole('button', { name: /Show sidebar notification/i });
 
     expect(getSpy).toBeCalledWith(cookieName);
-    expect(sidebarButton).toBeInTheDocument();
+    expect(sidebarOpenButton).toBeInTheDocument();
   });
 
   it('displays offer and expiration alert', async () => {
diff --git a/src/courseware/course/NotificationIcon.jsx b/src/courseware/course/NotificationIcon.jsx
index 38b387751d..dfc39bda55 100644
--- a/src/courseware/course/NotificationIcon.jsx
+++ b/src/courseware/course/NotificationIcon.jsx
@@ -10,8 +10,10 @@ import messages from './messages';
 function NotificationIcon({ intl, status, notificationColor }) {
   return (
     <>
-      <Icon src={WatchOutline} className="m-0 m-auto" alt={intl.formatMessage(messages.notificationButton)} />
-      {status === 'active' ? <span className={classNames(notificationColor, 'rounded-circle p-1 position-absolute')} style={{ top: '0.3rem', right: '0.55rem' }} /> : null }
+      <Icon src={WatchOutline} className="m-0 m-auto" alt={intl.formatMessage(messages.openSidebarButton)} />
+      {status === 'active'
+        ? <span className={classNames(notificationColor, 'rounded-circle p-1 position-absolute')} style={{ top: '0.3rem', right: '0.55rem' }} />
+        : null}
     </>
   );
 }
diff --git a/src/courseware/course/Sidebar.jsx b/src/courseware/course/Sidebar.jsx
index 39b8e1cd98..4c3d5c8cc7 100644
--- a/src/courseware/course/Sidebar.jsx
+++ b/src/courseware/course/Sidebar.jsx
@@ -12,7 +12,7 @@ function Sidebar({
 }) {
   const shouldDisplayFullScreen = useWindowSize().width < 992;
   return (
-    <div className="sidebar-container ml-0 ml-lg-4">
+    <section className="sidebar-container ml-0 ml-lg-4" aria-label={intl.formatMessage(messages.sidebarNotification)}>
       {shouldDisplayFullScreen ? (
         <div className="mobile-close-container" onClick={() => { toggleSidebar(); }} onKeyDown={() => { toggleSidebar(); }} role="button" tabIndex="0" alt={intl.formatMessage(messages.responsiveCloseSidebar)}>
           <Icon src={ArrowBackIos} />
@@ -20,17 +20,17 @@ function Sidebar({
         </div>
       ) : null}
       <div className="sidebar-header px-3">
-        <span>{intl.formatMessage(messages.notification)}</span>
+        <span>{intl.formatMessage(messages.notificationTitle)}</span>
         {shouldDisplayFullScreen
           ? null
-          : <Icon src={Close} className="close-btn" onClick={() => { toggleSidebar(); }} onKeyDown={() => { toggleSidebar(); }} role="button" tabIndex="0" alt={intl.formatMessage(messages.closeButton)} />}
+          : <Icon src={Close} className="close-btn" onClick={() => { toggleSidebar(); }} onKeyDown={() => { toggleSidebar(); }} role="button" tabIndex="0" alt={intl.formatMessage(messages.closeSidebarButton)} />}
       </div>
       <div className="sidebar-divider" />
       <div className="sidebar-content">
         {/* REV-2130 TODO: add conditional here to display expiration box or display below message */}
-        <p>You have no new notifications at this time.</p>
+        <p>{intl.formatMessage(messages.noNotificationsMessage)}</p>
       </div>
-    </div>
+    </section>
   );
 }
 
diff --git a/src/courseware/course/SidebarNotificationButton.jsx b/src/courseware/course/SidebarNotificationButton.jsx
index acbc3511ac..6d0323785d 100644
--- a/src/courseware/course/SidebarNotificationButton.jsx
+++ b/src/courseware/course/SidebarNotificationButton.jsx
@@ -13,9 +13,10 @@ function SidebarNotificationButton({ intl, toggleSidebar, isSidebarVisible }) {
       className={classNames('sidebar-notification-btn', { active: isSidebarVisible() })}
       type="button"
       onClick={() => { toggleSidebar(); }}
-      alt={intl.formatMessage(messages.notificationButton)}
+      aria-label={intl.formatMessage(messages.openSidebarButton)}
     >
-      <div className="position-relative d-flex align-items-center" style={{ width: '2.4rem', height: '2rem' }}>
+      <div className="icon-container">
+        {/* REV-2130 TODO: add logic for status "active" if red dot should display */}
         <NotificationIcon status="active" notificationColor="bg-danger-500" />
       </div>
     </button>
diff --git a/src/courseware/course/SidebarNotificationButton.scss b/src/courseware/course/SidebarNotificationButton.scss
index 6d5b5c9d30..2cc51c7405 100644
--- a/src/courseware/course/SidebarNotificationButton.scss
+++ b/src/courseware/course/SidebarNotificationButton.scss
@@ -13,7 +13,7 @@
 
     @media (max-width: -1 + map-get($grid-breakpoints, 'sm')) {
         border: none;
-        margin: 0.3rem 1.25rem 0 1.25rem;
+        margin: 0.3rem 1.25rem 0 0.25rem;
         top: 0.1rem;
         right: -3rem;
     }
@@ -22,3 +22,11 @@
 .active {
     border-bottom: 3px solid $primary-700;
 }
+
+.icon-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 2.4rem;
+    height: 2rem;
+}
\ No newline at end of file
diff --git a/src/courseware/course/messages.js b/src/courseware/course/messages.js
index 858865b663..98c3c9ff07 100644
--- a/src/courseware/course/messages.js
+++ b/src/courseware/course/messages.js
@@ -1,25 +1,35 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';
 
 const messages = defineMessages({
-  notificationButton: {
-    id: 'sidebar.notificationButton',
-    defaultMessage: 'Sidebar notification button',
-    description: 'Button to open the sidebar',
+  sidebarNotification: {
+    id: 'sidebar.notification.container',
+    defaultMessage: 'Sidebar notification',
+    description: 'Sidebar notification section container',
   },
-  closeButton: {
-    id: 'sidebar.closeButton',
-    defaultMessage: 'Close',
+  openSidebarButton: {
+    id: 'sidebar.open.button',
+    defaultMessage: 'Show sidebar notification',
+    description: 'Button to open the sidebar and show notifications',
+  },
+  closeSidebarButton: {
+    id: 'sidebar.close.button',
+    defaultMessage: 'Close sidebar notification',
     description: 'Button for the learner to close the sidebar',
   },
   responsiveCloseSidebar: {
-    id: 'sidebar.responsiveCloseSidebar',
+    id: 'sidebar.responsive.close.button',
     defaultMessage: 'Back to course',
-    description: 'Responsive link for the learner to go back to course and close sidebar',
+    description: 'Responsive button for the learner to go back to course and close the sidebar',
   },
-  notification: {
-    id: 'sidebar.notification',
+  notificationTitle: {
+    id: 'sidebar.notification.title',
     defaultMessage: 'Notifications',
-    description: 'Text displayed for sidebar notifications',
+    description: 'Title text displayed for sidebar notifications',
+  },
+  noNotificationsMessage: {
+    id: 'sidebar.notification.no.message',
+    defaultMessage: 'You have no new notifications at this time.',
+    description: 'Text displayed when the learner has no notifications',
   },
 });
 
diff --git a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
index 3e2f3c949a..6c51e05f15 100644
--- a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
+++ b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
@@ -78,7 +78,7 @@ function SequenceNavigation({
   };
 
   return sequenceStatus === LOADED && (
-    <nav className={classNames('sequence-navigation', className, { 'mr-4': !shouldDisplaySidebarButton && isCookieSet })}>
+    <nav className={classNames('sequence-navigation', className)} style={{ width: shouldDisplaySidebarButton ? '90%' : null }}>
       <Button variant="link" className="previous-btn" onClick={previousSequenceHandler} disabled={isFirstUnit}>
         <FontAwesomeIcon icon={faChevronLeft} className="mx-3 ml-sm-0 mr-sm-2" size="sm" />
         {shouldDisplaySidebarButton ? null : intl.formatMessage(messages.previousButton)}

From f6880b43410535172964cbc8c8416210da23b799 Mon Sep 17 00:00:00 2001
From: julianajlk <julianajlk@gmail.com>
Date: Fri, 16 Apr 2021 12:40:26 -0400
Subject: [PATCH 17/20] Add no notifications conditional for the sidebar height

---
 src/courseware/course/Course.jsx   |  2 +-
 src/courseware/course/Sidebar.jsx  | 10 +++++++---
 src/courseware/course/Sidebar.scss |  4 ++++
 src/index.scss                     |  8 --------
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/courseware/course/Course.jsx b/src/courseware/course/Course.jsx
index b872a1007c..0365749c91 100644
--- a/src/courseware/course/Course.jsx
+++ b/src/courseware/course/Course.jsx
@@ -93,7 +93,7 @@ function Course({
           }}
         />
       )}
-      <div className="breadcrumb-container">
+      <div className="position-relative">
         <CourseBreadcrumbs
           courseId={courseId}
           sectionId={section ? section.id : null}
diff --git a/src/courseware/course/Sidebar.jsx b/src/courseware/course/Sidebar.jsx
index 4c3d5c8cc7..4100af49a7 100644
--- a/src/courseware/course/Sidebar.jsx
+++ b/src/courseware/course/Sidebar.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Icon } from '@edx/paragon';
 import { ArrowBackIos, Close } from '@edx/paragon/icons';
@@ -11,8 +12,11 @@ function Sidebar({
   intl, toggleSidebar,
 }) {
   const shouldDisplayFullScreen = useWindowSize().width < 992;
+  // REV-2130 TODO: temporary variable set to true, should be replaced with whether the course can be upgraded.
+  const shouldDisplayNoNotification = true;
+
   return (
-    <section className="sidebar-container ml-0 ml-lg-4" aria-label={intl.formatMessage(messages.sidebarNotification)}>
+    <section className={classNames('sidebar-container ml-0 ml-lg-4', { 'no-notification': shouldDisplayNoNotification && !shouldDisplayFullScreen })} aria-label={intl.formatMessage(messages.sidebarNotification)}>
       {shouldDisplayFullScreen ? (
         <div className="mobile-close-container" onClick={() => { toggleSidebar(); }} onKeyDown={() => { toggleSidebar(); }} role="button" tabIndex="0" alt={intl.formatMessage(messages.responsiveCloseSidebar)}>
           <Icon src={ArrowBackIos} />
@@ -27,8 +31,8 @@ function Sidebar({
       </div>
       <div className="sidebar-divider" />
       <div className="sidebar-content">
-        {/* REV-2130 TODO: add conditional here to display expiration box or display below message */}
-        <p>{intl.formatMessage(messages.noNotificationsMessage)}</p>
+        {/* REV-2130 TODO: replace null with upgrade expiration box */}
+        {shouldDisplayNoNotification ? <p>{intl.formatMessage(messages.noNotificationsMessage)}</p> : null}
       </div>
     </section>
   );
diff --git a/src/courseware/course/Sidebar.scss b/src/courseware/course/Sidebar.scss
index 95d823234e..9e853462ef 100644
--- a/src/courseware/course/Sidebar.scss
+++ b/src/courseware/course/Sidebar.scss
@@ -24,6 +24,10 @@
     }
 }
 
+.no-notification {
+    height: 15rem;
+}
+
 .sidebar-header {
     padding: 0.625rem 0;
 
diff --git a/src/index.scss b/src/index.scss
index 80fa157ce8..59de62f0c5 100755
--- a/src/index.scss
+++ b/src/index.scss
@@ -94,14 +94,6 @@
   }
 }
 
-.breadcrumb-container {
-  position: relative;
-
-  @media (min-width: map-get($grid-breakpoints, 'sm')) {
-    max-width: 1440px;
-  }
-}
-
 .sequence-container {
   display: flex;
   flex-direction: column;

From 65fb9faae8ca55b515f7667e406318eb6f841592 Mon Sep 17 00:00:00 2001
From: julianajlk <julianajlk@gmail.com>
Date: Thu, 22 Apr 2021 11:59:17 -0400
Subject: [PATCH 18/20] Styling updates, add NotificationIcons scss file

---
 src/courseware/course/CourseBreadcrumbs.jsx       |  3 +--
 src/courseware/course/NotificationIcon.jsx        |  7 ++++---
 src/courseware/course/NotificationIcon.scss       | 15 +++++++++++++++
 .../course/SidebarNotificationButton.jsx          |  6 ++----
 .../course/SidebarNotificationButton.scss         |  8 --------
 src/index.scss                                    |  1 +
 6 files changed, 23 insertions(+), 17 deletions(-)
 create mode 100644 src/courseware/course/NotificationIcon.scss

diff --git a/src/courseware/course/CourseBreadcrumbs.jsx b/src/courseware/course/CourseBreadcrumbs.jsx
index 0f5e32fb55..d8a73c8d70 100644
--- a/src/courseware/course/CourseBreadcrumbs.jsx
+++ b/src/courseware/course/CourseBreadcrumbs.jsx
@@ -1,5 +1,4 @@
 import React, { useMemo } from 'react';
-import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { getConfig } from '@edx/frontend-platform';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
@@ -61,7 +60,7 @@ export default function CourseBreadcrumbs({
   }, [courseStatus, sequenceStatus]);
 
   return (
-    <nav aria-label="breadcrumb" className={classNames('my-4 d-inline-block col-sm-10')}>
+    <nav aria-label="breadcrumb" className="my-4 d-inline-block col-sm-10">
       <ol className="list-unstyled d-flex m-0">
         <CourseBreadcrumb
           url={`${getConfig().LMS_BASE_URL}/courses/${course.id}/course/`}
diff --git a/src/courseware/course/NotificationIcon.jsx b/src/courseware/course/NotificationIcon.jsx
index dfc39bda55..e2fe41e306 100644
--- a/src/courseware/course/NotificationIcon.jsx
+++ b/src/courseware/course/NotificationIcon.jsx
@@ -5,16 +5,17 @@ import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Icon } from '@edx/paragon';
 import { WatchOutline } from '@edx/paragon/icons';
 
+import './NotificationIcon.scss';
 import messages from './messages';
 
 function NotificationIcon({ intl, status, notificationColor }) {
   return (
-    <>
+    <div className="icon-container">
       <Icon src={WatchOutline} className="m-0 m-auto" alt={intl.formatMessage(messages.openSidebarButton)} />
       {status === 'active'
-        ? <span className={classNames(notificationColor, 'rounded-circle p-1 position-absolute')} style={{ top: '0.3rem', right: '0.55rem' }} />
+        ? <span className={classNames(notificationColor, 'notification-dot')} />
         : null}
-    </>
+    </div>
   );
 }
 
diff --git a/src/courseware/course/NotificationIcon.scss b/src/courseware/course/NotificationIcon.scss
new file mode 100644
index 0000000000..c2671cd027
--- /dev/null
+++ b/src/courseware/course/NotificationIcon.scss
@@ -0,0 +1,15 @@
+.icon-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 2.4rem;
+    height: 2rem;
+}
+
+.notification-dot {
+    position: absolute;
+    top: 0.3rem;
+    right: 0.55rem;
+    border-radius: 50% !important;
+    padding: 0.25rem !important;
+}
\ No newline at end of file
diff --git a/src/courseware/course/SidebarNotificationButton.jsx b/src/courseware/course/SidebarNotificationButton.jsx
index 6d0323785d..0c77aa3716 100644
--- a/src/courseware/course/SidebarNotificationButton.jsx
+++ b/src/courseware/course/SidebarNotificationButton.jsx
@@ -15,10 +15,8 @@ function SidebarNotificationButton({ intl, toggleSidebar, isSidebarVisible }) {
       onClick={() => { toggleSidebar(); }}
       aria-label={intl.formatMessage(messages.openSidebarButton)}
     >
-      <div className="icon-container">
-        {/* REV-2130 TODO: add logic for status "active" if red dot should display */}
-        <NotificationIcon status="active" notificationColor="bg-danger-500" />
-      </div>
+      {/* REV-2130 TODO: add logic for status "active" if red dot should display */}
+      <NotificationIcon status="active" notificationColor="bg-danger-500" />
     </button>
   );
 }
diff --git a/src/courseware/course/SidebarNotificationButton.scss b/src/courseware/course/SidebarNotificationButton.scss
index 2cc51c7405..a4fdb0adfa 100644
--- a/src/courseware/course/SidebarNotificationButton.scss
+++ b/src/courseware/course/SidebarNotificationButton.scss
@@ -21,12 +21,4 @@
 
 .active {
     border-bottom: 3px solid $primary-700;
-}
-
-.icon-container {
-    position: relative;
-    display: flex;
-    align-items: center;
-    width: 2.4rem;
-    height: 2rem;
 }
\ No newline at end of file
diff --git a/src/index.scss b/src/index.scss
index 59de62f0c5..a307a4bc7b 100755
--- a/src/index.scss
+++ b/src/index.scss
@@ -364,6 +364,7 @@
 @import 'courseware/course/celebration/CelebrationModal.scss';
 @import 'courseware/course/Sidebar.scss';
 @import 'courseware/course/SidebarNotificationButton.scss';
+@import 'courseware/course/NotificationIcon.scss';
 @import 'shared/streak-celebration/StreakCelebrationModal.scss';
 @import 'courseware/course/content-tools/calculator/calculator.scss';
 @import 'courseware/course/content-tools/contentTools.scss';

From a44b20c9cee09131b1d1929145a2a1d08cda76e8 Mon Sep 17 00:00:00 2001
From: julianajlk <julianajlk@gmail.com>
Date: Tue, 27 Apr 2021 11:08:45 -0400
Subject: [PATCH 19/20] Add responsiveBreakpoints replacing hard coded pixels

---
 src/courseware/course/Course.jsx              |  4 ++--
 src/courseware/course/Sidebar.jsx             |  5 ++--
 src/courseware/course/Sidebar.scss            |  4 ++--
 src/courseware/course/sequence/Sequence.jsx   |  4 ++--
 .../SequenceNavigation.jsx                    |  4 ++--
 src/generic/tabs/useWindowSize.js             | 23 +++++++++++++++++++
 6 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/src/courseware/course/Course.jsx b/src/courseware/course/Course.jsx
index 0365749c91..348155433f 100644
--- a/src/courseware/course/Course.jsx
+++ b/src/courseware/course/Course.jsx
@@ -18,7 +18,7 @@ import SidebarNotificationButton from './SidebarNotificationButton';
 
 import CourseSock from '../../generic/course-sock';
 import { useModel } from '../../generic/model-store';
-import useWindowSize from '../../generic/tabs/useWindowSize';
+import useWindowSize, { responsiveBreakpoints } from '../../generic/tabs/useWindowSize';
 
 /** [MM-P2P] Experiment */
 import { initCoursewareMMP2P, MMP2PBlockModal } from '../../experiments/mm-p2p';
@@ -66,7 +66,7 @@ function Course({
   // the browser console and refresh: document.cookie = 'value_prop_cookie=true';
   const isCookieSet = Cookies.get('value_prop_cookie') === 'true';
 
-  const shouldDisplaySidebarButton = useWindowSize().width >= 576;
+  const shouldDisplaySidebarButton = useWindowSize().width >= responsiveBreakpoints.small.minWidth;
 
   const [sidebarVisible, setSidebar] = useState(false);
   const isSidebarVisible = () => sidebarVisible && setSidebar;
diff --git a/src/courseware/course/Sidebar.jsx b/src/courseware/course/Sidebar.jsx
index 4100af49a7..d01b45f5d9 100644
--- a/src/courseware/course/Sidebar.jsx
+++ b/src/courseware/course/Sidebar.jsx
@@ -6,12 +6,13 @@ import { Icon } from '@edx/paragon';
 import { ArrowBackIos, Close } from '@edx/paragon/icons';
 import './Sidebar.scss';
 import messages from './messages';
-import useWindowSize from '../../generic/tabs/useWindowSize';
+import useWindowSize, { responsiveBreakpoints } from '../../generic/tabs/useWindowSize';
 
 function Sidebar({
   intl, toggleSidebar,
 }) {
-  const shouldDisplayFullScreen = useWindowSize().width < 992;
+  const shouldDisplayFullScreen = useWindowSize().width < responsiveBreakpoints.large.minWidth;
+
   // REV-2130 TODO: temporary variable set to true, should be replaced with whether the course can be upgraded.
   const shouldDisplayNoNotification = true;
 
diff --git a/src/courseware/course/Sidebar.scss b/src/courseware/course/Sidebar.scss
index 9e853462ef..4f40cd6785 100644
--- a/src/courseware/course/Sidebar.scss
+++ b/src/courseware/course/Sidebar.scss
@@ -9,14 +9,14 @@
     width: 20rem;
     vertical-align: top;
 
-    @media (max-width: map-get($grid-breakpoints, 'lg')) {
+    @media (max-width: -1 + map-get($grid-breakpoints, 'lg')) {
         position: fixed; 
         top: 0; 
         bottom: 0; 
         left: 0; 
         right: 0;
         width: 100%;
-        height: 100%;
+        height: 100% !important;
         background-color: white;
         margin: 0;
         border: none;
diff --git a/src/courseware/course/sequence/Sequence.jsx b/src/courseware/course/sequence/Sequence.jsx
index c99d34faa7..1281cb4ba3 100644
--- a/src/courseware/course/sequence/Sequence.jsx
+++ b/src/courseware/course/sequence/Sequence.jsx
@@ -14,7 +14,7 @@ import { history } from '@edx/frontend-platform';
 
 import PageLoading from '../../../generic/PageLoading';
 import { UserMessagesContext, ALERT_TYPES } from '../../../generic/user-messages';
-import useWindowSize from '../../../generic/tabs/useWindowSize';
+import useWindowSize, { responsiveBreakpoints } from '../../../generic/tabs/useWindowSize';
 import { useModel } from '../../../generic/model-store';
 
 import CourseLicense from '../course-license';
@@ -46,7 +46,7 @@ function Sequence({
   const sequence = useModel('sequences', sequenceId);
   const unit = useModel('units', unitId);
   const sequenceStatus = useSelector(state => state.courseware.sequenceStatus);
-  const shouldDisplaySidebarButton = useWindowSize().width < 576;
+  const shouldDisplaySidebarButton = useWindowSize().width < responsiveBreakpoints.small.minWidth;
 
   const handleNext = () => {
     const nextIndex = sequence.unitIds.indexOf(unitId) + 1;
diff --git a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
index 6c51e05f15..2a9f285b52 100644
--- a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
+++ b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
@@ -13,7 +13,7 @@ import SequenceNavigationTabs from './SequenceNavigationTabs';
 import { useSequenceNavigationMetadata } from './hooks';
 import { useModel } from '../../../../generic/model-store';
 import { LOADED } from '../../../data/slice';
-import useWindowSize from '../../../../generic/tabs/useWindowSize';
+import useWindowSize, { responsiveBreakpoints } from '../../../../generic/tabs/useWindowSize';
 
 import messages from './messages';
 /** [MM-P2P] Experiment */
@@ -41,7 +41,7 @@ function SequenceNavigation({
     sequence.gatedContent !== undefined && sequence.gatedContent.gated
   ) : undefined;
 
-  const shouldDisplaySidebarButton = useWindowSize().width < 576 && isCookieSet;
+  const shouldDisplaySidebarButton = useWindowSize().width < responsiveBreakpoints.small.minWidth && isCookieSet;
 
   const renderUnitButtons = () => {
     if (isLocked) {
diff --git a/src/generic/tabs/useWindowSize.js b/src/generic/tabs/useWindowSize.js
index 20e7684870..199b5faac4 100644
--- a/src/generic/tabs/useWindowSize.js
+++ b/src/generic/tabs/useWindowSize.js
@@ -1,5 +1,28 @@
 import { useState, useEffect } from 'react';
 
+// NOTE: These are the breakpoints used in Bootstrap v4.0.0 as seen in
+// the documentation (https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)
+export const responsiveBreakpoints = {
+  extraSmall: {
+    maxWidth: 575.98,
+  },
+  small: {
+    minWidth: 576,
+    maxWidth: 767.98,
+  },
+  medium: {
+    minWidth: 768,
+    maxWidth: 991.98,
+  },
+  large: {
+    minWidth: 992,
+    maxWidth: 1199.98,
+  },
+  extraLarge: {
+    minWidth: 1200,
+  },
+};
+
 export default function useWindowSize() {
   const isClient = typeof global === 'object';
 

From bc2e75f4ebfb819299cc2015d8fb81c3ebc67a36 Mon Sep 17 00:00:00 2001
From: julianajlk <julianajlk@gmail.com>
Date: Thu, 29 Apr 2021 08:58:27 -0400
Subject: [PATCH 20/20] Add more tests, temporary cookie naming update

---
 src/courseware/course/Course.jsx              |  8 ++--
 src/courseware/course/Course.test.jsx         |  1 +
 src/courseware/course/NotificationIcon.jsx    |  2 +-
 src/courseware/course/Sidebar.jsx             |  5 ++-
 .../course/SidebarNotificationButton.test.jsx | 43 +++++++++++++++++++
 src/courseware/course/sequence/Sequence.jsx   | 10 ++---
 .../SequenceNavigation.jsx                    | 14 +++---
 7 files changed, 64 insertions(+), 19 deletions(-)
 create mode 100644 src/courseware/course/SidebarNotificationButton.test.jsx

diff --git a/src/courseware/course/Course.jsx b/src/courseware/course/Course.jsx
index 348155433f..6c2b5f21b0 100644
--- a/src/courseware/course/Course.jsx
+++ b/src/courseware/course/Course.jsx
@@ -64,14 +64,14 @@ function Course({
   // REV-2130 TODO: temporary cookie code that should be removed.
   // In order to see the Value Prop sidebar in prod, a cookie should be set in
   // the browser console and refresh: document.cookie = 'value_prop_cookie=true';
-  const isCookieSet = Cookies.get('value_prop_cookie') === 'true';
+  const isValuePropCookieSet = Cookies.get('value_prop_cookie') === 'true';
 
   const shouldDisplaySidebarButton = useWindowSize().width >= responsiveBreakpoints.small.minWidth;
 
   const [sidebarVisible, setSidebar] = useState(false);
   const isSidebarVisible = () => sidebarVisible && setSidebar;
   const toggleSidebar = () => {
-    if (!sidebarVisible) { setSidebar(true); } else { setSidebar(false); }
+    if (sidebarVisible) { setSidebar(false); } else { setSidebar(true); }
   };
 
   /** [MM-P2P] Experiment */
@@ -102,7 +102,7 @@ function Course({
           mmp2p={MMP2P}
         />
 
-        { shouldDisplaySidebarButton && isCookieSet ? (
+        { isValuePropCookieSet && shouldDisplaySidebarButton ? (
           <SidebarNotificationButton
             toggleSidebar={toggleSidebar}
             isSidebarVisible={isSidebarVisible}
@@ -121,7 +121,7 @@ function Course({
         toggleSidebar={toggleSidebar}
         isSidebarVisible={isSidebarVisible}
         sidebarVisible={sidebarVisible}
-        isCookieSet={isCookieSet}
+        isValuePropCookieSet={isValuePropCookieSet}
         //* * [MM-P2P] Experiment */
         mmp2p={MMP2P}
       />
diff --git a/src/courseware/course/Course.test.jsx b/src/courseware/course/Course.test.jsx
index 1fd41e7ae8..4edd9a1c90 100644
--- a/src/courseware/course/Course.test.jsx
+++ b/src/courseware/course/Course.test.jsx
@@ -91,6 +91,7 @@ describe('Course', () => {
     const toggleSidebar = jest.fn();
     const isSidebarVisible = jest.fn();
 
+    // REV-2130 TODO: remove cookie related code once temporary value prop cookie code is removed.
     const cookieName = 'value_prop_cookie';
     Cookies.set = jest.fn();
     Cookies.get = jest.fn().mockImplementation(() => cookieName);
diff --git a/src/courseware/course/NotificationIcon.jsx b/src/courseware/course/NotificationIcon.jsx
index e2fe41e306..7f982ed1a9 100644
--- a/src/courseware/course/NotificationIcon.jsx
+++ b/src/courseware/course/NotificationIcon.jsx
@@ -13,7 +13,7 @@ function NotificationIcon({ intl, status, notificationColor }) {
     <div className="icon-container">
       <Icon src={WatchOutline} className="m-0 m-auto" alt={intl.formatMessage(messages.openSidebarButton)} />
       {status === 'active'
-        ? <span className={classNames(notificationColor, 'notification-dot')} />
+        ? <span className={classNames(notificationColor, 'notification-dot')} data-testid="notification-dot" />
         : null}
     </div>
   );
diff --git a/src/courseware/course/Sidebar.jsx b/src/courseware/course/Sidebar.jsx
index d01b45f5d9..7fa5f457f2 100644
--- a/src/courseware/course/Sidebar.jsx
+++ b/src/courseware/course/Sidebar.jsx
@@ -13,7 +13,8 @@ function Sidebar({
 }) {
   const shouldDisplayFullScreen = useWindowSize().width < responsiveBreakpoints.large.minWidth;
 
-  // REV-2130 TODO: temporary variable set to true, should be replaced with whether the course can be upgraded.
+  // REV-2130 TODO: temporary variable set to true, should be replaced with
+  // whether the course can be upgraded (ie. shouldDisplayUpgradeNotification)
   const shouldDisplayNoNotification = true;
 
   return (
@@ -32,7 +33,7 @@ function Sidebar({
       </div>
       <div className="sidebar-divider" />
       <div className="sidebar-content">
-        {/* REV-2130 TODO: replace null with upgrade expiration box */}
+        {/* REV-2130 TODO: replace logic to display upgrade expiration box if condition is true */}
         {shouldDisplayNoNotification ? <p>{intl.formatMessage(messages.noNotificationsMessage)}</p> : null}
       </div>
     </section>
diff --git a/src/courseware/course/SidebarNotificationButton.test.jsx b/src/courseware/course/SidebarNotificationButton.test.jsx
new file mode 100644
index 0000000000..abaffe0c83
--- /dev/null
+++ b/src/courseware/course/SidebarNotificationButton.test.jsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { Factory } from 'rosie';
+import {
+  render, initializeTestStore, screen, fireEvent,
+} from '../../setupTest';
+import SidebarNotificationButton from './SidebarNotificationButton';
+
+describe('Sidebar Notification Button', () => {
+  let mockData;
+  const courseMetadata = Factory.build('courseMetadata');
+
+  beforeAll(async () => {
+    await initializeTestStore({ courseMetadata, excludeFetchCourse: true, excludeFetchSequence: true });
+    mockData = {
+      toggleSidebar: () => {},
+      isSidebarVisible: () => {},
+    };
+  });
+
+  it('renders sidebar notification button with icon', async () => {
+    const { container } = render(<SidebarNotificationButton {...mockData} />);
+    expect(container).toBeInTheDocument();
+    const buttonIcon = container.querySelectorAll('svg');
+    expect(buttonIcon).toHaveLength(1);
+
+    // REV-2130 TODO: update below test once the status=active or inactive is implemented
+    expect(screen.getByTestId('notification-dot')).toBeInTheDocument();
+  });
+
+  it('handles onClick event toggling the sidebar', async () => {
+    const toggleSidebar = jest.fn();
+    const testData = {
+      ...mockData,
+      toggleSidebar,
+    };
+    render(<SidebarNotificationButton {...testData} />);
+
+    const sidebarOpenButton = screen.getByRole('button', { name: /Show sidebar notification/i });
+    expect(sidebarOpenButton).toBeInTheDocument();
+    fireEvent.click(sidebarOpenButton);
+    expect(toggleSidebar).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/courseware/course/sequence/Sequence.jsx b/src/courseware/course/sequence/Sequence.jsx
index 1281cb4ba3..7e5b4f8678 100644
--- a/src/courseware/course/sequence/Sequence.jsx
+++ b/src/courseware/course/sequence/Sequence.jsx
@@ -39,7 +39,7 @@ function Sequence({
   toggleSidebar,
   sidebarVisible,
   isSidebarVisible,
-  isCookieSet,
+  isValuePropCookieSet,
   mmp2p,
 }) {
   const course = useModel('coursewareMeta', courseId);
@@ -177,10 +177,10 @@ function Sequence({
                 handlePrevious();
               }}
               goToCourseExitPage={() => goToCourseExitPage()}
-              isCookieSet={isCookieSet}
+              isValuePropCookieSet={isValuePropCookieSet}
             />
 
-            {shouldDisplaySidebarButton && isCookieSet ? (
+            {isValuePropCookieSet && shouldDisplaySidebarButton ? (
               <SidebarNotificationButton
                 toggleSidebar={toggleSidebar}
                 isSidebarVisible={isSidebarVisible}
@@ -252,7 +252,7 @@ Sequence.propTypes = {
   toggleSidebar: PropTypes.func,
   sidebarVisible: PropTypes.bool,
   isSidebarVisible: PropTypes.func,
-  isCookieSet: PropTypes.bool,
+  isValuePropCookieSet: PropTypes.bool,
 
   /** [MM-P2P] Experiment */
   mmp2p: PropTypes.shape({
@@ -274,7 +274,7 @@ Sequence.defaultProps = {
   toggleSidebar: null,
   sidebarVisible: null,
   isSidebarVisible: null,
-  isCookieSet: null,
+  isValuePropCookieSet: null,
 
   /** [MM-P2P] Experiment */
   mmp2p: {
diff --git a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
index 2a9f285b52..72c4e726b4 100644
--- a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
+++ b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
@@ -28,7 +28,7 @@ function SequenceNavigation({
   nextSequenceHandler,
   previousSequenceHandler,
   goToCourseExitPage,
-  isCookieSet,
+  isValuePropCookieSet,
   mmp2p,
 }) {
   const sequence = useModel('sequences', sequenceId);
@@ -41,7 +41,7 @@ function SequenceNavigation({
     sequence.gatedContent !== undefined && sequence.gatedContent.gated
   ) : undefined;
 
-  const shouldDisplaySidebarButton = useWindowSize().width < responsiveBreakpoints.small.minWidth && isCookieSet;
+  const shouldDisplaySidebarButton = useWindowSize().width < responsiveBreakpoints.small.minWidth;
 
   const renderUnitButtons = () => {
     if (isLocked) {
@@ -71,17 +71,17 @@ function SequenceNavigation({
     const disabled = isLastUnit && !exitActive;
     return (
       <Button variant="link" className="next-btn" onClick={buttonOnClick} disabled={disabled}>
-        {shouldDisplaySidebarButton ? null : buttonText}
+        {isValuePropCookieSet && shouldDisplaySidebarButton ? null : buttonText}
         <FontAwesomeIcon icon={faChevronRight} className="mx-3 mr-sm-0 ml-sm-2" size="sm" />
       </Button>
     );
   };
 
   return sequenceStatus === LOADED && (
-    <nav className={classNames('sequence-navigation', className)} style={{ width: shouldDisplaySidebarButton ? '90%' : null }}>
+    <nav className={classNames('sequence-navigation', className)} style={{ width: isValuePropCookieSet && shouldDisplaySidebarButton ? '90%' : null }}>
       <Button variant="link" className="previous-btn" onClick={previousSequenceHandler} disabled={isFirstUnit}>
         <FontAwesomeIcon icon={faChevronLeft} className="mx-3 ml-sm-0 mr-sm-2" size="sm" />
-        {shouldDisplaySidebarButton ? null : intl.formatMessage(messages.previousButton)}
+        {isValuePropCookieSet && shouldDisplaySidebarButton ? null : intl.formatMessage(messages.previousButton)}
       </Button>
       {renderUnitButtons()}
       {renderNextButton()}
@@ -101,7 +101,7 @@ SequenceNavigation.propTypes = {
   nextSequenceHandler: PropTypes.func.isRequired,
   previousSequenceHandler: PropTypes.func.isRequired,
   goToCourseExitPage: PropTypes.func.isRequired,
-  isCookieSet: PropTypes.bool,
+  isValuePropCookieSet: PropTypes.bool,
   /** [MM-P2P] Experiment */
   mmp2p: PropTypes.shape({
     state: PropTypes.shape({
@@ -113,7 +113,7 @@ SequenceNavigation.propTypes = {
 SequenceNavigation.defaultProps = {
   className: null,
   unitId: null,
-  isCookieSet: null,
+  isValuePropCookieSet: null,
 
   /** [MM-P2P] Experiment */
   mmp2p: {