adjust Sidebar layout/color

src/client/js/components/Sidebar.jsx

@@ -62,7 +62,7 @@ class Sidebar extends React.Component {
             <Separator />
             <GroupHeading>Shortcuts</GroupHeading>
             <Item before={ShortcutIcon} text="Project space" />
-            <Item before={ShortcutIcon} text="Project repo" />
+            <Item before={ShortcutIcon} text="Looooooooooooooooooooooooooooooong Menu" />
           </div>
         ) }
       </MenuSection>
@@ -76,7 +76,7 @@ class Sidebar extends React.Component {
           ...theme,
           context: 'product',
           mode: modeGenerator({
-            product: { text: '#ffffff', background: '#202b35' },
+            product: { text: '#ffffff', background: '#334455' },
           }),
         })}
       >
@@ -87,7 +87,8 @@ class Sidebar extends React.Component {
             containerNavigation={this.renderSidebarContents}
             experimental_flyoutOnHover
             experimental_alternateFlyoutBehaviour
-            experimental_fullWidthFlyout
+            // experimental_fullWidthFlyout
+            shouldHideGlobalNavShadow
             showContextualNavigation
           >
           </LayoutManager>

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

@@ -3,9 +3,8 @@ import PropTypes from 'prop-types';
 
 import { withTranslation } from 'react-i18next';
 
-import AddIcon from '@atlaskit/icon/glyph/add';
-import SearchIcon from '@atlaskit/icon/glyph/search';
-import { JiraIcon } from '@atlaskit/logo';
+import EditIcon from '@atlaskit/icon/glyph/edit';
+import TrayIcon from '@atlaskit/icon/glyph/tray';
 
 import {
   GlobalNav,
@@ -15,6 +14,8 @@ import Drawer from '@atlaskit/drawer';
 import { createSubscribedElement } from '../UnstatedUtils';
 import AppContainer from '../../services/AppContainer';
 
+import GrowiLogo from '../GrowiLogo';
+
 class SidebarNav extends React.Component {
 
   propTypes = {
@@ -31,28 +32,23 @@ class SidebarNav extends React.Component {
   render() {
     const { isDrawerOpen } = this.state;
     return (
-      <div>
+      <>
+        <div className="grw-logo">
+          <GrowiLogo />
+        </div>
         <GlobalNav
           primaryItems={[
+            { id: 'create', icon: EditIcon, label: 'Create' },
             {
-              id: 'jira',
-              icon: () => <JiraIcon size="medium" label="Jira" />,
-              label: 'Jira',
-            },
-            {
-              id: 'search',
-              icon: SearchIcon,
-              label: 'Search',
-              onClick: this.openDrawer,
+              id: 'drawer', icon: TrayIcon, label: 'Drawer', onClick: this.openDrawer,
             },
-            { id: 'create', icon: AddIcon, label: 'Add' },
           ]}
           secondaryItems={[]}
         />
         <Drawer onClose={this.closeDrawer} isOpen={isDrawerOpen} width="wide">
           <code>Drawer contents</code>
         </Drawer>
-      </div>
+      </>
     );
   }
 

src/client/styles/scss/_layout.scss

@@ -10,13 +10,11 @@
   padding-top: 10px !important;
 }
 
-.logo {
-  .logo-mark {
-    svg {
-      width: $grw-logo-width;
-      height: $grw-navbar-height;
-      padding: ($grw-logo-width - $grw-logomark-width) / 2;
-    }
+.grw-logo {
+  svg {
+    width: $grw-logo-width;
+    height: $grw-navbar-height;
+    padding: ($grw-logo-width - $grw-logomark-width) / 2;
   }
   /*
   .logo-text {
@@ -32,6 +30,12 @@
   font-weight: bold;
 }
 
+.grw-sidebar {
+  .ak-navigation-resize-button {
+    top: 110px;
+  }
+}
+
 /*
   * header
   */

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

@@ -49,37 +49,38 @@ $link-hover-color: $color-link-hover;
 //== Apply to GROWI Elements
 //
 
-.logo {
+.grw-logo {
   // set transition for fill
   svg * {
     transition: fill 0.8s ease-out;
   }
 
-  .logo-mark {
-    svg {
-      fill: $fillcolor-logo-mark;
+  svg {
+    fill: $fillcolor-logo-mark;
+  }
 
-      &:hover {
-        .group1 {
-          fill: $growi-green;
-        }
+  &:hover {
+    svg {
+      .group1 {
+        fill: $growi-green;
+      }
 
-        .group2 {
-          fill: $growi-blue;
-        }
+      .group2 {
+        fill: $growi-blue;
       }
     }
   }
 }
 
 .grw-navbar {
-  background: $bgcolor-navbar;
+  // TODO: coloring
+  // background: $bgcolor-navbar;
+  // .nav-item > .nav-link {
+  //   color: white;
+  // }
+  background: darken($bgcolor-global, 8%);
   .nav-item > .nav-link {
-    color: white;
-  }
-
-  .logo {
-    background-color: darken($bgcolor-navbar, 10%);
+    color: #333;
   }
 }
 
@@ -87,6 +88,12 @@ $link-hover-color: $color-link-hover;
   background: darken($bgcolor-global, 2%);
 }
 
+.grw-sidebar {
+  .grw-logo {
+    background-color: darken($bgcolor-navbar, 10%);
+  }
+}
+
 /*
  * code color of inline-code
  */

src/server/views/layout/layout.html

@@ -75,31 +75,15 @@
 
   {# Sidebar #}
   <nav>
-    <div id="grw-sidebar"></div>
+    <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">
-      {# Brand Logo #}
-      <div class="navbar-brand">
-        <a class="logo d-block" href="/">
-          <div class="logo-mark d-inline-block">{% include '../widget/logo.html' %}</div>
-          {#
-          <span class="logo-text mx-2">
-            {% set appTitle = appService.getAppTitle() %}
-            {% set appTitleFontSize = getAppTitleFontSize(appTitle) %}
-            <text x="0" y="{{22+appTitleFontSize/2}}" font-size="{{appTitleFontSize}}">
-              {% block title %}{{ appTitle }}{% endblock %}
-            </text>
-          </span>
-          #}
-        </a>
-      </div>
-
       {# Navbar Left #}
-      <ul class="navbar-nav mr-auto">
+      <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>