PSP-8586 : FT-REG: Subdivision/ Consolidation - Menu icon enlarges wh…

…en user clicks on expand the left menu section (#4077) Co-authored-by: Herrera <[email protected]>
bcgov · Jun 5, 2024 · 9030103 · 9030103
1 parent baaabd0
commit 9030103
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 76 deletions.
diff --git a/source/frontend/src/assets/images/subdivisionconsolidation.svg b/source/frontend/src/assets/images/subdivisionconsolidation.svg
diff --git a/source/frontend/src/components/layout/SideNavBar/NavIcon.tsx b/source/frontend/src/components/layout/SideNavBar/NavIcon.tsx
@@ -34,7 +34,7 @@ export const NavIcon = ({ icon, text, showText, onClick, roles, claims }: INavIc
         <TooltipWrapper tooltipId={`nav-tooltip-${text}`} tooltip={text}>
           {icon}
         </TooltipWrapper>
-        <StyledLabel className={clsx({ show: showText })}>{text}</StyledLabel>
+        {showText && <StyledLabel className={clsx({ show: showText })}>{text}</StyledLabel>}
       </StyledLink>
     </StyledNav>
   ) : null;
@@ -58,7 +58,8 @@ const StyledLabel = styled.label`
   margin-bottom: 0;
   font-size: 1.2rem;
   color: white;
-  white-space: nowrap;
+  word-break: break-word;
+  white-space: break-spaces;
   transition: width 0.25s;
   width: 0;
   overflow: hidden;

diff --git a/source/frontend/src/components/layout/SideNavBar/SideNavbar.test.tsx b/source/frontend/src/components/layout/SideNavBar/SideNavbar.test.tsx
@@ -6,7 +6,6 @@ import { Claims, Roles } from '@/constants/index';
 
 import { SideNavBar } from './SideNavbar';
 import { render } from '@/utils/test-utils';
-import { useKeycloak } from '@react-keycloak/web';
 import { SidebarStateContextProvider } from './SideNavbarContext';
 
 interface IRenderProps {
@@ -88,7 +87,7 @@ describe('SideNavbar display and logic', () => {
     const { getByTitle, queryByText, getByTestId } = renderComponent();
     await waitFor(async () => {
       expect(getByTitle('expand')).toBeInTheDocument();
-      expect(queryByText('Leases & Licenses')?.clientWidth).toBe(0);
+      expect(queryByText('Leases & Licenses')).not.toBeInTheDocument();
       expect(getByTestId('nav-tooltip-leases&licenses')).toContainHTML('svg');
     });
   });

diff --git a/source/frontend/src/components/layout/SideNavBar/__snapshots__/SideNavbar.test.tsx.snap b/source/frontend/src/components/layout/SideNavBar/__snapshots__/SideNavbar.test.tsx.snap
@@ -55,7 +55,7 @@ exports[`SideNavbar display and logic > renders 1`] = `
   position: relative;
 }
 
-.c7 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -66,16 +66,16 @@ exports[`SideNavbar display and logic > renders 1`] = `
   height: 100%;
 }
 
-.c7 a {
+.c6 a {
   font-size: 1.7rem;
 }
 
-.c6#close-tray {
+.c5#close-tray {
   float: right;
   cursor: pointer;
 }
 
-.c5 {
+.c4 {
   height: 100%;
   overflow-y: auto;
   position: absolute;
@@ -86,13 +86,13 @@ exports[`SideNavbar display and logic > renders 1`] = `
   width: 64rem;
   padding: 0.8rem 1.6rem;
   text-align: left;
-  -webkit-transition: -webkit-transform 0.5s ease-in-out;
-  -webkit-transition: transform 0.5s ease-in-out;
-  transition: transform 0.5s ease-in-out;
+  -webkit-transition: -webkit-transform 0.3s ease-in-out;
+  -webkit-transition: transform 0.3s ease-in-out;
+  transition: transform 0.3s ease-in-out;
   box-shadow: 0.3rem 0 0.4rem rgba(0,0,0,0.2);
 }
 
