add GrowiSubNavigationFixed

src/client/js/app.jsx

@@ -38,6 +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 GrowiSubNavigationForUserPage from './components/Navbar/GrowiSubNavigationForUserPage';
 import PersonalContainer from './services/PersonalContainer';
 
@@ -104,6 +105,7 @@ if (pageContainer.state.path != null) {
     // eslint-disable-next-line quote-props
     'page': <Page />,
     'grw-subnav': <GrowiSubNavigation />,
+    'grw-subnav-fixed': <GrowiSubNavigationFixed />,
     'grw-subnav-for-user-page': <GrowiSubNavigationForUserPage />,
   });
 }

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

@@ -0,0 +1,46 @@
+import React, { useState, useEffect, useCallback } from 'react';
+// import PropTypes from 'prop-types';
+import loggerFactory from '@alias/logger';
+
+import StickyEvents from 'sticky-events';
+
+import GrowiSubNavigation from './GrowiSubNavigation';
+
+const logger = loggerFactory('growi:cli:GrowiSubNavigationSticky');
+
+
+const GrowiSubNavigationFixed = (props) => {
+
+  const [isVisible, setVisible] = useState(false);
+
+  const stickyChangeHandler = useCallback((event) => {
+    logger.debug('StickyEvents.CHANGE detected');
+    setVisible(event.detail.isSticky);
+  }, []);
+
+  // setup effect by sticky event
+  useEffect(() => {
+    // sticky
+    // See: https://github.com/ryanwalters/sticky-events
+    const stickyEvents = new StickyEvents({ stickySelector: '#grw-subnav-sticky-trigger' });
+    const { stickySelector } = stickyEvents;
+    const elem = document.querySelector(stickySelector);
+    elem.addEventListener(StickyEvents.CHANGE, stickyChangeHandler);
+
+    // return clean up handler
+    return () => {
+      elem.removeEventListener(StickyEvents.CHANGE, stickyChangeHandler);
+    };
+  }, []);
+
+  return (
+    <div className={`${isVisible ? '' : 'd-none'}`}>
+      <GrowiSubNavigation isCompactMode />
+    </div>
+  );
+};
+
+GrowiSubNavigationFixed.propTypes = {
+};
+
+export default GrowiSubNavigationFixed;

src/client/styles/scss/_subnav.scss

@@ -5,9 +5,17 @@ $easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);
   transition: all 300ms $easeInOutCubic;
 }
 
-/*
- * Styles
- */
+.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;

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

@@ -12,8 +12,10 @@
 <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>
   {% endblock %}
 </header>
+<div id="grw-subnav-sticky-trigger" class="sticky-top"></div>
 {% endblock %}
 
 <div id="main" class="main container-fluid {% if page %}{{ css.grant(page) }}{% endif %} {% block main_css_class %}{% endblock %}">