impl toggling drawer with MobileFooter

src/client/js/components/MobileFooter.jsx

@@ -11,8 +11,13 @@ const MobileFooter = (props) => {
   } = props;
   const { isDrawerOpened } = navigationContainer.state;
 
+  const additionalClasses = ['grw-mobile-footer'];
+  if (isDrawerOpened) {
+    additionalClasses.push('grw-mobile-footer-drawer-opened');
+  }
+
   return (
-    <div className="navbar navbar-expand navbar-dark bg-primary d-md-none fixed-bottom px-0">
+    <div className={`navbar navbar-expand navbar-dark bg-primary d-md-none fixed-bottom px-0 ${additionalClasses.join(' ')}`}>
       <ul className="navbar-nav w-100">
         <li className="nav-item">
           <a type="button" className="nav-link btn-lg" onClick={() => navigationContainer.toggleDrawer()}>

src/client/styles/scss/_mixins.scss

@@ -218,3 +218,8 @@
     fill: $color;
   }
 }
+
+@mixin apply-navigation-transition() {
+  transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
+  transition-duration: 300ms;
+}

src/client/styles/scss/_navbar.scss

@@ -55,3 +55,15 @@
     }
   }
 }
+
+.grw-mobile-footer {
+  height: $grw-mobile-footer-height;
+
+  // apply transition
+  transition-property: bottom;
+  @include apply-navigation-transition();
+
+  &.grw-mobile-footer-drawer-opened {
+    bottom: -$grw-mobile-footer-height;
+  }
+}

src/client/styles/scss/_sidebar.scss

@@ -74,8 +74,6 @@
     // Adjust to be on top of the growi subnavigation
     // z-index: $zindex-sticky + 5;
 
-    transition: left 300ms cubic-bezier(0.25, 1, 0.5, 1);
-
     // css-xxx-ContainerNavigationMask
     > div:nth-of-type(1) {
     }
@@ -145,24 +143,21 @@
 
 // Drawer Mode
 @mixin drawer() {
-  z-index: $zindex-fixed - 2;
+  z-index: $zindex-fixed + 1;
 
   // override @atlaskit/navigation-next styles
   div[data-layout-container='true'] {
-    // css-teprsg
-    > div:nth-of-type(2) {
-      display: none;
-    }
+    height: 100vw;
   }
   div[data-testid='Navigation'] {
     position: fixed;
+    top: 0;
 
     max-width: 80vw;
 
-    // css-xxx-Outer
-    > div:nth-of-type(2) {
-      display: none;
-    }
+    // apply transition
+    transition-property: left;
+    @include apply-navigation-transition();
   }
 
   &:not(.open) {

src/client/styles/scss/_variables.scss

@@ -19,3 +19,5 @@ $grw-logomark-width: 36px;
 // see also '_on-edit.scss'
 $grw-nav-main-left-tab-width: 95px;
 $grw-nav-main-tab-height: 42px;
+
+$grw-mobile-footer-height: 48px;