-.c5.show {
+.c4.show {
   -webkit-transform: translateX(64rem);
   -ms-transform: translateX(64rem);
   transform: translateX(64rem);
@@ -122,30 +122,12 @@ exports[`SideNavbar display and logic > renders 1`] = `
   min-width: max-content;
 }
 
-.c4 {
-  margin-left: 0.4rem;
-  margin-bottom: 0;
-  font-size: 1.2rem;
-  color: white;
-  white-space: nowrap;
-  -webkit-transition: width 0.25s;
-  transition: width 0.25s;
-  width: 0;
-  overflow: hidden;
-  text-align: left;
-  cursor: pointer;
-}
-
-.c4.show {
-  width: 100%;
-}
-
 @media (max-width:1225px) {
-  .c5 {
+  .c4 {
     width: 32rem;
   }
 
-  .c5.show {
+  .c4.show {
     -webkit-transform: translateX(32rem);
     -ms-transform: translateX(32rem);
     transform: translateX(32rem);
@@ -189,11 +171,6 @@ exports[`SideNavbar display and logic > renders 1`] = `
               d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"
             />
           </svg>
-          <label
-            class="c4"
-          >
-            Home
-          </label>
         </a>
       </div>
       <div
@@ -218,11 +195,6 @@ exports[`SideNavbar display and logic > renders 1`] = `
               d="M320 336c0 8.84-7.16 16-16 16h-96c-8.84 0-16-7.16-16-16v-48H0v144c0 25.6 22.4 48 48 48h416c25.6 0 48-22.4 48-48V288H320v48zm144-208h-80V80c0-25.6-22.4-48-48-48H176c-25.6 0-48 22.4-48 48v48H48c-25.6 0-48 22.4-48 48v80h512v-80c0-25.6-22.4-48-48-48zm-144 0H192V96h128v32z"
             />
           </svg>
-          <label
-            class="c4"
-          >
-            Project
-          </label>
         </a>
       </div>
       <div
@@ -253,11 +225,6 @@ exports[`SideNavbar display and logic > renders 1`] = `
               />
             </g>
           </svg>
-          <label
-            class="c4"
-          >
-            Research
-          </label>
         </a>
       </div>
       <div
@@ -286,11 +253,6 @@ exports[`SideNavbar display and logic > renders 1`] = `
               d="M21,6.5V14h-2V7.5L14,4L9,7.5V9H7V6.5l7-5L21,6.5z M15.5,7h-1v1h1V7z M13.5,7h-1v1h1V7z M15.5,9h-1v1h1V9z M13.5,9h-1v1h1V9 z M19,16h-2c0-1.2-0.75-2.28-1.87-2.7L8.97,11H1v11h6v-1.44l7,1.94l8-2.5v-1C22,17.34,20.66,16,19,16z M3,20v-7h2v7H3z M13.97,20.41 L7,18.48V13h1.61l5.82,2.17C14.77,15.3,15,15.63,15,16c0,0-1.99-0.05-2.3-0.15l-2.38-0.79l-0.63,1.9l2.38,0.79 c0.51,0.17,1.04,0.26,1.58,0.26H19c0.39,0,0.74,0.23,0.9,0.56L13.97,20.41z"
             />
           </svg>
-          <label
-            class="c4"
-          >
-            Acquisition
-          </label>
         </a>
       </div>
       <div
@@ -323,11 +285,6 @@ exports[`SideNavbar display and logic > renders 1`] = `
               />
             </g>
           </svg>
-          <label
-            class="c4"
-          >
-            Leases & Licenses
-          </label>
         </a>
       </div>
       <div
@@ -363,11 +320,6 @@ exports[`SideNavbar display and logic > renders 1`] = `
               d="M15 6h5v5"
             />
           </svg>
-          <label
-            class="c4"
-          >
-            Disposition
-          </label>
         </a>
       </div>
       <div
@@ -382,8 +334,10 @@ exports[`SideNavbar display and logic > renders 1`] = `
           <svg
             class="mr-1"
             data-name="Layer 2"
+            height="24px"
             id="Layer_2"
-            viewBox="0 0 21.62 14.48"
+            viewBox="0 0 24 24"
+            width="24px"
             xmlns="http://www.w3.org/2000/svg"
           >
             <defs />
@@ -401,11 +355,6 @@ exports[`SideNavbar display and logic > renders 1`] = `
               </g>
             </g>
           </svg>
-          <label
-            class="c4"
-          >
-            Subdivision & Consolidation
-          </label>
         </a>
       </div>
       <svg
@@ -431,11 +380,11 @@ exports[`SideNavbar display and logic > renders 1`] = `
       </svg>
     </div>
     <div
-      class="c5"
+      class="c4"
       data-testid="side-tray"
     >
       <svg
-        class="c6"
+        class="c5"
         fill="currentColor"
         height="32"
         id="close-tray"
@@ -453,7 +402,7 @@ exports[`SideNavbar display and logic > renders 1`] = `
         />
       </svg>
       <div
-        class="c7"
+        class="c6"
       />
     </div>
   </div>

diff --git a/source/frontend/src/components/layout/SideNavBar/styles.ts b/source/frontend/src/components/layout/SideNavBar/styles.ts
@@ -79,7 +79,7 @@ export const SideTray = styled.div`
   width: 64rem;
   padding: 0.8rem 1.6rem;
   text-align: left;
-  transition: transform 0.5s ease-in-out;
+  transition: transform 0.3s ease-in-out;
   box-shadow: 0.3rem 0 0.4rem rgba(0, 0, 0, 0.2);
   &.show {
     transform: translateX(64rem);

diff --git a/...nd/src/features/mapSideBar/consolidation/__snapshots__/AddConsolidationView.test.tsx.snap b/...nd/src/features/mapSideBar/consolidation/__snapshots__/AddConsolidationView.test.tsx.snap
@@ -46,8 +46,10 @@ exports[`Add Consolidation View > matches snapshot 1`] = `
           <svg
             class="c1"
             data-name="Layer 2"
+            height="24px"
             id="Layer_2"
-            viewBox="0 0 21.62 14.48"
+            viewBox="0 0 24 24"
+            width="24px"
             xmlns="http://www.w3.org/2000/svg"
           >
             <defs />

diff --git a/...ontend/src/features/mapSideBar/subdivision/__snapshots__/AddSubdivisionView.test.tsx.snap b/...ontend/src/features/mapSideBar/subdivision/__snapshots__/AddSubdivisionView.test.tsx.snap
@@ -46,8 +46,10 @@ exports[`Add Subdivision View > matches snapshot 1`] = `
           <svg
             class="c1"
             data-name="Layer 2"
+            height="24px"
             id="Layer_2"
-            viewBox="0 0 21.62 14.48"
+            viewBox="0 0 24 24"
+            width="24px"
             xmlns="http://www.w3.org/2000/svg"
           >
             <defs />