fix: spacing on new menu

Signed-off-by: rare-magma <[email protected]>
rare-magma · Sep 14, 2024 · dfb201d · dfb201d
1 parent f89a91a
commit dfb201d
Show file tree

Hide file tree

Showing 5 changed files with 148 additions and 111 deletions.
diff --git a/src/components/NavBar/NavBar.test.tsx b/src/components/NavBar/NavBar.test.tsx
@@ -1,7 +1,7 @@
 import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { BrowserRouter } from "react-router-dom";
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi, beforeEach } from "vitest";
 import { BudgetMother } from "../../guitos/domain/budget.mother";
 import {
   budgetContextSpy,
@@ -11,6 +11,12 @@ import {
 import { NavBar } from "./NavBar";
 
 describe("NavBar", () => {
+  const windowSpy = vi.spyOn(window, "open");
+
+  beforeEach(() => {
+    windowSpy.mockClear();
+  });
+
   const comp = (
     <BrowserRouter>
       <NavBar />
@@ -138,10 +144,7 @@ describe("NavBar", () => {
       "open instructions in new tab",
     );
     await userEvent.click(instructionsButton);
-    expect(instructionsButton).toHaveAttribute(
-      "href",
-      "https://github.com/rare-magma/guitos#getting-started",
-    );
+    expect(windowSpy).toHaveBeenCalled();
   });
 
   it("opens guitos repo in new tab", async () => {

diff --git a/src/components/NavBar/NavBar.tsx b/src/components/NavBar/NavBar.tsx
@@ -259,7 +259,7 @@ export function NavBar() {
               {<BsXLg aria-hidden={true} />}
             </Button>
           </Offcanvas.Header>
-          <Offcanvas.Body className="justify-content-end">
+          <Offcanvas.Body className="justify-content-end flex">
             <Nav>
               <Nav className={expanded ? "p-2" : "m-2"}>
                 {hasMultipleBudgets && (
@@ -286,111 +286,145 @@ export function NavBar() {
                 )}
               </Nav>
             </Nav>
-            <Nav
-              className={
+            <div
+              style={
                 expanded
-                  ? "mt-4 flex-wrap flex-row row-cols-2 flex-grow-1 h-75"
-                  : ""
+                  ? {
+                      display: "flex",
+                      flexDirection: "row",
+                      flexWrap: "wrap",
+                    }
+                  : {}
               }
             >
-              {hasOneOrMoreBudgets && (
-                <>
-                  <NavBarItem
-                    disabled={!canUndo}
-                    itemClassName={expanded ? "p-4" : "m-2"}
-                    onClick={undo}
-                    tooltipID={"tooltip-undo-history"}
-                    tooltipText={"undo"}
-                    buttonAriaLabel={"undo change"}
-                    buttonClassName={expanded ? "w-100 h-100" : "w-100"}
-                    buttonVariant={"outline-info"}
-                    buttonIcon={
-                      <BsArrowCounterclockwise
-                        size={expanded ? 50 : 0}
-                        aria-hidden={true}
-                      />
-                    }
-                  />
-
-                  <NavBarItem
-                    disabled={!canRedo}
-                    itemClassName={expanded ? "p-4" : "m-2"}
-                    onClick={redo}
-                    tooltipID={"tooltip-redo-history"}
-                    tooltipText={"redo"}
-                    buttonAriaLabel={"redo change"}
-                    buttonClassName={expanded ? "w-100 h-100" : "w-100"}
-                    buttonVariant={"outline-info"}
-                    buttonIcon={
-                      <BsArrowClockwise
-                        size={expanded ? 50 : 0}
-                        aria-hidden={true}
-                      />
-                    }
-                  />
-                </>
-              )}
-              <NavBarItem
-                itemClassName={expanded ? "p-4" : "m-2"}
-                onClick={() => {
-                  setExpanded(false);
-                  createBudget();
-                }}
-                tooltipID={"tooltip-new-budget"}
-                tooltipText={"new budget"}
-                buttonAriaLabel={"new budget"}
-                buttonClassName={expanded ? "w-100 h-100" : "w-100"}
-                buttonVariant={"outline-success"}
-                buttonIcon={
-                  <BsPlusLg size={expanded ? 50 : 0} aria-hidden={true} />
+              <Nav
+                style={
+                  expanded
+                    ? {
+                        marginTop: "4",
+                        flexDirection: "row",
+                        flexWrap: "wrap",
+                      }
+                    : {}
                 }
-              />
-              {hasOneOrMoreBudgets && (
-                <>
-                  <NavBarItem
-                    itemClassName={expanded ? "p-4" : "m-2"}
-                    onClick={() => {
-                      setExpanded(false);
-                      cloneBudget();
-                    }}
-                    tooltipID={"tooltip-clone-budget"}
-                    tooltipText={"clone budget"}
-                    buttonAriaLabel={"clone budget"}
-                    buttonClassName={expanded ? "w-100 h-100" : "w-100"}
-                    buttonVariant={"outline-success"}
-                    buttonIcon={
-                      <FaRegClone size={expanded ? 50 : 0} aria-hidden={true} />
-                    }
-                  />
-                  <NavBarDelete
-                    deleteButtonRef={deleteButtonRef}
-                    handleRemove={() => handleRemoveBudget(budget?.id)}
-                    expanded={expanded}
-                  />
-                </>
-              )}
+              >
+                {hasOneOrMoreBudgets && (
+                  <>
+                    <NavBarItem
+                      disabled={!canUndo}
+                      itemClassName={expanded ? "m-4 flex-grow-1 h-25" : "m-2"}
+                      onClick={undo}
+                      tooltipID={"tooltip-undo-history"}
+                      tooltipText={"undo"}
+                      buttonAriaLabel={"undo change"}
+                      buttonClassName={expanded ? "w-100 h-100" : "w-100"}
+                      buttonVariant={"outline-info"}
+                      buttonIcon={
+                        <BsArrowCounterclockwise
+                          size={expanded ? 50 : 0}
+                          aria-hidden={true}
+                        />
+                      }
+                    />
+
+                    <NavBarItem
+                      disabled={!canRedo}
+                      itemClassName={expanded ? "m-4 flex-grow-1 h-25" : "m-2"}
+                      onClick={redo}
+                      tooltipID={"tooltip-redo-history"}
+                      tooltipText={"redo"}
+                      buttonAriaLabel={"redo change"}
+                      buttonClassName={expanded ? "w-100 h-100" : "w-100"}
+                      buttonVariant={"outline-info"}
+                      buttonIcon={
+                        <BsArrowClockwise
+                          size={expanded ? 50 : 0}
+                          aria-hidden={true}
+                        />
+                      }
+                    />
+                  </>
+                )}
+                <NavBarItem
+                  itemClassName={
+                    expanded
+                      ? hasOneOrMoreBudgets
+                        ? "m-4 flex-grow-1 h-25"
+                        : "m-4 flex-grow-1 h-75"
+                      : "m-2"
+                  }
+                  onClick={() => {
+                    setExpanded(false);
+                    createBudget();
+                  }}
+                  tooltipID={"tooltip-new-budget"}
+                  tooltipText={"new budget"}
+                  buttonAriaLabel={"new budget"}
+                  buttonClassName={expanded ? "w-100 h-100" : "w-100"}
+                  buttonVariant={"outline-success"}
+                  buttonIcon={
+                    <BsPlusLg size={expanded ? 50 : 0} aria-hidden={true} />
+                  }
+                />
+                {hasOneOrMoreBudgets && (
+                  <>
+                    <NavBarItem
+                      itemClassName={expanded ? "m-4 flex-grow-1 h-25" : "m-2"}
+                      onClick={() => {
+                        setExpanded(false);
+                        cloneBudget();
+                      }}
+                      tooltipID={"tooltip-clone-budget"}
+                      tooltipText={"clone budget"}
+                      buttonAriaLabel={"clone budget"}
+                      buttonClassName={expanded ? "w-100 h-100" : "w-100"}
+                      buttonVariant={"outline-success"}
+                      buttonIcon={
+                        <FaRegClone
+                          size={expanded ? 50 : 0}
+                          aria-hidden={true}
+                        />
+                      }
+                    />
+                    <NavBarDelete
+                      deleteButtonRef={deleteButtonRef}
+                      handleRemove={() => handleRemoveBudget(budget?.id)}
+                      expanded={expanded}
+                    />
+                  </>
+                )}
 
-              <NavBarImpExp expanded={expanded} setExpanded={setExpanded} />
+                <NavBarImpExp expanded={expanded} setExpanded={setExpanded} />
 
-              {hasOneOrMoreBudgets && <NavBarSettings expanded={expanded} />}
+                {hasOneOrMoreBudgets && <NavBarSettings expanded={expanded} />}
 
-              <NavBarItem
-                itemClassName={expanded ? "p-4" : "m-2"}
-                onClick={() =>
-                  window.open(
-                    "https://github.com/rare-magma/guitos#getting-started",
-                  )
-                }
-                tooltipID={"tooltip-guitos-instructions"}
-                tooltipText={"open instructions in new tab"}
-                buttonAriaLabel={"open instructions in new tab"}
-                buttonClassName={expanded ? "w-100 h-100" : "w-100"}
-                buttonVariant={"outline-info"}
-                buttonIcon={
-                  <BsQuestionLg size={expanded ? 50 : 0} aria-hidden={true} />
-                }
-              />
-            </Nav>
+                <NavBarItem
+                  itemClassName={
+                    expanded
+                      ? hasOneOrMoreBudgets
+                        ? "m-4 flex-grow-1 h-25"
+                        : "m-4 flex-grow-1 h-75"
+                      : "m-2"
+                  }
+                  onClick={() => {
+                    const newWindow = window.open(
+                      "https://github.com/rare-magma/guitos#getting-started",
+                      "_blank",
+                      "noopener,noreferrer",
+                    );
+                    if (newWindow) newWindow.opener = null;
+                  }}
+                  tooltipID={"tooltip-guitos-instructions"}
+                  tooltipText={"open instructions in new tab"}
+                  buttonAriaLabel={"open instructions in new tab"}
+                  buttonClassName={expanded ? "w-100 h-100" : "w-100"}
+                  buttonVariant={"outline-info"}
+                  buttonIcon={
+                    <BsQuestionLg size={expanded ? 50 : 0} aria-hidden={true} />
+                  }
+                />
+              </Nav>
+            </div>
           </Offcanvas.Body>
         </Navbar.Offcanvas>
       </Container>

diff --git a/src/components/NavBar/NavBarDelete.tsx b/src/components/NavBar/NavBarDelete.tsx
@@ -18,7 +18,7 @@ export function NavBarDelete({
   const { budget } = useBudget();
 
   return (
-    <Nav className={expanded ? "p-4" : "m-2"}>
+    <Nav className={expanded ? "m-4 flex-grow-1 h-25" : "m-2"}>
       <OverlayTrigger
         trigger="click"
         key="nav-deletion-overlay"

diff --git a/src/components/NavBar/NavBarImpExp.tsx b/src/components/NavBar/NavBarImpExp.tsx
@@ -71,7 +71,7 @@ export function NavBarImpExp({ expanded, setExpanded }: NavBarImpExpProps) {
   }
 
   return hasOneOrMoreBudgets ? (
-    <Nav className={expanded ? "p-4" : "m-2"}>
+    <Nav className={expanded ? "m-4 flex-grow-1 h-25" : "m-2"}>
       <OverlayTrigger
         trigger="click"
         key="nav-imp-exp-overlay"
@@ -160,7 +160,7 @@ export function NavBarImpExp({ expanded, setExpanded }: NavBarImpExpProps) {
       </OverlayTrigger>
     </Nav>
   ) : (
-    <Nav className="m-2">
+    <Nav className={expanded ? "m-4 flex-grow-1 h-75 w-25" : "m-2"}>
       <OverlayTrigger
         delay={250}
         placement="bottom"
@@ -170,14 +170,14 @@ export function NavBarImpExp({ expanded, setExpanded }: NavBarImpExpProps) {
           </Tooltip>
         }
       >
-        <Form.Group controlId="import">
+        <Form.Group className="w-100 h-100" controlId="import">
           <Button
-            className="w-100"
+            className="w-100 h-100"
             aria-label="import budget"
             variant="outline-primary"
             onClick={() => importRef.current?.click()}
           >
-            {<BsUpload aria-hidden={true} />}
+            {<BsUpload size={expanded ? 50 : 0} aria-hidden={true} />}
           </Button>
           <Form.Control
             data-testid="import-form-control"

diff --git a/src/components/NavBar/NavBarSettings.tsx b/src/components/NavBar/NavBarSettings.tsx
@@ -29,7 +29,7 @@ export function NavBarSettings({ expanded }: NavBarSettingsProps) {
   });
 
   return (
-    <Nav className={expanded ? "p-4" : "m-2"}>
+    <Nav className={expanded ? "m-4 flex-grow-1 h-25" : "m-2"}>
       <OverlayTrigger
         trigger="click"
         key="nav-settings-overlay"