From d765f5f1a0ea580245080e644d57a0800bf76ece Mon Sep 17 00:00:00 2001
From: Mike Cao <moocao@gmail.com>
Date: Sat, 15 Jun 2024 02:28:52 -0700
Subject: [PATCH] Added toggle button to report menu.

---
 .../reports/[reportId]/ReportMenu.module.css  | 31 +++++++++++++++++++
 .../(main)/reports/[reportId]/ReportMenu.tsx  | 18 +++++++++--
 .../reports/journey/JourneyView.module.css    |  5 +--
 3 files changed, 49 insertions(+), 5 deletions(-)

diff --git a/src/app/(main)/reports/[reportId]/ReportMenu.module.css b/src/app/(main)/reports/[reportId]/ReportMenu.module.css
index ee1c6085..82d7fcb0 100644
--- a/src/app/(main)/reports/[reportId]/ReportMenu.module.css
+++ b/src/app/(main)/reports/[reportId]/ReportMenu.module.css
@@ -1,7 +1,38 @@
 .menu {
+  position: relative;
   width: 300px;
   padding-inline-end: 20px;
   border-inline-end: 1px solid var(--base300);
   grid-row: 2 / 3;
   grid-column: 1 / 2;
 }
+
+.button {
+  display: flex;
+  place-content: center;
+  border: 1px solid var(--base400);
+  border-right: 0;
+  width: 30px;
+  padding: 5px;
+  right: 0;
+  position: absolute;
+  cursor: pointer;
+  z-index: 1;
+  border-radius: 4px 0 0 4px;
+}
+
+.button:hover {
+  background: var(--base75);
+}
+
+.menu.collapsed {
+  width: 0;
+  padding: 0;
+}
+
+.menu.collapsed .button {
+  left: 1px;
+  border-left: 0;
+  border-right: 1px solid var(--base300);
+  border-radius: 0 4px 4px 0;
+}
diff --git a/src/app/(main)/reports/[reportId]/ReportMenu.tsx b/src/app/(main)/reports/[reportId]/ReportMenu.tsx
index 9478a903..e8c0ff02 100644
--- a/src/app/(main)/reports/[reportId]/ReportMenu.tsx
+++ b/src/app/(main)/reports/[reportId]/ReportMenu.tsx
@@ -1,15 +1,27 @@
-import styles from './ReportMenu.module.css';
-import { useContext } from 'react';
+import { useContext, useState } from 'react';
 import { ReportContext } from './Report';
+import styles from './ReportMenu.module.css';
+import { Icon, Icons } from 'react-basics';
+import classNames from 'classnames';
 
 export function ReportMenu({ children }) {
+  const [collapsed, setCollapsed] = useState(true);
   const { report } = useContext(ReportContext);
 
   if (!report) {
     return null;
   }
 
-  return <div className={styles.menu}>{children}</div>;
+  return (
+    <div className={classNames(styles.menu, collapsed && styles.collapsed)}>
+      <div className={styles.button} onClick={() => setCollapsed(!collapsed)}>
+        <Icon rotate={collapsed ? -90 : 90}>
+          <Icons.ChevronDown />
+        </Icon>
+      </div>
+      {!collapsed && children}
+    </div>
+  );
 }
 
 export default ReportMenu;
diff --git a/src/app/(main)/reports/journey/JourneyView.module.css b/src/app/(main)/reports/journey/JourneyView.module.css
index f6b50b69..fbd00be2 100644
--- a/src/app/(main)/reports/journey/JourneyView.module.css
+++ b/src/app/(main)/reports/journey/JourneyView.module.css
@@ -31,6 +31,7 @@
   justify-content: center;
   gap: 20px;
   width: 100%;
+  height: 40px;
 }
 
 .visitors {
@@ -41,8 +42,8 @@
 
 .dropoff {
   font-weight: 600;
-  color: var(--base800);
-  background: var(--base200);
+  color: var(--blue800);
+  background: var(--blue100);
   padding: 4px 8px;
   border-radius: 5px;
 }