Slim sidebar visual design issues (#8404)

- Visual design – Collapsed sidebar is wider than intended
- Visual design – Change “Edit your account” to “Account” tooltip
- Visual design – Slim side bar on bird hover, make the bird a little big bigger (don’t make it shrink as much)
- Visual design – Change the tooltip to the darker indigo (discussed with ben and this is no longer necessary)
- Visual design – Expand the space between the menu items (add 3px padding) - then adjust the flyout menu items spacing too
- Visual design – Get the labels and icons to align vertically (space between icon and label)
- Visual design – Make the width 60px
- Visual design – Make the arrows slightly smaller and closer to the icons on slim view
- Visual design – Move the bird higher up and slightly smaller, as per the designs
- Animations – I wonder if the new |-> icon should flip horizontally rather than roll? (or maybe not animate at all?) The rolling animation feels a little strange as I think the pipe is meant to represent the always vertical menu
- Animations – The Bird seems to have two hover states (try slowly moving your mouse cursor from top to bottom and you'll see it's wing appears before the hover animation is triggered). Not sure if this is intended behaviour.
- UX – Unexpected behavior with the search – clicking the "Search" icon submits a search, while all other icons in the sidebar are safe to click (This will expand the menu in slim mode and only have pointer events to submit in expanded mode which should be acceptable as its the submit button for the field?)

Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>

client/scss/settings/_variables.scss

@@ -148,7 +148,7 @@ $font-wagtail-icons: wagtail;
 // misc sizing
 $thumbnail-width: 130px;
 $menu-width: 200px;
-$menu-width-slim: 65px;
+$menu-width-slim: 60px;
 
 $menu-width-max: 320px;
 

client/src/components/PageExplorer/PageExplorer.scss

@@ -41,7 +41,7 @@ $menu-footer-height: 50px;
 $explorer-header-horizontal-padding: 10px;
 
 .c-page-explorer__header {
-  @apply w-bg-black/50 w-text-white/85;
+  @apply w-bg-primary-200 w-text-white/85 w-border-b w-border-primary;
   display: grid;
   grid-template-columns: 1fr auto;
   align-items: center;
@@ -55,15 +55,12 @@ $explorer-header-horizontal-padding: 10px;
 }
 
 .c-page-explorer__header__title {
+  @apply hover:w-bg-primary hover:w-text-white focus:w-bg-primary focus:w-text-white;
   color: inherit;
-
-  &:focus,
-  &:hover {
-    @apply w-bg-black/50 w-text-white;
-  }
 }
 
 .c-page-explorer__header__title__inner {
+  @apply w-flex;
   padding: 1em $explorer-header-horizontal-padding;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -76,7 +73,7 @@ $explorer-header-horizontal-padding: 10px;
   }
 
   .icon--explorer-header {
-    @apply w-text-white/85;
+    @apply w-text-white/85 w-mr-2;
     width: 1.25em;
     height: 1.25em;
     margin-inline-end: 0.25rem;
@@ -95,7 +92,6 @@ $explorer-header-horizontal-padding: 10px;
 
   > select {
     padding: 5px 30px 5px 10px;
-    border-radius: 0;
     border-color: #4c4e4d;
     font-size: 0.875rem;
 
@@ -116,15 +112,16 @@ $explorer-header-horizontal-padding: 10px;
 
   // Add select arrow back on browsers where native ui has been removed
   &-icon {
+    @apply w-text-primary;
     position: absolute;
     // Remove once we drop support for Safari 13.
     // stylelint-disable-next-line property-disallowed-list
     right: 1rem;
     inset-inline-end: 1rem;
-    top: 1rem;
+    top: 0.85rem;
     width: 1.25rem;
     height: 1.25rem;
-    color: $color-grey-3;
+    pointer-events: none;
 
     .ie & {
       display: none;

client/src/components/PageExplorer/PageExplorerItem.scss

@@ -1,21 +1,11 @@
 .c-page-explorer__item {
-  @apply w-flex w-flex-row w-flex-nowrap w-border-0 w-border-b w-border-solid w-border-black/50 w-divide-x w-divide-solid w-divide-black/50 w-divide-y-0;
+  @apply w-flex w-flex-row w-flex-nowrap w-border-0 w-border-b w-border-solid w-border-primary w-divide-x w-divide-solid w-divide-primary w-divide-y-0;
 }
 
 .c-page-explorer__item__link {
-  @apply w-inline-flex w-items-start sm:w-items-center w-flex-wrap w-grow w-cursor-pointer w-gap-1 w-transition;
+  @apply w-inline-flex w-items-start sm:w-items-center w-flex-wrap w-grow w-cursor-pointer w-gap-1 w-transition hover:w-bg-primary focus:w-bg-primary focus:w-text-white hover:w-text-white;
   padding: 1.45em 1em;
 
-  &:focus,
-  &:hover {
-    background: $c-page-explorer-bg-active;
-    color: $color-white;
-  }
-
-  @include hover {
-    background: $c-page-explorer-bg-active;
-  }
-
   @include media-breakpoint-up(sm) {
     padding: 1.45em 1.75em;
   }
@@ -35,7 +25,7 @@
 }
 
 .c-page-explorer__item__action {
-  @apply w-text-white/85 w-transition;
+  @apply w-text-white/85 w-transition hover:w-bg-primary hover:w-text-white focus:w-bg-primary focus:w-text-white;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -46,12 +36,6 @@
   font-size: 2em;
   cursor: pointer;
 
-  &:focus,
-  &:hover {
-    background: $c-page-explorer-bg-active;
-    color: $color-white;
-  }
-
   .icon::before {
     margin-inline-end: 0;
   }

client/src/components/Sidebar/Sidebar.scss

@@ -61,6 +61,12 @@
     border-inline-end: 1px solid transparent;
   }
 
+  .icon--menuitem {
+    width: 1rem;
+    height: 1rem;
+    min-width: 1rem;
+  }
+
   &--slim {
     width: $menu-width-slim;
   }
@@ -87,14 +93,6 @@
   &--mobile &__collapse-toggle {
     display: none;
   }
-
-  .icon--menuitem {
-    width: 1.25em;
-    height: 1.25em;
-    min-width: 1.25em;
-    margin-inline-end: 0.5em;
-    vertical-align: text-top;
-  }
 }
 
 // This is a separate component as it needs to display in the header

client/src/components/Sidebar/Sidebar.tsx

@@ -189,9 +189,7 @@ export const Sidebar: React.FunctionComponent<SidebarProps> = ({
             >
               <Icon
                 name="expand-right"
-                className={`w-transition motion-reduce:w-transition-none
-                ${!collapsed ? '-w-rotate-180' : ''}
-                `}
+                className={!collapsed ? '-w-rotate-180' : ''}
               />
             </button>
           </div>

client/src/components/Sidebar/__snapshots__/Sidebar.test.js.snap

@@ -29,9 +29,7 @@ exports[`Sidebar should render with the minimum required props 1`] = `
           type="button"
         >
           <Icon
-            className="w-transition motion-reduce:w-transition-none
-                -w-rotate-180
-                "
+            className="-w-rotate-180"
             name="expand-right"
           />
         </button>

client/src/components/Sidebar/menu/MenuItem.scss

@@ -5,24 +5,28 @@
   position: relative;
 
   &__link {
-    @apply w-text-14;
+    @apply w-text-14 w-leading-none;
     @include transition(
       border-color $menu-transition-duration ease,
       background-color $menu-transition-duration ease
     );
     position: relative;
-    display: block;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
     width: 100%;
     box-sizing: border-box;
     white-space: nowrap;
     border-inline-start: 3px solid transparent;
+    border-inline-end: 3px solid transparent;
     -webkit-font-smoothing: auto;
     border: 0;
     background: transparent;
     text-align: start;
     color: $color-menu-text;
-    padding: 11px 20px;
+    padding: 13px 20px;
     font-weight: 400;
+    overflow: hidden;
 
     // Note, font-weights lower than normal,
     // and font-size smaller than 1em (80% ~= 12.8px),
@@ -35,9 +39,12 @@
     }
 
     &:before {
+      width: 1rem;
+      height: 1rem;
       font-size: 1rem;
-      vertical-align: -15%;
-      margin-inline-end: 0.5em;
+      display: flex;
+      align-items: center;
+      margin-inline-end: 0;
     }
 
     // only really used for spinners and settings menu
@@ -50,23 +57,18 @@
       right: 0.5em;
       inset-inline-end: 0.5em;
       top: 0.5em;
-      margin-top: 0;
-    }
-
-    // Disable icon margin, this is instead applied to the left of the .menuitem-label
-    // This is because SVG icons and legacy icons apply this margin differently,
-    // we could remove this override when we remove legacy icons
-    .icon {
-      margin-inline-end: 0 !important;
     }
   }
 
   &--in-sub-menu {
     @apply hover:w-bg-primary;
 
-    #{$root}__link {
+    #{$root}__link,
+    .menuitem-label {
+      @apply w-leading-tight;
       // Links inside a submenu should have normal wrapping
       white-space: normal;
+      align-items: flex-start;
     }
   }
 
@@ -83,19 +85,38 @@
 
 .menuitem-label {
   @include transition(opacity $menu-transition-duration ease);
-  margin-inline-start: 0.5em;
+  margin-inline-start: 1rem;
+  line-height: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 }
 
 .sidebar--slim {
   .sidebar-menu-item {
     .menuitem-label {
-      opacity: 0;
+      @apply w-sr-only;
+    }
+  }
+
+  .sidebar-menu-item__link {
+    margin-inline-start: auto;
+    display: inline-flex;
+
+    .sidebar-sub-menu-trigger-icon {
+      margin-inline-start: 0;
     }
   }
 
   .sidebar-menu-item--in-sub-menu {
     .menuitem-label {
-      opacity: 1;
+      @apply w-not-sr-only;
+      margin-inline-start: 1rem;
+    }
+
+    .sidebar-menu-item__link {
+      justify-content: flex-start;
+      padding: 20px;
     }
   }
 }

client/src/components/Sidebar/menu/SubMenuItem.scss

@@ -1,16 +1,12 @@
 .sidebar-sub-menu-trigger-icon {
   $root: &;
   display: block;
-  width: 20px;
-  height: 20px;
-  position: absolute;
+  width: 1.25rem;
+  height: 1rem;
   // Remove once we drop support for Safari 13.
   // stylelint-disable-next-line property-disallowed-list
-  right: 15px;
   inset-inline-end: 15px;
-  top: 0;
-  bottom: 0;
-  margin: auto 0;
+  margin-inline-start: auto;
 
   @include transition(
     transform $menu-transition-duration ease,
@@ -24,13 +20,13 @@
   }
 
   .sidebar--slim & {
-    width: 16px;
-    height: 16px;
-    transform: translate3d(13px, 0, 0);
-  }
-
-  .sidebar--slim &--open {
-    transform: translate3d(13px, 0, 0) rotate(180deg);
+    width: 1rem;
+    height: 1rem;
+    position: absolute;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
+    right: 0;
+    inset-inline-end: 0;
   }
 }
 
@@ -44,8 +40,8 @@
   }
 
   > h2 {
-    // w-min-h-[160px] and w-mt-[35px] classes are to vertically align the title and icon combination to the search input on the left
-    @apply w-min-h-[160px] w-mt-[45px] w-px-4 w-box-border w-text-center w-text-white w-mb-0 w-inline-flex w-flex-col w-justify-center w-items-center;
+    // w-min-h-[160px] is to vertically align the title and icon combination to the search input on the left
+    @apply w-min-h-[220px] w-mt-0 w-px-4 w-box-border w-text-center w-text-white w-mb-0 w-inline-flex w-flex-col w-justify-center w-items-center;
 
     &:before {
       font-size: 4em;
@@ -57,7 +53,7 @@
     }
 
     @at-root .sidebar--slim & {
-      @apply w-mt-3;
+      @apply w-min-h-[150px];
     }
   }
 

client/src/components/Sidebar/modules/MainMenu.tsx

@@ -219,11 +219,7 @@ export const Menu: React.FunctionComponent<MenuProps> = ({
           (isVisible ? ' sidebar-footer--visible' : '')
         }
       >
-        <Tippy
-          disabled={!slim}
-          content={gettext('Edit your account')}
-          placement="right"
-        >
+        <Tippy disabled={!slim} content={gettext('Account')} placement="right">
           <button
             className="
             sidebar-footer__account

client/src/components/Sidebar/modules/Search.tsx

@@ -97,7 +97,8 @@ export const SearchInput: React.FunctionComponent<SearchInputProps> = ({
         <input
           className={`
             ${slim || !isVisible ? 'w-hidden' : ''}
-            !w-pl-[45px]
+            !w-pl-[55px]
+            !w-py-[13px]
             !w-subpixel-antialiased
             !w-absolute
             !w-left-0
@@ -109,6 +110,7 @@ export const SearchInput: React.FunctionComponent<SearchInputProps> = ({
             !w-rounded-none
             !w-text-white/80
             !w-outline-offset-inside
+            !w-leading-none
             placeholder:!w-text-white/80`}
           type="text"
           id="menu-search-q"

client/src/components/Sidebar/modules/WagtailBranding.scss

@@ -1,4 +1,5 @@
 // stylelint-disable declaration-no-important
+$logo-size: 110px;
 
 // Wagging animation
 @keyframes tail-wag {
@@ -18,10 +19,10 @@
   align-items: center;
   color: #aaa;
   -webkit-font-smoothing: auto;
-  margin: 4em auto 1.8em;
+  margin: 4rem auto;
   text-align: center;
-  width: 100px;
-  height: 100px;
+  width: $logo-size;
+  height: $logo-size;
   transition: transform 150ms cubic-bezier(0.28, 0.15, 0, 2.1),
     width $menu-transition-duration ease, height $menu-transition-duration ease,
     padding-top $menu-transition-duration ease;
@@ -29,12 +30,13 @@
   border-radius: 100%;
 
   @include media-breakpoint-up(sm) {
-    margin: 1.8em auto 2.5em;
+    margin: 0 auto 4rem;
   }
 
   // Reduce overall size when in slim mode
   .sidebar--slim & {
     @include show-focus-outline-inside();
+    margin: 1.125em auto 2.5em;
     width: 60px;
     height: 60px;
   }
@@ -70,8 +72,8 @@
   &__icon-wrapper {
     @apply w-bg-white/15 w-relative w-overflow-hidden hover:w-overflow-visible;
     margin: auto;
-    width: 100px;
-    height: 100px;
+    width: $logo-size;
+    height: $logo-size;
     border-radius: 50%;
 
     .sidebar--slim & {

client/src/components/Sidebar/modules/WagtailLogo.tsx

@@ -14,19 +14,20 @@ const WagtailLogo = ({ className, slim }: WagtailLogoProps) => {
       className={`
          sidebar-wagtail-branding__icon
          !w-overflow-visible
+         w-pr-6
          w-group
          w-text-primary
          w-z-10
          w-absolute
          w-transition-all
          w-duration-150
-         hover:w-scale-75
-         hover:w-rotate-6
+         hover:w-scale-[0.85]
+         hover:w-rotate-[5deg]
          ${className || ''}
          ${
            slim
-             ? 'w-w-[42px] w-h-[51px] w-top-2.5 w-left-[-9px] hover:-w-translate-y-1.5 hover:w-translate-x-1'
-             : 'w-w-[100px] w-h-[125px] w-top-[25px] -w-left-5 hover:w-translate-x-2.5 hover:-w-translate-y-5'
+             ? 'w-w-[58px] w-h-[57px] w-top-2 w-left-[-18px] hover:-w-translate-y-1'
+             : 'w-w-[120px] w-h-[200px] -w-top-1 -w-left-7 hover:w-translate-x-2 hover:-w-translate-y-3'
          }
       `}
       width="430"

client/src/components/Sidebar/modules/__snapshots__/MainMenu.test.js.snap

@@ -14,7 +14,7 @@ exports[`Menu should render with the minimum required props 1`] = `
     className="sidebar-footer sidebar-footer--visible"
   >
     <ForwardRef(TippyWrapper)
-      content="Edit your account"
+      content="Account"
       disabled={true}
       placement="right"
     >