refactor GrowiSubNavigationFixed -> GrowiSubNavigationSwitcher

src/client/js/app.jsx

@@ -38,7 +38,7 @@ import CommentContainer from './services/CommentContainer';
 import EditorContainer from './services/EditorContainer';
 import TagContainer from './services/TagContainer';
 import GrowiSubNavigation from './components/Navbar/GrowiSubNavigation';
-import GrowiSubNavigationFixed from './components/Navbar/GrowiSubNavigationFixed';
+import GrowiSubNavigationSwitcher from './components/Navbar/GrowiSubNavigationSwitcher';
 import GrowiSubNavigationForUserPage from './components/Navbar/GrowiSubNavigationForUserPage';
 import PersonalContainer from './services/PersonalContainer';
 
@@ -104,8 +104,8 @@ if (pageContainer.state.path != null) {
   Object.assign(componentMappings, {
     // eslint-disable-next-line quote-props
     'page': <Page />,
-    'grw-subnav': <GrowiSubNavigation />,
-    'grw-subnav-fixed': <GrowiSubNavigationFixed />,
+    'grw-subnav-container': <GrowiSubNavigation />,
+    'grw-subnav-switcher-container': <GrowiSubNavigationSwitcher />,
     'grw-subnav-for-user-page': <GrowiSubNavigationForUserPage />,
   });
 }

src/client/js/components/Navbar/GrowiSubNavigation.jsx

