Repository: inovex/scrumlr.io
Pull request #1979 (2022-07-16 12:32:18)

Navigation arrows with menu bars
Added navigation (scroll) arrows to menu bar. 

![localhost_3000_board_f40cbebf-c224-4612-ab02-3bf7669566ca (1)](https://user-images.githubusercontent.com/1539948/179354998-88038931-41d2-4f65-8351-5e92348c641b.png)
![localhost_3000_board_f40cbebf-c224-4612-ab02-3bf7669566ca](https://user-images.githubusercontent.com/1539948/179354999-4b95136d-3995-42fd-a727-4efa518da443.png)




Patch:
diff --git a/src/components/Board/Board.scss b/src/components/Board/Board.scss
index a8bbbd59..9ae8d202 100644
--- a/src/components/Board/Board.scss
+++ b/src/components/Board/Board.scss
@@ -61,74 +61,6 @@
   }
 }
 
-$board__navigation-button-dimension: 74px;
-$board__navigation-button-icon-dimension: 24px;
-
-.board__navigation {
-  position: fixed;
-  top: calc(50% - calc(#{$board__navigation-button-dimension} / 2));
-
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-
-  width: calc(#{$board__navigation-button-dimension} / 2);
-  height: $board__navigation-button-dimension;
-
-  background-color: var(--accent-color);
-  opacity: 0.5;
-  transition: opacity 0.15s ease-in-out;
-
-  border: none;
-
-  margin: 0;
-  padding: 0;
-
-  z-index: $board__navigation-button-z-index;
-
-  cursor: pointer;
-}
-
-.board__navigation:focus {
-  outline: none;
-}
-
-.board__navigation:hover {
-  opacity: 1;
-}
-
-.board__navigation-prev {
-  left: 0;
-
-  // border-radius enables half circle
-  border-radius: 0 74px 74px 0;
-}
-.board__navigation-next {
-  right: 0;
-
-  // border-radius enables half circle
-  border-radius: 74px 0 0 74px;
-}
-
-.board__navigation-arrow {
-  height: $board__navigation-button-icon-dimension;
-  width: $board__navigation-button-icon-dimension;
-  color: $color-white;
-}
-
-.board__navigation-arrow-prev {
-  align-self: flex-start;
-
-  // visually center svg by margin
-  margin-left: 3px;
-}
-.board__navigation-arrow-next {
-  align-self: flex-end;
-
-  // visually center svg by margin
-  margin-right: 3px;
-}
-
 @media screen and (max-width: $column__min-width+2*$board__side-panel-width) {
   .board {
     grid-template-columns:
diff --git a/src/components/Board/Board.tsx b/src/components/Board/Board.tsx
index e9ccbc6f..bc2870b4 100644
--- a/src/components/Board/Board.tsx
+++ b/src/components/Board/Board.tsx
@@ -1,8 +1,6 @@
 import React, {useEffect, useRef, useState} from "react";
 import {getColorClassName} from "constants/colors";
 import {ColumnProps} from "components/Column";
-import {ReactComponent as RightArrowIcon} from "assets/icon-arrow-next.svg";
-import {ReactComponent as LeftArrowIcon} from "assets/icon-arrow-previous.svg";
 import {MenuBars} from "components/MenuBars";
 import {BoardHeader} from "components/BoardHeader";
 import "./Board.scss";
@@ -71,8 +69,6 @@ export const BoardComponent = ({children, currentUserIsModerator, moderating}: B
         const firstVisibleColumnIndex = columnVisibilityStates.findIndex((value) => value);
         const lastVisibleColumnIndex = columnVisibilityStates.lastIndexOf(true);
 
-        document.getElementById("root")!.setAttribute("column-visibility", lastVisibleColumnIndex < columnsCount - 1 || firstVisibleColumnIndex > 0 ? "collapsed" : "visible");
-
         setColumnState({
           firstVisibleColumnIndex,
           lastVisibleColumnIndex,
@@ -123,7 +119,7 @@ export const BoardComponent = ({children, currentUserIsModerator, moderating}: B
       <div className="board--empty">
         <style>{`.board { --board__columns: ${columnsCount} }`}</style>
         <BoardHeader currentUserIsModerator={currentUserIsModerator} />
-        <MenuBars />
+        <MenuBars showPreviousColumn={false} showNextColumn={false} onPreviousColumn={() => {}} onNextColumn={() => {}} />
         <main className="board" ref={boardRef}>
           {/* Fixed color - can also be dynamic */}
           <div className={`board__spacer-left ${getColorClassName("backlog-blue")}`} />
@@ -152,29 +148,13 @@ export const BoardComponent = ({children, currentUserIsModerator, moderating}: B
       <style>{`.board { --board__columns: ${columnsCount} }`}</style>
 
       <BoardHeader currentUserIsModerator={currentUserIsModerator} />
-      <MenuBars />
-
-      {state.showPreviousButton && (
-        <button className={`board__navigation board__navigation-prev ${getColorClassName(columnColors[previousColumnIndex])}`} onClick={handlePreviousClick} aria-hidden>
-          <LeftArrowIcon className="board__navigation-arrow board__navigation-arrow-prev" />
-        </button>
-      )}
+      <MenuBars showPreviousColumn={state.showPreviousButton} showNextColumn={state.showNextButton} onPreviousColumn={handlePreviousClick} onNextColumn={handleNextClick} />
 
       <main className="board" ref={boardRef}>
         <div className={`board__spacer-left ${currentUserIsModerator && moderating ? "accent-color__goal-green" : getColorClassName(columnColors[0])}`} />
         {children}
         <div className={`board__spacer-right ${currentUserIsModerator && moderating ? "accent-color__goal-green" : getColorClassName(columnColors[columnColors.length - 1])}`} />
       </main>
-
-      {state.showNextButton && (
-        <button
-          className={`board__navigation board__navigation-next ${getColorClassName(columnColors[Math.min(nextColumnIndex, columnColors.length - 1)])}`}
-          onClick={handleNextClick}
-          aria-hidden
-        >
-          <RightArrowIcon className="board__navigation-arrow board__navigation-arrow-next" />
-        </button>
-      )}
     </>
   );
 };
diff --git a/src/components/MenuBars/MenuBars.scss b/src/components/MenuBars/MenuBars.scss
index 7d48d60c..15ef3e0f 100644
--- a/src/components/MenuBars/MenuBars.scss
+++ b/src/components/MenuBars/MenuBars.scss
@@ -12,6 +12,7 @@ $box-shadow: 0px 10px 20px #00000026;
   transform: translateX(-50%);
   bottom: $margin--small;
 }
+
 @media print {
   .menu-bars {
     display: none !important;
@@ -20,7 +21,7 @@ $box-shadow: 0px 10px 20px #00000026;
 
 .menu {
   z-index: $menu-z-index;
-  border-radius: calc($action-bar-width / 2);
+  border-radius: $action-bar-width / 2;
   background-color: $color-white;
   box-shadow: $box-shadow;
   padding-left: $padding--medium;
@@ -32,16 +33,25 @@ $box-shadow: 0px 10px 20px #00000026;
   position: absolute;
   bottom: 0;
 }
+
 .menu:first-child:last-child {
   position: static;
 }
 .user-menu {
-  transform: translateY(calc(-1 * $action-bar-width));
+  transform: translateY(-$action-bar-width);
 }
+
 .admin-menu {
   transform: translateY($action-bar-width);
 }
 
+.admin-menu.admin-menu--empty {
+  background: none !important;
+  box-shadow: none !important;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
 .menu__items {
   display: flex;
   align-items: center;
@@ -60,7 +70,7 @@ $box-shadow: 0px 10px 20px #00000026;
   border-radius: 100%;
   transition: background-color 0.25s ease-in-out, filter 0.08s ease-out;
   // 206px is the width of the horizontal action bar
-  margin-left: calc(206px + $margin--small);
+  margin-left: 206px + $margin--small;
   position: relative;
   cursor: pointer;
   display: none;
@@ -80,54 +90,51 @@ $box-shadow: 0px 10px 20px #00000026;
   transition: transform 400ms, opacity 400ms, visibility 400ms;
 }
 
-@include collapsedColumns(".menu-bars") {
-  &.menu-bars--user > .user-menu {
+@media #{$smartphone} {
+  .menu-bars.menu-bars--user > .user-menu {
     visibility: visible;
     opacity: 1;
     transform: translateY(0);
   }
-  &.menu-bars--user > .admin-menu {
+  .menu-bars.menu-bars--user > .admin-menu {
     visibility: hidden;
     opacity: 0;
     transform: translateY($action-bar-width);
   }
-  &.menu-bars--admin > .admin-menu {
+  .menu-bars.menu-bars--admin > .admin-menu {
     visibility: visible;
     opacity: 1;
     transform: translateY(0);
   }
-  &.menu-bars--admin > .user-menu {
+  .menu-bars.menu-bars--admin > .user-menu {
     visibility: hidden;
     opacity: 0;
-    transform: translateY(calc(-1 * $action-bar-width));
+    transform: translateY(-$action-bar-width);
   }
-  &.menu-bars--user > .menu-bars__switch > .switch__icon--add {
+  .menu-bars.menu-bars--user > .menu-bars__switch > .switch__icon--add {
     visibility: hidden;
     opacity: 0;
     transform: rotate(360deg);
   }
-  &.menu-bars--admin > .menu-bars__switch > .switch__icon--settings {
+  .menu-bars.menu-bars--admin > .menu-bars__switch > .switch__icon--settings {
     visibility: hidden;
     opacity: 0;
     transform: rotate(-360deg);
   }
-  .menu-bars__switch {
+  .menu-bars .menu-bars__switch {
     display: block;
   }
 }
 
-@include visibleColumns(".menu-bars") {
-  &.menu-bars {
+@media #{$tablet} {
+  .menu-bars.menu-bars {
     position: static;
     transform: none;
     left: auto;
     bottom: auto;
   }
-  .menu {
-    padding-top: $padding--medium;
-    padding-bottom: $padding--medium;
-    padding-left: 0;
-    padding-right: 0;
+  .menu-bars .menu {
+    padding: $padding--medium 0;
     width: $action-bar-width;
     height: auto;
     position: fixed;
@@ -137,13 +144,13 @@ $box-shadow: 0px 10px 20px #00000026;
     visibility: visible;
     opacity: 1;
   }
-  .user-menu {
+  .menu-bars .user-menu {
     left: 12px;
   }
-  .admin-menu {
+  .menu-bars .admin-menu {
     right: 12px;
   }
-  .menu__items {
+  .menu-bars .menu__items {
     flex-direction: column;
     height: auto;
   }
@@ -159,3 +166,83 @@ $box-shadow: 0px 10px 20px #00000026;
     color: $color-white;
   }
 }
+
+.menu-bars__navigation {
+  display: none;
+  position: absolute;
+  top: calc(100% + 22px);
+  left: 12px;
+  right: 12px;
+
+  width: 42px;
+  height: 42px;
+
+  background: white;
+  border: none;
+  border-radius: 100%;
+  outline: none;
+  box-shadow: $box-shadow;
+  color: $color-black;
+}
+
+.menu-bars__navigation.menu-bars__navigation--empty {
+  top: 0;
+}
+
+.menu-bars__navigation:enabled {
+  cursor: pointer;
+}
+
+.menu-bars__navigation:focus {
+  outline: 2px solid #00000050;
+}
+
+.menu-bars__navigation:enabled:hover {
+  border: 3px solid #d3daf0;
+}
+
+.menu-bars__navigation:disabled {
+  color: $color-light-gray;
+}
+
+[theme="dark"] {
+  .menu-bars__navigation {
+    background: $background-color-dark;
+    color: $color-white;
+  }
+
+  .menu-bars__navigation:focus {
+    outline: 2px solid #ffffff50;
+  }
+
+  .menu-bars__navigation:enabled:hover {
+    border: 3px solid #485064;
+  }
+
+  .menu-bars__navigation:disabled {
+    color: $color-dark-mode;
+  }
+}
+
+.menu-bars__navigation-icon {
+  height: 24px;
+  width: 24px;
+}
+
+@media #{$smartphone} {
+  .menu-bars__navigation {
+    display: none;
+  }
+}
+
+@media #{$tablet} {
+  .menu-bars__navigation.menu-bars__navigation--visible {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .menu:first-child:last-child {
+    position: fixed;
+  }
+}
diff --git a/src/components/MenuBars/MenuBars.tsx b/src/components/MenuBars/MenuBars.tsx
index 7d7ca0ea..a88c3dcd 100644
--- a/src/components/MenuBars/MenuBars.tsx
+++ b/src/components/MenuBars/MenuBars.tsx
@@ -16,9 +16,18 @@ import {ReactComponent as ToggleAddMenuIcon} from "assets/icon-toggle-add-menu.s
 import {TabIndex} from "constants/tabIndex";
 import {useTranslation} from "react-i18next";
 import {useDispatch} from "react-redux";
+import {ReactComponent as RightArrowIcon} from "assets/icon-arrow-next.svg";
+import {ReactComponent as LeftArrowIcon} from "assets/icon-arrow-previous.svg";
 import "./MenuBars.scss";
 
-export const MenuBars = () => {
+export interface MenuBarsProps {
+  showPreviousColumn: boolean;
+  showNextColumn: boolean;
+  onPreviousColumn: () => void;
+  onNextColumn: () => void;
+}
+
+export const MenuBars = ({showPreviousColumn, showNextColumn, onPreviousColumn, onNextColumn}: MenuBarsProps) => {
   const {t} = useTranslation();
   const dispatch = useDispatch();
   const navigate = useNavigate();
@@ -80,9 +89,19 @@ export const MenuBars = () => {
           />
           <MenuButton tabIndex={TabIndex.UserMenu + 2} direction="right" label={t("MenuBars.settings")} onClick={() => navigate("settings")} icon={SettingsIcon} />
         </div>
+
+        <button
+          className={classNames("menu-bars__navigation", {"menu-bars__navigation--visible": showPreviousColumn || showNextColumn})}
+          disabled={!showPreviousColumn}
+          onClick={onPreviousColumn}
+          aria-hidden
+        >
+          <LeftArrowIcon className="menu-bars__navigation-icon" />
+        </button>
       </section>
-      {isAdmin && (
-        <section className={classNames("menu", "admin-menu", {"menu-animation": animate})} onTransitionEnd={(event) => handleAnimate(event)}>
+
+      <section className={classNames("menu", "admin-menu", {"admin-menu--empty": !isAdmin, "menu-animation": animate})} onTransitionEnd={(event) => handleAnimate(event)}>
+        {isAdmin && (
           <div className="menu__items">
             <MenuButton tabIndex={TabIndex.AdminMenu} direction="left" label="Timer" onClick={() => navigate("timer")} icon={TimerIcon} />
             <MenuButton tabIndex={TabIndex.AdminMenu + 1} direction="left" label="Voting" onClick={() => navigate("voting")} icon={VoteIcon} />
@@ -97,8 +116,18 @@ export const MenuBars = () => {
               isFocusModeToggle
             />
           </div>
-        </section>
-      )}
+        )}
+
+        <button
+          className={classNames("menu-bars__navigation", {"menu-bars__navigation--empty": !isAdmin, "menu-bars__navigation--visible": showPreviousColumn || showNextColumn})}
+          disabled={!showNextColumn}
+          onClick={onNextColumn}
+          aria-hidden
+        >
+          <RightArrowIcon className="menu-bars__navigation-icon" />
+        </button>
+      </section>
+
       {isAdmin && (
         <button
           className="menu-bars__switch"
diff --git a/src/components/MenuBars/MenuItem/MenuItem.scss b/src/components/MenuBars/MenuItem/MenuItem.scss
index ae172b38..e871baff 100644
--- a/src/components/MenuBars/MenuItem/MenuItem.scss
+++ b/src/components/MenuBars/MenuItem/MenuItem.scss
@@ -1,7 +1,7 @@
 @import "constants/style.scss";
 
 $menu-item-size: 42px;
-$tooltip-background-color-light: #d6d7da;
+$tooltip-background-color-light: #d3daf0;
 $tooltip-background-color-dark: #485064;
 $icon-background-color-light: $color-white;
 $icon-background-color-dark: #333948;
@@ -81,8 +81,9 @@ $icon-background-color-dark: #333948;
     }
   }
 }
-@include visibleColumns(".menu-item") {
-  .menu-item__tooltip {
+
+@media #{$tablet} {
+  .menu-item .menu-item__tooltip {
     opacity: 1;
     visibility: visible;
     width: auto;
@@ -92,18 +93,18 @@ $icon-background-color-dark: #333948;
     background-color: transparent;
     transform: translateX(0);
   }
-  .menu-item__tooltip::after {
+  .menu-item .menu-item__tooltip::after {
     display: none;
   }
 
-  &.menu-item--left .menu-item__tooltip {
+  .menu-item.menu-item--left .menu-item__tooltip {
     right: 0;
     left: auto;
   }
-  &.menu-item--right .menu-item__tooltip {
+  .menu-item.menu-item--right .menu-item__tooltip {
     left: 0;
   }
-  &:hover .menu-item__tooltip {
+  .menu-item:hover .menu-item__tooltip {
     max-width: 500px;
     transition: none;
   }
@@ -113,16 +114,16 @@ $icon-background-color-dark: #333948;
   width: 100%;
   padding: 0 $padding--default;
   white-space: nowrap;
-  font-size: $text-size--small;
+  font-size: 14px;
   font-weight: bold;
-  text-transform: uppercase;
-  letter-spacing: $letter-spacing--large;
+  letter-spacing: $letter-spacing--medium;
   line-height: $line-height--small;
   color: $color-black;
   border-radius: calc($menu-item-size / 2);
 }
-@include visibleColumns(".menu-item") {
-  .tooltip__text {
+
+@media #{$tablet} {
+  .menu-item .tooltip__text {
     color: $color-black;
     background-color: $tooltip-background-color-light;
     height: $menu-item-size;
@@ -130,22 +131,23 @@ $icon-background-color-dark: #333948;
     width: max-content;
     transition: transform 150ms linear 0ms;
   }
-  &.menu-item--left .tooltip__text {
+  .menu-item.menu-item--left .tooltip__text {
     padding-right: calc($menu-item-size + $padding--small);
     padding-left: $padding--default;
     transform: translateX(100%);
     transform-origin: right;
   }
-  &.menu-item--right .tooltip__text {
+  .menu-item.menu-item--right .tooltip__text {
     padding-left: calc($menu-item-size + $padding--small);
     padding-right: $padding--default;
     transform: translateX(-100%);
     transform-origin: left;
   }
-  &:hover .tooltip__text {
+  .menu-item:hover .tooltip__text {
     transform: translateX(0);
   }
 }
+
 [theme="dark"] {
   .tooltip__text {
     color: $color-white !important;
@@ -182,15 +184,17 @@ $icon-background-color-dark: #333948;
     visibility: visible;
   }
 }
-@include visibleColumns(".menu-item") {
-  .menu-item__icon {
+
+@media #{$tablet} {
+  .menu-item .menu-item__icon {
     transition: border-color 0ms linear 150ms;
   }
-  &:hover .menu-item__icon {
+  .menu-item:hover .menu-item__icon {
     border-color: $tooltip-background-color-light;
     transition: border-color 0ms linear 0ms;
   }
 }
+
 [theme="dark"] {
   .menu-item__icon {
     color: $color-white;
diff --git a/src/components/Timer/Timer.scss b/src/components/Timer/Timer.scss
index 44c8c75a..7d198bbd 100644
--- a/src/components/Timer/Timer.scss
+++ b/src/components/Timer/Timer.scss
@@ -9,16 +9,12 @@
   color: $color-white;
   background-color: $color-backlog-blue;
   vertical-align: bottom;
-}
-@include collapsedColumns(".timer > *") {
   box-shadow: 0 8px 16px #0057ff25;
 }
 
 [theme="dark"] {
   .timer > * {
     background-color: $color-planning-pink;
-  }
-  @include collapsedColumns(".timer > *") {
     box-shadow: 0 8px 16px #e2036025;
   }
 }
diff --git a/src/components/Votes/VoteDisplay/VoteDisplay.scss b/src/components/Votes/VoteDisplay/VoteDisplay.scss
index da3e1b16..437b4a30 100644
--- a/src/components/Votes/VoteDisplay/VoteDisplay.scss
+++ b/src/components/Votes/VoteDisplay/VoteDisplay.scss
@@ -9,16 +9,12 @@
   color: $color-white;
   background-color: $color-backlog-blue;
   vertical-align: bottom;
-}
-@include collapsedColumns(".vote-display > *") {
   box-shadow: 0 8px 16px #0057ff25;
 }
 
 [theme="dark"] {
   .vote-display > * {
     background-color: $color-planning-pink;
-  }
-  @include collapsedColumns(".vote-display > *") {
     box-shadow: 0 8px 16px #e2036025;
   }
 }
diff --git a/src/constants/style.scss b/src/constants/style.scss
index 63182f63..7a453b6d 100644
--- a/src/constants/style.scss
+++ b/src/constants/style.scss
@@ -134,28 +134,6 @@ $menu-desktop: "screen and (min-width: 1344px)";
   box-shadow: inset-border($left, $right, $top, $bottom, $color);
 }
 
-// apply styles on given selector if columns are collapsed (not all visible on a single screen)
-@mixin collapsedColumns($selector) {
-  @media screen and (max-width: 767px) {
-    #{$selector} {
-      @content;
-    }
-  }
-
-  [column-visibility="collapsed"] #{$selector} {
-    @content;
-  }
-}
-
-// apply styles on given selector if columns are visible entirely on the screen
-@mixin visibleColumns($selector) {
-  @media screen and (min-width: 768px) {
-    [column-visibility="visible"] #{$selector} {
-      @content;
-    }
-  }
-}
-
 // scrollbar
 @mixin scrollbar($width: 10px, $border-radius: 8px) {
   &::-webkit-scrollbar {
diff --git a/yarn.lock b/yarn.lock
index 1c124fc3..afa4dbd1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8303,7 +8303,7 @@ react-dnd-touch-backend@^11.1.3:
     "@react-dnd/invariant" "^2.0.0"
     dnd-core "^11.1.3"
 
-react-dnd-touch-backend@^15.1.3:
+react-dnd-touch-backend@^15.1.2:
   version "15.1.2"
   resolved "https://registry.yarnpkg.com/react-dnd-touch-backend/-/react-dnd-touch-backend-15.1.2.tgz#936833b66e024d8640b1845782cc059ff1aac2c0"
   integrity sha512-BId7/CYC77XcC3xpI2pA5KL+ciG6kvhIveYNOVWIgm0NM8kqv18lVfvHF4faCBPWZTbRoZQe0F8yLmL89oE98A==


Test patch:
diff --git a/src/components/Board/__tests__/Board.test.tsx b/src/components/Board/__tests__/Board.test.tsx
index c97634e4..8a055b82 100644
--- a/src/components/Board/__tests__/Board.test.tsx
+++ b/src/components/Board/__tests__/Board.test.tsx
@@ -11,7 +11,7 @@ const createBoardWithColumns = (...colors: Color[]) => {
   const [BoardContext] = wrapWithTestBackend(BoardComponent);
   return (
     <Provider store={getTestStore()}>
-      <BoardContext currentUserIsModerator>
+      <BoardContext currentUserIsModerator moderating={false}>
         {colors.map((color, index) => (
           <Column key={color} id="GG0fWzyCwd" color={colors[index]} name="Positive" visible={false} index={index} />
         ))}
@@ -164,33 +164,11 @@ describe("navigation", () => {
       return columns;
     };
 
-    test("navigation is hidden when all columns are visible", () => {
-      showColumns(true, true, true);
-      expect(container.querySelector(".board__navigation")).not.toBeInTheDocument();
-    });
-
-    test("navigation is shown when some columns are outside of the viewport", () => {
-      showColumns(false, true, false);
-      expect(container.querySelector(".board__navigation")).toBeInTheDocument();
-    });
-
-    test("column-visibility attribute is set correctly on fully visible columns", () => {
-      const rootContainer = render(createBoardWithColumns("planning-pink", "backlog-blue", "poker-purple"), {container: global.document.querySelector("#root")!});
-      showColumns(true, true, true);
-      expect(rootContainer.container.getAttribute("column-visibility")).toBe("visible");
-    });
-
-    test("column-visibility attribute is set correctly on partly visible columns", () => {
-      const rootContainer = render(createBoardWithColumns("planning-pink", "backlog-blue", "poker-purple"), {container: global.document.querySelector("#root")!});
-      showColumns(true, true, false);
-      expect(rootContainer.container.getAttribute("column-visibility")).toBe("collapsed");
-    });
-
     test("correct scroll of previous button", () => {
       const columns = showColumns(false, true, false);
       const scrollIntoView = jest.fn();
       columns[0].scrollIntoView = scrollIntoView;
-      fireEvent.click(container.querySelector(".board__navigation-prev") as HTMLElement);
+      fireEvent.click(container.querySelectorAll(".menu-bars__navigation")[0] as HTMLElement);
 
       expect(scrollIntoView).toHaveBeenCalled();
     });
@@ -200,19 +178,9 @@ describe("navigation", () => {
 
       const scrollIntoView = jest.fn();
       columns[2].scrollIntoView = scrollIntoView;
-      fireEvent.click(container.querySelector(".board__navigation-next") as HTMLElement);
+      fireEvent.click(container.querySelectorAll(".menu-bars__navigation")[1] as HTMLElement);
 
       expect(scrollIntoView).toHaveBeenCalled();
     });
-
-    test("previous button has color of previous column", () => {
-      showColumns(false, true, false);
-      expect(container.querySelector(".board__navigation-prev")).toHaveClass("accent-color__planning-pink");
-    });
-
-    test("next button has color of next column", () => {
-      showColumns(false, true, false);
-      expect(container.querySelector(".board__navigation-next")).toHaveClass("accent-color__poker-purple");
-    });
   });
 });
diff --git a/src/components/MenuBars/__tests__/MenuBars.test.tsx b/src/components/MenuBars/__tests__/MenuBars.test.tsx
index 296c2459..5c0c4f61 100644
--- a/src/components/MenuBars/__tests__/MenuBars.test.tsx
+++ b/src/components/MenuBars/__tests__/MenuBars.test.tsx
@@ -43,7 +43,7 @@ describe("MenuBars", () => {
       },
     });
     const {container} = render(createMenuBars(store));
-    expect(container.getElementsByClassName("admin-menu").length).toBe(0);
+    expect(container.getElementsByClassName("menu__items").length).toBe(1);
     expect(container.getElementsByClassName("user-menu").length).toBe(1);
   });
 });
diff --git a/src/components/MenuBars/__tests__/__snapshots__/MenuBars.test.tsx.snap b/src/components/MenuBars/__tests__/__snapshots__/MenuBars.test.tsx.snap
index e30ccd2a..f6931767 100644
--- a/src/components/MenuBars/__tests__/__snapshots__/MenuBars.test.tsx.snap
+++ b/src/components/MenuBars/__tests__/__snapshots__/MenuBars.test.tsx.snap
@@ -90,6 +90,17 @@ exports[`MenuBars should match snapshot 1`] = `
         </svg>
       </button>
     </div>
+    <button
+      aria-hidden="true"
+      class="menu-bars__navigation"
+      disabled=""
+    >
+      <svg
+        class="menu-bars__navigation-icon"
+      >
+        icon-arrow-previous.svg
+      </svg>
+    </button>
   </section>
   <section
     class="menu admin-menu"
@@ -170,6 +181,17 @@ exports[`MenuBars should match snapshot 1`] = `
         </svg>
       </button>
     </div>
+    <button
+      aria-hidden="true"
+      class="menu-bars__navigation"
+      disabled=""
+    >
+      <svg
+        class="menu-bars__navigation-icon"
+      >
+        icon-arrow-next.svg
+      </svg>
+    </button>
   </section>
   <button
     aria-label="MenuBars.switchToAdminMenu"