reorganize DrawerToggler

apps/app/src/components/Navbar/DrawerToggler.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { useDrawerOpened } from '~/stores/ui';
 
@@ -6,11 +6,13 @@ type Props = {
   iconClass?: string,
 }
 
-const DrawerToggler: FC<Props> = (props: Props) => {
+const DrawerToggler = (props: Props): JSX.Element => {
 
   const { data: isOpened, mutate } = useDrawerOpened();
 
-  const iconClass = props.iconClass || 'icon-menu';
+  const iconClass = props.iconClass ?? isOpened
+    ? 'icon-arrow-left'
+    : 'icon-arrow-right';
 
   return (
     <button

apps/app/src/components/Sidebar/Sidebar.module.scss

@@ -36,31 +36,16 @@
           transition: width 200ms cubic-bezier(0.2, 0, 0, 1) 0s;
         }
         will-change: width;
+
         .grw-contextual-navigation-child {
-          position: absolute;
-          top: 0px;
-          left: 0px;
-          box-sizing: border-box;
-          width: 100%;
-          min-width: 240px;
           height: 100%;
           overflow-x: hidden;
-          transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
-          transition-duration: 0.22s;
-          transition-property: boxShadow, transform;
-          animation-duration: 0.22s;
-          animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
-          animation-fill-mode: forwards;
-
-          :global .grw-contextual-navigation-sub {
-            box-sizing: border-box;
-            display: flex;
-            flex-direction: column;
-            width: 100%;
-            height: 100%;
-            overflow: hidden;
-          }
         }
+
+        .grw-drawer-toggler {
+          display: none; // invisible in default
+        }
+
       }
 
       .simplebar-mask {
@@ -153,10 +138,6 @@
     }
   }
 
-  .grw-drawer-toggler {
-    display: none; // invisible in default
-  }
-
   .grw-sidebar-content-header {
     .grw-btn-reload {
       font-size: 18px;
@@ -196,8 +177,10 @@
       transform: translateX(0);
     }
 
-    .grw-drawer-toggler {
-      display: block;
+    .grw-contextual-navigation-child {
+      .grw-drawer-toggler {
+        display: block;
+      }
     }
   }
 
@@ -205,24 +188,18 @@
     display: none !important;
   }
 
