DUOS-810 [risk=no] Swapped out ResponsiveMenu for conditional renderi…

…ng of navbar (#885)

* DUOS-765 added init search filter functionality

* DUOS-765 more init styes, fleshed out pagination and search functions

* DUOS-765 finishied up search and pagination functionality, need to do more with styling

* DUOS-765 made pagination bar its own component, init adjustments, styling adjustments

* DUOS-765 minor code refactor for formatting dates, minor styling update

* DUOS-765 codacy fixes

* DUOS-810 building out navbar drawer for smaller screens

* DUOS-810 added skeletal structure for dropdown component

* DUOS-810 adjustments of menu item popover mechanism (still need to add styling), adjustment to duos-navbar z-index value

* DUOS-810 finished up adding links, modified conditionals for inital skeleton links, updated styling

* DUOS-810 corrected targetLink spelling, corrected role render condition

Co-authored-by: Greg Rushton <rushtong@users.noreply.github.com>

* DUOS-810 removed old link selection from navbar, corrected isRendered conditional for Votes Statistics

* DUOS-810 reverted import statement double-quote change, cleaned up role conditional for statistics

* DUOS-810 additional adjustments to quote syntax

* DUOS-810 added ids to material-ui menu links, updated about page test, rearranged FAQ position in links

* DUOS-810 corrected test descriptions, created split desktop and mobile tests for about page

* DUOS-810 corrected test descriptions for mobile view

* DUOS-810 removed conditional for FAQs on mobile navbar

* DUOS-810 removed react-responsive-navbar from package.json

* DUOS-810 added cursor style for DUOS logo

Co-authored-by: Greg Rushton <rushtong@users.noreply.github.com>

cypress/integration/about_spec.js

@@ -2,18 +2,35 @@
 
 describe('About', function() {
 
-  it('About page loads from home', function() {
+  it('About page loads from home - Desktop', function() {
+    cy.viewport(2000, 2000);
     cy.visit('');
     cy.contains('About');
     cy.contains('About').click();
     cy.url().should('include', 'home_about');
   });
 
-  it('About page shows content', function() {
+  it('About page loads from home - Mobile', function() {
+    cy.viewport(600, 600);
+    cy.visit('');
+    cy.get('#navbar-menu-icon').click();
+    cy.get('#menu-link-About').click();
+    cy.url().should('include', 'home_about');
+  });
+
+  it('About page shows content - Desktop', function() {
+    cy.viewport(2000, 2000);
     cy.visit('');
     cy.contains('About');
     cy.contains('About').click();
     cy.contains('Data Use Oversight System');
   });
 
+  it('About page shows content - Mobile', function() {
+    cy.viewport(600, 600);
+    cy.visit('');
+    cy.get('#navbar-menu-icon').click();
+    cy.get('#menu-link-About').click();
+    cy.contains('Data Use Oversight System');
+  });
 });

package.json

@@ -32,7 +32,6 @@
     "react-modal": "3.12.1",
     "react-paginating": "1.4.0",
     "react-protected-mailto": "1.0.3",
-    "react-responsive-navbar": "1.0.11",
     "react-router": "5.2.0",
     "react-router-bootstrap": "0.25.0",
     "react-router-dom": "5.2.0",

src/components/DuosHeader.css

@@ -6,7 +6,7 @@
   font-family: "Montserrat", sans-serif;
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 10px 0 rgba(0, 0, 0, 0.16);
   position: relative;
-  z-index: 10000;
+  z-index: 500;
 }
 
 .navbar-duos li {
@@ -142,7 +142,6 @@
   }
   .cTMEws .navbar-public,
   .cTMEws .navbar-logged {
-    float: left;
     text-align: left !important;
     display: inline-block !important;
   }