Merge pull request #1974 from weseek/feat/switch-sidebar-content

Feat/switch sidebar content

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

@@ -25,9 +25,6 @@ const GrowiSubNavigation = (props) => {
   const isPageNotFound = pageId == null;
   const isPageInTrash = isTrashPage(path);
 
-  console.log({
-    isPageForbidden, isPageNotFound, isPageInTrash, pageId, path,
-  });
   // Display only the RevisionPath
   if (isPageNotFound || isPageForbidden || isPageInTrash) {
     return (

src/client/js/components/Sidebar.jsx

@@ -15,7 +15,6 @@ import Drawer from '@atlaskit/drawer';
 import { createSubscribedElement } from './UnstatedUtils';
 import AppContainer from '../services/AppContainer';
 
-import GrowiLogo from './GrowiLogo';
 import SidebarNav from './Sidebar/SidebarNav';
 import History from './Sidebar/History';
 import CustomSidebar from './Sidebar/CustomSidebar';
@@ -56,9 +55,6 @@ class Sidebar extends React.Component {
 
   renderGlobalNavigation = () => (
     <>
-      <div className="grw-logo">
-        <a href="/"><GrowiLogo /></a>
-      </div>
       <SidebarNav currentContentsId={this.state.currentContentsId} onItemSelected={this.itemSelectedHandler} />
       <Drawer onClose={this.closeDrawer} isOpen={this.state.isDrawerOpen} width="wide">
         <code>Drawer contents</code>
@@ -99,6 +95,7 @@ class Sidebar extends React.Component {
           // experimental_fullWidthFlyout
           shouldHideGlobalNavShadow
           showContextualNavigation
+          topOffset={50}
         >
         </LayoutManager>
       </ThemeProvider>

src/client/js/components/Sidebar/SidebarNav.jsx

@@ -5,6 +5,7 @@ import { withTranslation } from 'react-i18next';
 
 import {
   GlobalNav,
+  GlobalItem,
 } from '@atlaskit/navigation-next';
 
 import { createSubscribedElement } from '../UnstatedUtils';
@@ -29,12 +30,20 @@ class SidebarNav extends React.Component {
   }
 
   generateSidebarItemObj(id, label, icon) {
+    const isSelected = this.props.currentContentsId === id;
+
     return {
       id,
-      icon,
-      label,
-      isSelected: this.props.currentContentsId === id,
-      onClick: () => this.itemSelectedHandler(id),
+      component: ({ className }) => (
+        <div className={`${className} grw-global-item-container ${isSelected ? 'active' : ''}`}>
+          <GlobalItem
+            icon={icon}
+            label={label}
+            isSelected={isSelected}
+            onClick={() => this.itemSelectedHandler(id)}
+          />
+        </div>
+      ),
     };
   }
 

src/client/js/services/PageContainer.js

@@ -6,9 +6,9 @@ import * as entities from 'entities';
 import * as toastr from 'toastr';
 
 const logger = loggerFactory('growi:services:PageContainer');
-const scrollThresForSticky = 50;
-const scrollThresForCompact = 100;
-const scrollThresForThrottling = 200;
+const scrollThresForSticky = 0;
+const scrollThresForCompact = 30;
+const scrollThresForThrottling = 100;
 
 /**
  * Service container related to Page

src/client/styles/scss/_admin.scss

@@ -1,5 +1,5 @@
 .admin-page {
-  .grw-header.sticky-top {
+  header.grw-header {
     height: unset;
   }
 

src/client/styles/scss/_layout.scss

@@ -1,5 +1,24 @@
 @import 'layout_variable';
 
+%fukidashi-for-active {
+  position: relative;
+
+  // speech balloon
+  &:after {
+    position: absolute;
+    top: 0.5em;
+    right: -1em;
+    display: block;
+    width: 0;
+    content: '';
+    border: 1em solid transparent;
+    border-left-width: 0;
+
+    // @include media-breakpoint-down(xs) {
+    // }
+  }
+}
+
 // FIXME: replace with mt-2 or mt-3
 .grw-mt-10px {
   margin-top: 10px !important;
@@ -32,8 +51,32 @@
 
 .grw-sidebar {
   .ak-navigation-resize-button {
-    top: 110px;
+    top: calc(50vh - 20px);
   }
+
+  // override @atlaskit/navigation-next styles
+  div[class$='-NavigationContainer'] {
+    // Adjust to be on top of the growi subnavigation
+    z-index: $zindex-sticky + 5;
+  }
+
+  // override @atlaskit/navigation-next styles
+  div[class$='-Outer'] {
+    div[class$='-Shadow'] {
+      background: unset;
+      border-right: 1px solid $border;
+    }
+  }
+
+  .grw-global-item-container.active {
+    button {
+      @extend %fukidashi-for-active;
+    }
+  }
+}
+
+#page-wrapper {
+  margin-top: $grw-navbar-height;
 }
 
 .grw-sidebar-header-container {

src/client/styles/scss/_layout_variable.scss

@@ -1,30 +1,8 @@
 /* color variables */
 
-/* green */
-$grw-base-green: rgb(7, 146, 72);
-$grw-mos-green: rgb(5, 70, 35);
-$grw-light-green: rgb(204, 238, 220);
-$grw-white-green: #f8fffb;
-$grw-sea-green: seagreen;
-
-.bg-grw-green {
-  background: $grw-base-green;
-}
-
-.bg-grw-mos-green {
-  background: $grw-mos-green;
-}
-
-.bg-grw-light-green {
-  background: $grw-light-green;
-}
-
 /* blue */
 $grw-alice-blue: aliceblue;
 
 /* gray */
 $grw-line-gray: #dee2e6;
 $grw-line-light-gray: #ddd;
-
-/* white */
-$grw-floral-white: floralwhite;

src/client/styles/scss/_me.scss

@@ -1,5 +1,5 @@
 .user-settings-page {
-  .grw-header.sticky-top {
+  header.grw-header {
     height: unset;
   }
 }

src/client/styles/scss/_subnav.scss

@@ -1,6 +1,6 @@
 $easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);
 
-@mixin setTransitionForCompactMode() {
+%transitionForCompactMode {
   // set transition-duration (normal -> compact)
   transition: all 300ms $easeInOutCubic;
 }
@@ -8,9 +8,12 @@ $easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);
 /*
  * layout for sticky
  */
-.grw-header.sticky-top {
+header.grw-header {
+  top: $grw-navbar-height;
+
   // Adjust to be on top of the growi subnavigation
-  z-index: $zindex-sticky - 100;
+  z-index: $zindex-sticky;
+
   height: 80px;
   pointer-events: none; // disable pointer events for sticky
 
@@ -25,11 +28,11 @@ $easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);
  */
 .grw-subnavbar {
   &.grw-subnavbar-compact {
-    @include setTransitionForCompactMode();
+    @extend %transitionForCompactMode;
 
     h1 {
       @include variable-font-size(18px);
-      @include setTransitionForCompactMode();
+      @extend %transitionForCompactMode;
     }
   }
 }

src/client/styles/scss/_tag.scss

@@ -1,5 +1,5 @@
 .tags-page {
-  .grw-header.sticky-top {
+  header.grw-header {
     height: unset;
   }
 

src/client/styles/scss/_user.scss

@@ -1,6 +1,6 @@
 $easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);
 
-@mixin setTransitionForCompactMode() {
+%transitionForCompactMode {
   // set transition-duration (normal -> compact)
   transition: all 300ms $easeInOutCubic;
 }
@@ -18,24 +18,24 @@ $easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);
       margin-bottom: 0;
       font-size: 14px;
 
-      @include setTransitionForCompactMode();
+      @extend %transitionForCompactMode;
     }
     .picture {
       width: 62px;
       height: 62px;
 
-      @include setTransitionForCompactMode();
+      @extend %transitionForCompactMode;
     }
     h1 {
       font-size: 1.5em;
       line-height: 30px;
 
-      @include setTransitionForCompactMode();
+      @extend %transitionForCompactMode;
     }
     .users-meta {
       margin-left: 15px;
 
-      @include setTransitionForCompactMode();
+      @extend %transitionForCompactMode;
     }
   }
 }

src/client/styles/scss/_variables.scss

@@ -6,8 +6,8 @@ $font-family-monospace-not-strictly: Monaco, Menlo, Consolas, 'Courier New', Mei
 
 //== Layout
 $grw-navbar-height: 50px;
-$grw-logo-width: 60px;
-$grw-logomark-width: 32px;
+$grw-logo-width: 64px;
+$grw-logomark-width: 40px;
 
 // fix tab width to 95 pixels
 // see also '_on-edit.scss'

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

@@ -56,6 +56,8 @@ $link-hover-color: $color-link-hover;
 //
 
 .grw-logo {
+  background-color: darken($bgcolor-navbar, 10%);
+
   // set transition for fill
   svg * {
     transition: fill 0.8s ease-out;
@@ -86,8 +88,11 @@ $link-hover-color: $color-link-hover;
 }
 
 .grw-sidebar {
-  .grw-logo {
-    background-color: darken($bgcolor-navbar, 10%);
+  .grw-global-item-container.active {
+    button:after {
+      // fukidashi color
+      border-right-color: darken($bgcolor-global, 4%);
+    }
   }
 }
 

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

@@ -9,7 +9,7 @@
 {% block layout_main %}
 
 {% block content_header_wrapper %}
-<header class="sticky-top py-0 grw-header">
+<header class="py-0 position-sticky grw-header">
   {% block content_header %}
   {% endblock %}
 </header>

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

@@ -6,7 +6,7 @@
 {% endblock %}
 
 {% block content_header_wrapper %}
-  <header class="sticky-top py-0 grw-header grw-header-user-page">
+  <header class="py-0 position-sticky grw-header grw-header-user-page">
     {% if pageUser %}
       <div id="grw-subnav-for-user-page" class="grw-subnav" data-page-user="{{ pageUser|json }}"></div>
     {% else %}

src/server/views/layout/layout.html

@@ -71,70 +71,74 @@
   data-userlang="{% if user %}{{ user.lang }}{% endif %}"
  >
 
-<div id="wrapper" class="d-flex">
-
-  {# Sidebar #}
-  <nav>
-    <div id="grw-sidebar" class="grw-sidebar"></div>
-  </nav>
-
-  <div class="flex-grow-1">
-
-    {% block layout_head_nav %}
-    <nav class="navbar grw-navbar navbar-expand-sm navbar-dark mb-0 p-0">
-      {# Navbar Left #}
-      <ul class="navbar-nav mr-auto pl-4">
-        <li>
-          {% if isSearchServiceConfigured() %}
-          <div class="navbar-form navbar-left search-top" role="search" id="search-top"></div>
-          {% endif %}
-        </li>
-      </ul>
-
-      {# Navbar Right #}
-      <ul class="navbar-nav">
-        {% if user and user.admin %}
-        <li class="nav-item">
-          <a class="nav-link" href="/admin">
-            <i class="icon-settings mr-2"></i>
-            <span class="d-none d-md-inline-block">{{ t('Admin') }}</span>
-          </a>
-        </li>
-        {% endif %}
+<div id="wrapper">
+
+  {% block layout_head_nav %}
+  <nav class="navbar grw-navbar navbar-expand-sm navbar-dark fixed-top mb-0 p-0">
+    {# Brand Logo #}
+    <div class="navbar-brand">
+      <a class="grw-logo d-block" href="/">
+        {% include '../widget/logo.html' %}
+      </a>
+    </div>
 
-        {% if user %}
-        <li class="nav-item">
-          <a class="nav-link create-page" href="#" data-target="#create-page" data-toggle="modal">
-            <i class="icon-pencil mr-2"></i>
-            <span class="d-none d-md-inline-block">{{ t('New') }}</span>
-          </a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="https://docs.growi.org/" target="_blank">
-            <i class="icon-question mr-2"></i><span class="d-none d-md-inline-block mr-2">{{ t('Help') }}</span><span class="text-muted small"><i class="icon-share-alt"></i></span>
-          </a>
-        </li>
-        <li id="personal-dropdown" class="nav-item dropdown dropdown-toggle"></li>
-        {% else %}
-        <li id="login-user" class="nav-item"><a class="nav-link" href="/login">Login</a></li>
+    {# Navbar Left #}
+    <ul class="navbar-nav ml-auto mr-auto">
+      <li>
+        {% if isSearchServiceConfigured() %}
+        <div class="navbar-form navbar-left search-top" role="search" id="search-top"></div>
         {% endif %}
-        {% if getConfig('crowi', 'app:confidential') %}
-        <li class="nav-item confidential text-light">{{ getConfig('crowi', 'app:confidential') }}</li>
-        {% endif %}
-      </ul>
+      </li>
+    </ul>
+
+    {# Navbar Right #}
+    <ul class="navbar-nav">
+      {% if user and user.admin %}
+      <li class="nav-item">
+        <a class="nav-link" href="/admin">
+          <i class="icon-settings mr-2"></i>
+          <span class="d-none d-md-inline-block">{{ t('Admin') }}</span>
+        </a>
+      </li>
+      {% endif %}
+
+      {% if user %}
+      <li class="nav-item">
+        <a class="nav-link create-page" href="#" data-target="#create-page" data-toggle="modal">
+          <i class="icon-pencil mr-2"></i>
+          <span class="d-none d-md-inline-block">{{ t('New') }}</span>
+        </a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="https://docs.growi.org/" target="_blank">
+          <i class="icon-question mr-2"></i><span class="d-none d-md-inline-block mr-2">{{ t('Help') }}</span><span class="text-muted small"><i class="icon-share-alt"></i></span>
+        </a>
+      </li>
+      <li id="personal-dropdown" class="nav-item dropdown dropdown-toggle"></li>
+      {% else %}
+      <li id="login-user" class="nav-item"><a class="nav-link" href="/login">Login</a></li>
+      {% endif %}
+      {% if getConfig('crowi', 'app:confidential') %}
+      <li class="nav-item confidential text-light">{{ getConfig('crowi', 'app:confidential') }}</li>
+      {% endif %}
+    </ul>
 
-    </nav>
-    {% include '../modal/create_page.html' %}
-    {% endblock  %} {# layout_head_nav #}
+  </nav>
+  {% include '../modal/create_page.html' %}
+  {% endblock  %} {# layout_head_nav #}
 
-    {% block head_warn_alert_siteurl_undefined %}{% include '../widget/alert_siteurl_undefined.html' %}{% endblock %}
-    {% block head_warn_breaking_changes %}{% include '../widget/alert_breaking_changes.html' %}{% endblock %}
+  {% block head_warn_alert_siteurl_undefined %}{% include '../widget/alert_siteurl_undefined.html' %}{% endblock %}
+  {% block head_warn_breaking_changes %}{% include '../widget/alert_breaking_changes.html' %}{% endblock %}
 
-    <div id="page-wrapper">
+  <div class="d-flex">
+    {# Sidebar #}
+    <nav>
+      <div id="grw-sidebar" class="grw-sidebar"></div>
+    </nav>
+    <div id="page-wrapper" class="flex-grow-1">
       {% block layout_main %}
       {% endblock %} {# layout_main #}
     </div>
-
   </div>
 
 </div><!-- /#wrapper -->

src/server/views/tags.html

@@ -5,7 +5,7 @@
 {% block html_base_css %}tags-page{% endblock %}
 
 {% block layout_main %}
-<header class="sticky-top py-0 grw-header">
+<header class="py-0 position-sticky grw-header">
   <h1 class="title">{{ t('Tags') }}</h1>
 </header>