-  .grw-drawer-toggler {
-    position: fixed;
-    right: -15px;
-
-    @include bs.media-breakpoint-down(sm) {
-      bottom: 15px;
-      width: 42px;
-      height: 42px;
-      font-size: 18px;
-    }
-    @include bs.media-breakpoint-up(md) {
-      top: 72px;
-      width: 50px;
-      height: 50px;
-      font-size: 24px;
+  .grw-contextual-navigation-child {
+    .grw-drawer-toggler {
+      @include bs.media-breakpoint-down(sm) {
+        position: fixed;
+        right: -15px;
+        bottom: 15px;
+        width: 42px;
+        height: 42px;
+        font-size: 18px;
+        transform: translateX(100%);
+      }
     }
-
-    transform: translateX(100%);
   }
 }
 

apps/app/src/components/Sidebar/Sidebar.tsx

@@ -316,10 +316,9 @@ export const Sidebar = memo((): JSX.Element => {
                 onMouseLeave={hoverOutResizableContainerHandler}
                 style={{ width: isCollapsed ? sidebarMinimizeWidth : currentProductNavWidth }}
               >
-                <div className="grw-contextual-navigation-child">
-                  <div role="group" data-testid="grw-contextual-navigation-sub" className={`grw-contextual-navigation-sub ${showContents ? '' : 'd-none'}`}>
-                    <SidebarContentsWrapper></SidebarContentsWrapper>
-                  </div>
+                <div className={`grw-contextual-navigation-child ${showContents ? '' : 'd-none'}`} data-testid="grw-contextual-navigation-child">
+                  <SidebarContents />
+                  <DrawerToggler iconClass="icon-arrow-left" />
                 </div>
               </div>
             </div>

apps/app/src/components/Sidebar/SidebarNav.tsx

@@ -12,6 +12,8 @@ import {
 } from '~/stores/context';
 import { useCurrentSidebarContents } from '~/stores/ui';
 
+import DrawerToggler from '../Navbar/DrawerToggler';
+
 import { SidebarBrandLogo } from './SidebarBrandLogo';
 
 import styles from './SidebarNav.module.scss';
@@ -109,6 +111,7 @@ export const SidebarNav: FC<Props> = (props: Props) => {
         <Link href="/" className="grw-logo d-block">
           <SidebarBrandLogo isDefaultLogo={isDefaultLogo} />
         </Link>
+        <DrawerToggler />
       </div>
 
       <div className="grw-sidebar-nav-primary-container" data-vrt-blackout-sidebar-nav>

apps/app/test/cypress/e2e/20-basic-features/20-basic-features--access-to-page.cy.ts

@@ -209,7 +209,7 @@ context('Access to Template Editing Mode', () => {
 
     // Open sidebar
     cy.collapseSidebar(false);
-    cy.getByTestid('grw-contextual-navigation-sub').should('be.visible');
+    cy.getByTestid('grw-contextual-navigation-child').should('be.visible');
     cy.waitUntilSkeletonDisappear();
 
     // If PageTree is not active when the sidebar is opened, make it active
@@ -221,7 +221,7 @@ context('Access to Template Editing Mode', () => {
       });
 
     // Create page (/{parentPath}}/{newPagePath}) from PageTree
-    cy.getByTestid('grw-contextual-navigation-sub').within(() => {
+    cy.getByTestid('grw-contextual-navigation-child').within(() => {
       cy.get('.grw-pagetree-item-children').first().as('pagetreeItem').within(() => {
         cy.get('#page-create-button-in-page-tree').first().click({force: true})
       });

apps/app/test/cypress/e2e/50-sidebar/50-sidebar--access-to-side-bar.cy.ts

@@ -27,7 +27,7 @@ describe('Access to sidebar', () => {
 
       describe('Test show/collapse button', () => {
         it('Successfully show sidebar', () => {
-          cy.getByTestid('grw-contextual-navigation-sub').should('be.visible');
+          cy.getByTestid('grw-contextual-navigation-child').should('be.visible');
 
           cy.waitUntilSkeletonDisappear();
           cy.screenshot(`${ssPrefix}1-sidebar-shown`, {
@@ -39,7 +39,7 @@ describe('Access to sidebar', () => {
         it('Successfully collapse sidebar', () => {
           cy.getByTestid('grw-navigation-resize-button').click({force: true});
 
-          cy.getByTestid('grw-contextual-navigation-sub').should('not.be.visible');
+          cy.getByTestid('grw-contextual-navigation-child').should('not.be.visible');
 
           cy.waitUntilSkeletonDisappear();
           cy.screenshot(`${ssPrefix}2-sidebar-collapsed`, {
@@ -61,7 +61,7 @@ describe('Access to sidebar', () => {
         });
 
         it('Successfully access to page tree', () => {
-          cy.getByTestid('grw-contextual-navigation-sub').within(() => {
+          cy.getByTestid('grw-contextual-navigation-child').within(() => {
             cy.getByTestid('grw-pagetree-item-container').should('be.visible');
 
             cy.waitUntilSkeletonDisappear();
@@ -70,7 +70,7 @@ describe('Access to sidebar', () => {
         });
 
         it('Successfully hide page tree items', () => {
-          cy.getByTestid('grw-contextual-navigation-sub').within(() => {
+          cy.getByTestid('grw-contextual-navigation-child').within(() => {
             cy.get('.grw-pagetree-open').should('be.visible');
 
             // hide page tree tiems
@@ -83,7 +83,7 @@ describe('Access to sidebar', () => {
         it('Successfully click Add to Bookmarks button', () => {
           cy.waitUntil(() => {
             // do
-            cy.getByTestid('grw-contextual-navigation-sub').within(() => {
+            cy.getByTestid('grw-contextual-navigation-child').within(() => {
               cy.get('.grw-pagetree-item-children').first().as('pagetreeItem').within(() => {
                 cy.getByTestid('open-page-item-control-btn').find('button').first().invoke('css','display','block').click()
               });
@@ -101,7 +101,7 @@ describe('Access to sidebar', () => {
           // show dropdown again
           cy.waitUntil(() => {
             // do
-            cy.getByTestid('grw-contextual-navigation-sub').within(() => {
+            cy.getByTestid('grw-contextual-navigation-child').within(() => {
               cy.get('.grw-pagetree-item-children').first().as('pagetreeItem').within(() => {
                 cy.getByTestid('open-page-item-control-btn').find('button').first().invoke('css','display','block').click()
               });
@@ -116,7 +116,7 @@ describe('Access to sidebar', () => {
         it('Successfully show duplicate page modal', () => {
           cy.waitUntil(() => {
             // do
-            cy.getByTestid('grw-contextual-navigation-sub').within(() => {
+            cy.getByTestid('grw-contextual-navigation-child').within(() => {
               cy.get('.grw-pagetree-item-children').first().as('pagetreeItem').within(() => {
                 cy.getByTestid('open-page-item-control-btn').find('button').first().invoke('css','display','block').click()
               });
@@ -141,7 +141,7 @@ describe('Access to sidebar', () => {
         it('Successfully rename page', () => {
           cy.waitUntil(() => {
             // do
-            cy.getByTestid('grw-contextual-navigation-sub').within(() => {
+            cy.getByTestid('grw-contextual-navigation-child').within(() => {
               cy.get('.grw-pagetree-item-children').first().as('pagetreeItem').within(() => {
                 cy.getByTestid('open-page-item-control-btn').find('button').first().invoke('css','display','block').click()
               });
@@ -164,7 +164,7 @@ describe('Access to sidebar', () => {
         it('Successfully show delete page modal', () => {
           cy.waitUntil(() => {
             // do
-            cy.getByTestid('grw-contextual-navigation-sub').within(() => {
+            cy.getByTestid('grw-contextual-navigation-child').within(() => {
               cy.get('.grw-pagetree-item-children').first().as('pagetreeItem').within(() => {
                 cy.getByTestid('open-page-item-control-btn').find('button').first().invoke('css','display','block').click()
               });
@@ -196,7 +196,7 @@ describe('Access to sidebar', () => {
         });
 
         it('Successfully access to custom sidebar', () => {
-          cy.getByTestid('grw-contextual-navigation-sub').within(() => {
+          cy.getByTestid('grw-contextual-navigation-child').within(() => {
             cy.get('.grw-sidebar-content-header > h3').find('a');
 
             cy.waitUntilSkeletonDisappear();
@@ -269,7 +269,7 @@ describe('Access to sidebar', () => {
         });
 
         it('Successfully access to tags', () => {
-          cy.getByTestid('grw-contextual-navigation-sub').within(() => {
+          cy.getByTestid('grw-contextual-navigation-child').within(() => {
             cy.getByTestid('grw-tags-list').should('be.visible');
 
             cy.screenshot(`${ssPrefix}tags-1-access-to-tags`, { blackout: blackoutOverride });

apps/app/test/cypress/support/commands.ts

@@ -81,7 +81,7 @@ Cypress.Commands.add('collapseSidebar', (isCollapsed: boolean, waitUntilSaving =
 
   cy.getByTestid('grw-sidebar').should('be.visible').within(() => {
 
-    const isSidebarContextualNavigationHidden = isHiddenByTestId('grw-contextual-navigation-sub');
+    const isSidebarContextualNavigationHidden = isHiddenByTestId('grw-contextual-navigation-child');
     if (isSidebarContextualNavigationHidden === isCollapsed) {
       return;
     }
@@ -96,7 +96,7 @@ Cypress.Commands.add('collapseSidebar', (isCollapsed: boolean, waitUntilSaving =
       }
 
       // wait until
-      return cy.getByTestid('grw-contextual-navigation-sub').then($contents => isHidden($contents) === isCollapsed);
+      return cy.getByTestid('grw-contextual-navigation-child').then($contents => isHidden($contents) === isCollapsed);
     });
   });