Experiment to add additional project instructions collapse button

public/translations/en-US.json

@@ -308,8 +308,10 @@
   },
   "sidebar": {
     "collapse": "Collapse sidebar",
+    "collapseInstructions": "Collapse project instructions",
     "download": "Download project",
     "expand": "Expand sidebar",
+    "expandInstructions": "Open project instructions",
     "file": "Project files",
     "images": "Image gallery",
     "settings": "Settings",
@@ -355,4 +357,4 @@
   "common": {
     "or": "or"
   }
-}
+}

public/translations/en.json

@@ -308,8 +308,10 @@
   },
   "sidebar": {
     "collapse": "Collapse sidebar",
+    "collapseInstructions": "Collapse project instructions",
     "download": "Download project",
     "expand": "Expand sidebar",
+    "expandInstructions": "Open project instructions",
     "file": "Project files",
     "images": "Image gallery",
     "settings": "Settings",

src/assets/stylesheets/Project.scss

@@ -50,6 +50,32 @@
     overflow: hidden;
   }
 
+  .project-bar-row {
+    display: flex;
+    align-items: stretch;
+    gap: var(--project-wrapper-grid-gap, #{$space-0-5});
+
+    .project-bar {
+      flex: 1 1 auto;
+      min-inline-size: 0;
+    }
+  }
+
+  .project-bar-row__expand {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    box-sizing: border-box;
+    padding: $space-0-5;
+    border-radius: $space-0-5;
+    background-color: var(--editor-color-layer-3);
+    border: 1px solid var(--editor-color-outline);
+
+    .rpf-button {
+      border: none;
+    }
+  }
+
   .proj-editor-wrapper {
     display: flex;
     flex: 0 1 auto;

src/assets/stylesheets/Sidebar.scss

@@ -122,9 +122,41 @@
 
 .sidebar__panel-heading {
   margin: 0;
+  min-inline-size: 0;
   @include font-size-1-5(regular);
 }
 
+.sidebar__panel-heading-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-0-5);
+
+  .rpf-button {
+    border: none;
+  }
+}
+
+.sidebar__panel-collapse {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  margin: 0;
+  border: 1px solid var(--sidebar-border);
+  border-radius: var(--space-1);
+  padding: var(--space-1);
+  color: var(--editor-color-text);
+
+  svg {
+    margin: 0;
+  }
+
+  &:hover {
+    background-color: var(--sidebar-option-hover);
+  }
+}
+
 .sidebar__panel-header {
   display: flex;
   flex-direction: column;

src/components/Editor/Project/Project.jsx

@@ -10,6 +10,7 @@ import { showSavedMessage } from "../../../utils/Notifications";
 import ProjectBar from "../../ProjectBar/ProjectBar";
 import ScratchProjectBar from "../../ProjectBar/ScratchProjectBar";
 import Sidebar from "../../Menus/Sidebar/Sidebar";
+import SidebarExpandButton from "../../Menus/Sidebar/SidebarExpandButton";
 import EditorInput from "../EditorInput/EditorInput";
 import ResizableWithHandle from "../../../utils/ResizableWithHandle";
 import { useContainerMinWidth } from "../../../hooks/useContainerMinWidth";
@@ -69,12 +70,20 @@ const Project = (props) => {
           />
         )}
         <div className="project-wrapper" ref={containerRef}>