@@ -70,14 +70,14 @@ const GrowiSubNavigation = (props) => {
   // Display only the RevisionPath
   if (isPageNotFound || isPageForbidden) {
     return (
-      <div className="grw-subnav-content d-flex align-items-center justify-content-between">
+      <div className="grw-subnav d-flex align-items-center justify-content-between">
         <PagePathNav pageId={pageId} pagePath={path} isPageForbidden={isPageForbidden} />
       </div>
     );
   }
 
   return (
-    <div className={`grw-subnav-content d-flex align-items-center justify-content-between ${isCompactMode ? 'grw-subnav-content-compact' : ''}`}>
+    <div className={`grw-subnav d-flex align-items-center justify-content-between ${isCompactMode ? 'grw-subnav-compact' : ''}`}>
 
       {/* Page Path */}
       <div>

src/client/js/components/Navbar/GrowiSubNavigationFixed.jsx → src/client/js/components/Navbar/GrowiSubNavigationSwitcher.jsx

@@ -9,7 +9,7 @@ import GrowiSubNavigation from './GrowiSubNavigation';
 const logger = loggerFactory('growi:cli:GrowiSubNavigationSticky');
 
 
-const GrowiSubNavigationFixed = (props) => {
+const GrowiSubNavigationSwitcher = (props) => {
 
   const [isVisible, setVisible] = useState(false);
 
@@ -34,13 +34,15 @@ const GrowiSubNavigationFixed = (props) => {
   }, []);
 
   return (
-    <div className={`${isVisible ? '' : 'd-none'}`}>
-      <GrowiSubNavigation isCompactMode />
+    <div className={`grw-subnav-switcher ${isVisible ? '' : 'grw-subnav-switcher-hidden'}`}>
+      <div className="grw-subnav-fixed-container position-fixed w-100">
+        <GrowiSubNavigation isCompactMode />
+      </div>
     </div>
   );
 };
 
-GrowiSubNavigationFixed.propTypes = {
+GrowiSubNavigationSwitcher.propTypes = {
 };
 
-export default GrowiSubNavigationFixed;
+export default GrowiSubNavigationSwitcher;

src/client/styles/scss/_subnav.scss

@@ -1,23 +1,4 @@
-$easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);
-
-%transitionForCompactMode {
-  // set transition-duration (normal -> compact)
-  transition: all 300ms $easeInOutCubic;
-}
-
 .grw-subnav {
-  /*
-   * Fixed ver
-   */
-  &.grw-subnav-fixed {
-    top: $grw-navbar-border-width;
-    z-index: $zindex-fixed;
-
-    box-shadow: 0px 6px 6px -3px rgba(black, 0.15);
-  }
-}
-
-.grw-subnav-content {
   min-height: 115px;
   padding: 10px 30px;
 
@@ -78,7 +59,34 @@ $easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);
   /*
    * Compact Mode
    */
-  &.grw-subnav-content-compact {
+  &.grw-subnav-compact {
     min-height: 85px;
   }
 }
+
+/*
+ * Fixed ver
+ */
+$easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);
+
+.grw-subnav-fixed-container {
+  top: $grw-navbar-border-width;
+  z-index: $zindex-sticky - 5;
+
+  .grw-subnav {
+    box-shadow: 0px 6px 6px -3px rgba(black, 0.15);
+  }
+}
+
+.grw-subnav-switcher {
+  .grw-subnav-fixed-container {
+    transition: transform 150ms $easeInOutCubic;
+  }
+
+  &.grw-subnav-switcher-hidden {
+    .grw-subnav-fixed-container {
+      transition: unset;
+      transform: translateY(-100%);
+    }
+  }
+}

src/client/styles/scss/theme/_apply-colors-dark.scss

@@ -190,11 +190,11 @@ ul.pagination {
 /*
  * GROWI subnavigation
  */
-.grw-subnav-content {
+.grw-subnav {
   background-color: $bgcolor-subnav;
 }
 
-.grw-subnav-fixed .grw-subnav-content {
+.grw-subnav-fixed-container .grw-subnav {
   background-color: rgba($bgcolor-subnav, 0.85);
 }
 

src/client/styles/scss/theme/_apply-colors-kibela.scss

@@ -16,11 +16,11 @@ body.kibela {
       background-color: $primary !important;
     }
 
-    .grw-subnav-content {
+    .grw-subnav {
       background-color: rgba(lighten($bgcolor-global, 50%), 1);
     }
 
-    .grw-subnav-fixed .grw-subnav-content {
+    .grw-subnav-fixed-container .grw-subnav {
       background-color: rgba(lighten($bgcolor-global, 50%), 0.85);
     }
 

src/client/styles/scss/theme/_apply-colors-light.scss

@@ -122,11 +122,11 @@ $table-hover-bg: $bgcolor-table-hover;
 /*
  * GROWI subnavigation
  */
-.grw-subnav-content {
+.grw-subnav {
   background-color: $bgcolor-subnav;
 }
 
-.grw-subnav-fixed .grw-subnav-content {
+.grw-subnav-fixed-container .grw-subnav {
   background-color: rgba($bgcolor-subnav, 0.85);
 }
 

src/server/views/layout-growi/base/layout.html

@@ -11,10 +11,10 @@
 {% block content_header_wrapper %}
 <header class="py-0">
   {% block content_header %}
-    <div id="grw-subnav" class="grw-subnav d-edit-none"></div>
-    <div id="grw-subnav-fixed" class="grw-subnav grw-subnav-fixed position-fixed w-100 d-edit-none"></div>
+    <div id="grw-subnav-container" class="d-edit-none"></div>
   {% endblock %}
 </header>
+<div id="grw-subnav-switcher-container" class="d-edit-none"></div>
 <div id="grw-subnav-sticky-trigger" class="sticky-top"></div>
 {% endblock %}
 

src/server/views/layout/layout.html

@@ -75,6 +75,11 @@
 
   {% block layout_head_nav %}
     <nav id="grw-navbar" class="navbar grw-navbar navbar-expand navbar-dark sticky-top mb-0 px-0"></nav>
+
+    {# Search #}
+    {% if isSearchServiceConfigured() %}
+      <div id="grw-search-top" class="search-top" role="search"></div>
+    {% endif %}
   {% endblock  %} {# layout_head_nav #}
 
   {% block head_warn_breaking_changes %}{% include '../widget/alert_breaking_changes.html' %}{% endblock %}
@@ -85,12 +90,6 @@
 
     <div class="flex-fill mw-0">
       {% block head_warn_alert_siteurl_undefined %}{% include '../widget/alert_siteurl_undefined.html' %}{% endblock %}
-
-      {# Search #}
-      {% if isSearchServiceConfigured() %}
-        <div id="grw-search-top" class="search-top" role="search"></div>
-      {% endif %}
-
       {% block layout_main %}{% endblock %}
     </div>
   </div>