From 4f193bf436356535d87170437782f96ff22948a5 Mon Sep 17 00:00:00 2001
From: Lachlan Glen <54282009+lachlanglen@users.noreply.github.com>
Date: Tue, 7 Nov 2023 11:10:48 -0500
Subject: [PATCH] add mobile nav in project

---
 apps/potlock/widget/Project/Body.jsx          | 10 +++
 .../widget/Project/NavOptionsMobile.jsx       | 67 +++++++++++++++++++
 build/potlock/src/Project/Body.jsx            | 10 +++
 .../potlock/src/Project/NavOptionsMobile.jsx  | 67 +++++++++++++++++++
 4 files changed, 154 insertions(+)
 create mode 100644 apps/potlock/widget/Project/NavOptionsMobile.jsx
 create mode 100644 build/potlock/src/Project/NavOptionsMobile.jsx

diff --git a/apps/potlock/widget/Project/Body.jsx b/apps/potlock/widget/Project/Body.jsx
index 37f85497..989cbf35 100644
--- a/apps/potlock/widget/Project/Body.jsx
+++ b/apps/potlock/widget/Project/Body.jsx
@@ -15,6 +15,10 @@ const BodyContainer = styled.div`
   align-items: flex-start;
   justify-content: flex-start;
   gap: 48px;
+
+  @media screen and (max-width: 768px) {
+    max-width: 90vw;
+  }
 `;
 
 const NameContainer = styled.div`
@@ -143,6 +147,12 @@ return (
       />
     </div>
     <Actions />
+    <Widget
+      src={`${ownerId}/widget/Project.NavOptionsMobile`}
+      props={{
+        ...props,
+      }}
+    />
     <div style={{ width: "100%" }}>
       <Widget
         src={props.navOptions.find((option) => option.id == props.nav).source}
diff --git a/apps/potlock/widget/Project/NavOptionsMobile.jsx b/apps/potlock/widget/Project/NavOptionsMobile.jsx
new file mode 100644
index 00000000..288a24e6
--- /dev/null
+++ b/apps/potlock/widget/Project/NavOptionsMobile.jsx
@@ -0,0 +1,67 @@
+const { navOptions } = props;
+
+const getSelectedNavOption = () => {
+  const navOption = navOptions.find((option) => option.id == props.nav);
+  return navOption ?? navOptions[0];
+};
+
+const NavOptionsContainer = styled.div`
+  align-items: center;
+  justify-content: flex-start;
+  display: none;
+  overflow-x: auto;
+  white-space: nowrap;
+  -webkit-overflow-scrolling: touch; // For momentum scroll on iOS devices
+
+  @media screen and (max-width: 768px) {
+    display: flex;
+    max-width: 95vw;
+    flex-shrink: 0; // Prevent the container from shrinking
+  }
+`;
+
+const NavOption = styled.a`
+  position: relative;
+  font-size: 14px;
+  padding: 8px 16px;
+  font-weight: ${(props) => (props.selected ? 600 : 400)};
+  color: ${(props) => (props.selected ? "#DD3345" : props.disabled ? "lightgray" : "#7B7B7B")};
+
+  &:focus,
+  &:active {
+    text-decoration: none; /* This removes the underline */
+  }
+
+  &::after {
+    content: "";
+    display: ${(props) => (props.selected ? "block" : "none")};
+    position: absolute;
+    bottom: 0;
+    left: 50%; // Center the underline
+    transform: translateX(-50%); // Center the underline
+    width: 16px; // Width of the underline
+    height: 2px; // Thickness of the underline
+    background-color: #dd3345;
+  }
+`;
+
+return (
+  <NavOptionsContainer>
+    {navOptions.map((option) => {
+      const selected = option.id == getSelectedNavOption().id;
+      return option.disabled ? (
+        <NavOption selected={selected} disabled={option.disabled}>
+          {option.label}
+        </NavOption>
+      ) : (
+        <NavOption
+          selected={selected}
+          disabled={option.disabled}
+          href={`?tab=project&projectId=${props.projectId}&nav=${option.id}`}
+        >
+          {option.label}
+        </NavOption>
+      );
+    })}
+  </NavOptionsContainer>
+);
diff --git a/build/potlock/src/Project/Body.jsx b/build/potlock/src/Project/Body.jsx
index 37f85497..989cbf35 100644
--- a/build/potlock/src/Project/Body.jsx
+++ b/build/potlock/src/Project/Body.jsx
@@ -15,6 +15,10 @@ const BodyContainer = styled.div`
   align-items: flex-start;
   justify-content: flex-start;
   gap: 48px;
+
+  @media screen and (max-width: 768px) {
+    max-width: 90vw;
+  }
 `;
 
 const NameContainer = styled.div`
@@ -143,6 +147,12 @@ return (
       />
     </div>
     <Actions />
+    <Widget
+      src={`${ownerId}/widget/Project.NavOptionsMobile`}
+      props={{
+        ...props,
+      }}
+    />
     <div style={{ width: "100%" }}>
       <Widget
         src={props.navOptions.find((option) => option.id == props.nav).source}
diff --git a/build/potlock/src/Project/NavOptionsMobile.jsx b/build/potlock/src/Project/NavOptionsMobile.jsx
new file mode 100644
index 00000000..288a24e6
--- /dev/null
+++ b/build/potlock/src/Project/NavOptionsMobile.jsx
@@ -0,0 +1,67 @@
+const { navOptions } = props;
+
+const getSelectedNavOption = () => {
+  const navOption = navOptions.find((option) => option.id == props.nav);
+  return navOption ?? navOptions[0];
+};
+
+const NavOptionsContainer = styled.div`
+  align-items: center;
+  justify-content: flex-start;
+  display: none;
+  overflow-x: auto;
+  white-space: nowrap;
+  -webkit-overflow-scrolling: touch; // For momentum scroll on iOS devices
+
+  @media screen and (max-width: 768px) {
+    display: flex;
+    max-width: 95vw;
+    flex-shrink: 0; // Prevent the container from shrinking
+  }
+`;
+
+const NavOption = styled.a`
+  position: relative;
+  font-size: 14px;
+  padding: 8px 16px;
+  font-weight: ${(props) => (props.selected ? 600 : 400)};
+  color: ${(props) => (props.selected ? "#DD3345" : props.disabled ? "lightgray" : "#7B7B7B")};
+
+  &:focus,
+  &:active {
+    text-decoration: none; /* This removes the underline */
+  }
+
+  &::after {
+    content: "";
+    display: ${(props) => (props.selected ? "block" : "none")};
+    position: absolute;
+    bottom: 0;
+    left: 50%; // Center the underline
+    transform: translateX(-50%); // Center the underline
+    width: 16px; // Width of the underline
+    height: 2px; // Thickness of the underline
+    background-color: #dd3345;
+  }
+`;
+
+return (
+  <NavOptionsContainer>
+    {navOptions.map((option) => {
+      const selected = option.id == getSelectedNavOption().id;
+      return option.disabled ? (
+        <NavOption selected={selected} disabled={option.disabled}>
+          {option.label}
+        </NavOption>
+      ) : (
+        <NavOption
+          selected={selected}
+          disabled={option.disabled}
+          href={`?tab=project&projectId=${props.projectId}&nav=${option.id}`}
+        >
+          {option.label}
+        </NavOption>
+      );
+    })}
+  </NavOptionsContainer>
+);