-          {withProjectbar &&
-            (isCodeEditorScratchProject ? (
-              <ScratchProjectBar nameEditable={nameEditable} />
-            ) : (
-              <ProjectBar nameEditable={nameEditable} />
-            ))}
+          {withProjectbar && (
+            <div className="project-bar-row">
+              {withSidebar && (
+                <SidebarExpandButton
+                  allowMobileView={!isCodeEditorScratchProject}
+                />
+              )}
+              {isCodeEditorScratchProject ? (
+                <ScratchProjectBar nameEditable={nameEditable} />
+              ) : (
+                <ProjectBar nameEditable={nameEditable} />
+              )}
+            </div>
+          )}
           {!loading && !isCodeEditorScratchProject && (
             <div className="proj-editor-wrapper">
               <ResizableWithHandle

src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx

@@ -1,12 +1,13 @@
 /* eslint-disable jsx-a11y/anchor-has-content */
 // This is disabled because the empty anchor tag is used for translation and will have content when rendered.
 
-import React, { useRef, useState } from "react";
+import { Button } from "@raspberrypifoundation/design-system-react";
+import { useRef, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { useDispatch, useSelector } from "react-redux";
 import { Tab, TabList, TabPanel, Tabs } from "react-tabs";
-import SidebarPanel from "../SidebarPanel";
-
+import BinIcon from "../../../../assets/icons/bin.svg";
+import DoubleArrowLeft from "../../../../assets/icons/double_arrow_left.svg";
 import PlusIcon from "../../../../assets/icons/plus.svg";
 import demoInstructions from "../../../../assets/markdown/demoInstructions.md?raw";
 import "../../../../assets/stylesheets/Instructions.scss?inline";
@@ -17,22 +18,21 @@ import {
 } from "../../../../redux/InstructionsSlice";
 import {
   insertStepAfter,
-  removeStepAt,
-  updateStepMarkdown,
   REMOVE_ALL_STEPS,
   REMOVE_CURRENT_STEP,
+  removeStepAt,
+  updateStepMarkdown,
 } from "../../../../utils/instructionSteps";
 import populateMarkdownTemplate from "../../../../utils/populateMarkdownTemplate";
-import { Button } from "@raspberrypifoundation/design-system-react";
 import RemoveInstructionStepModal from "../../../Modals/RemoveInstructionStepModal";
+import SidebarPanel from "../SidebarPanel";
 import InstructionsStep from "./InstructionsStep/InstructionsStep";
 import ProgressBar from "./ProgressBar/ProgressBar";
-import BinIcon from "../../../../assets/icons/bin.svg";
 
 const INSTRUCTIONS_GUIDE_URL =
   "https://help.editor.raspberrypi.org/hc/en-us/articles/52495086715028-How-to-write-project-instructions";
 
-const InstructionsPanel = () => {
+const InstructionsPanel = ({ toggleOption, isMobile }) => {
   const [tabIndex, setTabIndex] = useState(0);
   const [showRemoveStepModal, setShowRemoveStepModal] = useState(false);
   const [removeScope, setRemoveScope] = useState(REMOVE_CURRENT_STEP);
@@ -110,11 +110,31 @@ const InstructionsPanel = () => {
 
   const panelRef = useRef(null);
 
+  const collapsePanel = () => {
+    toggleOption("instructions");
+    if (window.plausible) {
+      window.plausible("Collapse file pane");
+    }
+  };
+
   return (
     <SidebarPanel
       defaultWidth="30vw"
       panelRef={panelRef}
       heading={t("instructionsPanel.projectSteps")}
+      headingPrefix={
+        !isMobile && toggleOption ? (
+          <Button
+            className="sidebar__panel-collapse"
+            icon={<DoubleArrowLeft />}
+            iconOnly
+            text={t("sidebar.collapseInstructions")}
+            onClick={collapsePanel}
+            size="small"
+            type="tertiary"
+          />
+        ) : undefined
+      }
       buttons={
         instructionsEditable && !hasInstructions
           ? [

src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.test.jsx

@@ -42,6 +42,44 @@
     fireEvent.click(removeModalScopeRadio(scope));
   });
 
+describe("The panel header collapse button", () => {
+  const renderPanel = (props = {}) =>
+    renderWithProviders(<InstructionsPanel {...props} />, {
+      preloadedState: {
+        editor: {
+          project: { instructions: [{ markdown_content: "instructions" }] },
+          instructionsEditable: true,
+        },
+        instructions: { permitOverride: true, currentStepPosition: 0 },
+      },
+    });
+
+  test("is not rendered when the panel cannot be toggled", () => {
+    renderPanel();
+
+    expect(
+      screen.queryByTitle("sidebar.collapseInstructions"),
+    ).not.toBeInTheDocument();
+  });
+
+  test("is not rendered on mobile", () => {
+    renderPanel({ toggleOption: vi.fn(), isMobile: true });
+
+    expect(
+      screen.queryByTitle("sidebar.collapseInstructions"),
+    ).not.toBeInTheDocument();
+  });
+
+  test("closes the instructions panel when clicked", () => {
+    const toggleOption = vi.fn();
+    renderPanel({ toggleOption });
+
+    fireEvent.click(screen.getByTitle("sidebar.collapseInstructions"));
+
+    expect(toggleOption).toHaveBeenCalledWith("instructions");
+  });
+});
+
 describe("When instructionsEditable changes from false to true", () => {
   test("does not leave the rendered preview above the edit/view tabs", () => {
     const { container, store } = renderWithProviders(<InstructionsPanel />, {

src/components/Menus/Sidebar/Sidebar.jsx

@@ -212,6 +212,8 @@ const Sidebar = ({
     } else if (!optionIsAvailable) {
       setOption(nextDefaultOption);
       dispatch(setSidebarOption(nextDefaultOption));
+    } else {
+      setOption(selectedSidebarOption);
     }
   }, [dispatch, nextDefaultOption, optionIsAvailable, selectedSidebarOption]);
 
@@ -245,14 +247,15 @@ const Sidebar = ({
     >
       <SidebarBar
         menuOptions={menuOptions}
-        option={activeOption}
+        activeOption={activeOption}
         toggleOption={toggleOption}
         instructions={instructionsSteps}
         allowMobileView={allowMobileView}
       />
       {activeOption && (
         <CustomSidebarPanel
           isMobile={isMobile}
+          toggleOption={toggleOption}
           {...(optionDict.panelProps || {})}
         />
       )}

src/components/Menus/Sidebar/SidebarBar.jsx

@@ -16,7 +16,7 @@ import { MOBILE_MEDIA_QUERY } from "../../../utils/mediaQueryBreakpoints";
 const SidebarBar = (props) => {
   const {
     menuOptions,
-    option,
+    activeOption,
     toggleOption,
     instructions = false,
     allowMobileView = true,
@@ -59,7 +59,7 @@ const SidebarBar = (props) => {
   };
 
   const collapsePopOut = () => {
-    toggleOption(option);
+    toggleOption(activeOption);
     if (window.plausible) {
       window.plausible("Collapse file pane");
     }
@@ -81,7 +81,7 @@ const SidebarBar = (props) => {
   return (
     <div
       className={classNames("sidebar__bar", {
-        "sidebar__bar--selected": option,
+        "sidebar__bar--selected": activeOption,
       })}
     >
       <div className={`sidebar__bar-options--top`}>
@@ -95,7 +95,7 @@ const SidebarBar = (props) => {
             key={i}
             Icon={menuOption.icon}
             title={menuOption.title}
-            isActive={option === menuOption.name}
+            isActive={activeOption === menuOption.name}
             toggleOption={toggleOption}
             name={menuOption.name}
           />
@@ -107,13 +107,13 @@ const SidebarBar = (props) => {
             key={i}
             Icon={menuOption.icon}
             title={menuOption.title}
-            isActive={option === menuOption.name}
+            isActive={activeOption === menuOption.name}
             toggleOption={toggleOption}
             name={menuOption.name}
           />
         ))}
         {!isMobile &&
-          (option ? (
+          (activeOption ? (
             <div className="sidebar__bar-option-wrapper">
               <Button
                 className="sidebar__bar-option"