From 9a4eb840a503c095c56503f3a0734e1c5ea4db48 Mon Sep 17 00:00:00 2001
From: Zeeshan Ahmad <itexpert120@outlook.com>
Date: Thu, 9 Nov 2023 16:31:00 +0500
Subject: [PATCH] Finish navbar desktop + mobile

---
 .../widget/components/button/join-now.jsx     |  73 +++++
 apps/homepage/widget/propose.jsx              |   2 +-
 apps/homepage/widget/section/hero.jsx         |   3 +
 package.json                                  |   2 +-
 src/App.js                                    |   8 +-
 src/App.scss                                  |   1 -
 src/components/navigation/Navbar.js           | 253 ++++++++++++++++++
 src/pages/SignInPage.js                       |   2 +-
 yarn.lock                                     |   6 +-
 9 files changed, 339 insertions(+), 11 deletions(-)
 create mode 100644 apps/homepage/widget/components/button/join-now.jsx
 create mode 100644 src/components/navigation/Navbar.js

diff --git a/apps/homepage/widget/components/button/join-now.jsx b/apps/homepage/widget/components/button/join-now.jsx
new file mode 100644
index 00000000..db597892
--- /dev/null
+++ b/apps/homepage/widget/components/button/join-now.jsx
@@ -0,0 +1,73 @@
+const daoId = "build.sputnik-dao.near";
+const accountId = context.accountId;
+
+// get DAO policy, deposit, and group
+const policy = Near.view(daoId, "get_policy");
+
+if (policy === null) {
+  return "";
+}
+
+const deposit = policy.proposal_bond;
+const roleId = "community";
+const group = policy.roles
+  .filter((role) => role.name === roleId)
+  .map((role) => role.kind.Group);
+
+const proposalId = Near.view(daoId, "get_last_proposal_id") - 1;
+
+// get data from last proposal
+const proposal = Near.view(daoId, "get_proposal", {
+  id: proposalId,
+});
+
+if (proposal === null) {
+  return "";
+}
+
+// check if the potential member submitted last proposal
+const canJoin = accountId && accountId !== proposal.proposer;
+
+const Button = styled.a`
+  width: max-content;
+  all: unset;
+  display: flex;
+  padding: 10px 20px;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+
+  &:hover {
+    text-decoration: none;
+    color: #000 !important;
+    cursor: pointer;
+    background: var(--Yellow, #ffaf51);
+  }
+
+  border-radius: 8px;
+  background: var(--Yellow, #ffaf51);
+
+  color: var(--black-100, #000);
+
+  /* Other/Button_text */
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+`;
+
+const Container = styled.div`
+  width: max-content;
+  margin-left: auto;
+
+  @media screen and (max-width: 768px) {
+    margin: 0;
+    width: 100%;
+  }
+`;
+
+return (
+  <Container>
+    {canJoin ? <Button href={"/join"}>Join Now</Button> : props.children}
+  </Container>
+);
diff --git a/apps/homepage/widget/propose.jsx b/apps/homepage/widget/propose.jsx
index 7c1eda86..8d0af761 100644
--- a/apps/homepage/widget/propose.jsx
+++ b/apps/homepage/widget/propose.jsx
@@ -157,7 +157,7 @@ return (
       {view === "selection" ? (
         <>
           <h1>What would you like to do?</h1>
-          <div className="d-flex gap-4">
+          <div className="d-flex flex-wrap align-items-center justify-content-center gap-4">
             <SelectionBox
               title={"Make changes to the existing page"}
               selected={selection === 1}
diff --git a/apps/homepage/widget/section/hero.jsx b/apps/homepage/widget/section/hero.jsx
index c3352a73..27580280 100644
--- a/apps/homepage/widget/section/hero.jsx
+++ b/apps/homepage/widget/section/hero.jsx
@@ -25,6 +25,7 @@ const LeftBlur = styled.img`
   transform: translateY(-50%);
   object-fit: cover;
   width: 25%;
+  pointer-events: none;
 
   @media screen and (max-width: 768px) {
     width: 50%;
@@ -39,6 +40,7 @@ const RightBlur = styled.img`
   transform: translateY(-50%);
   object-fit: cover;
   width: 25%;
+  pointer-events: none;
 
   @media screen and (max-width: 768px) {
     width: 50%;
@@ -54,6 +56,7 @@ const Grid = styled.img`
   object-fit: cover;
   width: 100%;
   height: 100%;
+  pointer-events: none;
 `;
 
 const Logo = styled.img`
diff --git a/package.json b/package.json
index 46920728..5296afe7 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
     "error-polyfill": "^0.1.2",
     "local-storage": "^2.0.0",
     "near-api-js": "^2.1.3",
-    "near-social-vm": "git+https://github.com/NearSocial/VM.git#2.5.1",
+    "near-social-vm": "git+https://github.com/NearSocial/VM.git#2.5.2",
     "near-social-vm-types": "^1.0.0",
     "prettier": "^2.7.1",
     "qrcode.react": "^3.1.0",
diff --git a/src/App.js b/src/App.js
index 5ae0bb56..7d5baa6e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -26,7 +26,6 @@ import "react-bootstrap-typeahead/css/Typeahead.bs5.css";
 import "react-bootstrap-typeahead/css/Typeahead.css";
 import { Link, Route, BrowserRouter as Router, Switch } from "react-router-dom";
 import { BosLoaderBanner } from "./components/BosLoaderBanner";
-import { NavigationWrapper } from "./components/navigation/NavigationWrapper";
 import { useEthersProviderContext } from "./data/web3";
 import { NetworkId, Widgets } from "./data/widgets";
 import { useBosLoaderInitializer } from "./hooks/useBosLoaderInitializer";
@@ -37,6 +36,7 @@ import SignInPage from "./pages/SignInPage";
 import ViewPage from "./pages/ViewPage";
 import JoinPage from "./pages/JoinPage";
 import ProposePage from "./pages/ProposePage";
+import { Navbar } from "./components/navigation/Navbar";
 
 export const refreshAllowanceObj = {};
 const documentationHref = "https://github.com/NearBuilders/docs";
@@ -176,7 +176,7 @@ function App() {
               <Flags {...passProps} />
             </Route>
             <Route path={"/signin"}>
-              <NavigationWrapper {...passProps} />
+              <Navbar {...passProps} />
               <SignInPage {...passProps} />
             </Route>
             <Route path={"/join"}>
@@ -189,12 +189,12 @@ function App() {
               <EmbedPage {...passProps} />
             </Route>
             <Route path={"/edit/:widgetSrc*"}>
-              <NavigationWrapper {...passProps} />
+              <Navbar {...passProps} />
               <EditorPage {...passProps} />
             </Route>
             <Route path={"/:widgetSrc*"}>
               <BosLoaderBanner />
-              <NavigationWrapper {...passProps} />
+              <Navbar {...passProps} />
               <ViewPage {...passProps} />
             </Route>
           </Switch>
diff --git a/src/App.scss b/src/App.scss
index b29daf0b..89d79485 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -3,7 +3,6 @@
 body {
   overflow-y: scroll;
   background-color: #0b0c14;
-  color: #fff;
 }
 
 body, html {
diff --git a/src/components/navigation/Navbar.js b/src/components/navigation/Navbar.js
new file mode 100644
index 00000000..bbb8b75b
--- /dev/null
+++ b/src/components/navigation/Navbar.js
@@ -0,0 +1,253 @@
+import React, { useCallback, useState } from "react";
+import styled from "styled-components";
+import { UserDropdown } from "./desktop/UserDropdown";
+import { Widget } from "near-social-vm";
+import { useBosLoaderStore } from "../../stores/bos-loader";
+
+const StyledNavbar = styled.nav`
+  display: flex;
+  width: 100%;
+  padding: 24px 48px;
+  align-items: center;
+  justify-content: space-between;
+
+  .logo {
+    flex-grow: 1;
+    flex-basis: 0;
+
+    img {
+      width: auto;
+      height: 32px;
+      flex-shrink: 0;
+      object-fit: cover;
+    }
+  }
+
+  .active {
+    border-radius: 8px;
+    background: var(--Yellow, #ffaf51) !important;
+    color: var(--black-100, #000) !important;
+
+    /* Other/Button_text */
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+  }
+
+  .sign-in {
+    all: unset;
+
+    display: flex;
+    padding: 10px 20px;
+    justify-content: center;
+    align-items: center;
+    gap: 4px;
+
+    border-radius: 8px;
+    border: 1px solid var(--white-100, #fff);
+
+    color: var(--white-100, #fff);
+    transition: all 300ms;
+
+    &:hover {
+      text-decoration: none;
+      background: #fff;
+      color: #000;
+    }
+
+    cursor: pointer;
+
+    /* Other/Button_text */
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+  }
+`;
+
+const NavLink = styled.a`
+  all: unset;
+
+  display: flex;
+  padding: 10px 20px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+
+  border-radius: 8px;
+  background: var(--bg-2, #23242b) !important;
+  color: var(--white-100, #fff) !important;
+
+  /* Other/Button_text */
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+
+  cursor: pointer;
+  transition: all 300ms;
+
+  &:hover {
+    text-decoration: none;
+    background: #ffaf51 !important;
+    color: #000 !important;
+  }
+`;
+
+const MobileDropdownButton = styled.button`
+  all: unset;
+
+  color: #fff;
+  padding: 0.5rem;
+  font-size: 2rem;
+`;
+
+const MobileLink = styled.a`
+  all: unset;
+
+  display: flex;
+  padding: 10px 20px;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+
+  border-radius: 8px;
+  border: 1px solid var(--white-100, #fff);
+
+  color: var(--white-100, #fff);
+  transition: all 300ms;
+
+  &:hover {
+    text-decoration: none;
+    background: #fff;
+    color: #000;
+  }
+
+  cursor: pointer;
+
+  /* Other/Button_text */
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+`;
+
+const logoLink =
+  "https://ipfs.near.social/ipfs/bafkreihbwho3qfvnu4yss3eh5jrx6uxhrlzdgtdjyzyjrpa6odro6wdxya";
+
+export function Navbar(props) {
+  const redirectStore = useBosLoaderStore();
+  const [dropdown, setDropdown] = useState(false);
+
+  const toggleDropdown = useCallback(() => {
+    setDropdown((prev) => !prev);
+  }, []);
+
+  return (
+    <StyledNavbar className="container-xl position-relative">
+      <div className="logo">
+        <a href="/" style={{ all: "unset", cursor: "pointer" }}>
+          <img src={logoLink} />
+        </a>
+      </div>
+      <div className="d-none flex-grow-1 justify-content-center d-md-flex align-items-center gap-3">
+        <NavLink
+          href="/"
+          className={`${
+            window.location.href === `${window.location.origin}/` && "active"
+          }`}
+        >
+          Home
+        </NavLink>
+        <NavLink
+          href="/edit"
+          className={`${
+            window.location.href === `${window.location.origin}/edit` &&
+            "active"
+          }`}
+        >
+          Editor
+        </NavLink>
+        <NavLink href={props.documentationHref}>Docs</NavLink>
+      </div>
+      <div className="d-none d-md-block flex-grow-1" style={{ flexBasis: 0 }}>
+        {!props.signedIn && (
+          <button
+            className="sign-in"
+            style={{ width: "max-content", marginLeft: "auto" }}
+            onClick={props.requestSignIn}
+          >
+            Sign In
+          </button>
+        )}
+        {props.signedIn && (
+          <div>
+            <Widget
+              src="buildhub.near/widget/components.button.join-now"
+              config={{
+                redirectMap: redirectStore.redirectMap,
+              }}
+              props={{
+                children: <UserDropdown {...props} />,
+              }}
+            />
+          </div>
+        )}
+      </div>
+      <div className="d-block d-md-none">
+        <MobileDropdownButton onClick={toggleDropdown}>
+          <i className={`bi ${dropdown ? "bi-x" : "bi-list"}`}></i>
+        </MobileDropdownButton>
+      </div>
+      <div
+        className={`d-md-none ${
+          dropdown ? "d-flex" : "d-none"
+        } w-100 flex-column gap-3 text-white position-absolute start-50 top-100 shadow`}
+        style={{
+          transform: "translateX(-50%)",
+          background: "#0b0c14",
+          padding: "24px 48px",
+          zIndex: 5,
+        }}
+      >
+        <MobileLink
+          href="/"
+          className={`${
+            window.location.href === `${window.location.origin}/` && "active"
+          }`}
+        >
+          Home
+        </MobileLink>
+        <MobileLink
+          href="/edit"
+          className={`${
+            window.location.href === `${window.location.origin}/edit` &&
+            "active"
+          }`}
+        >
+          Editor
+        </MobileLink>
+        <MobileLink href={props.documentationHref}>Docs</MobileLink>
+        {!props.signedIn && (
+          <button className="sign-in my-3" onClick={props.requestSignIn}>
+            Sign In
+          </button>
+        )}
+        {props.signedIn && (
+          <div>
+            <Widget
+              src="buildhub.near/widget/components.button.join-now"
+              config={{
+                redirectMap: redirectStore.redirectMap,
+              }}
+              props={{
+                children: <UserDropdown {...props} />,
+              }}
+            />
+          </div>
+        )}
+      </div>
+    </StyledNavbar>
+  );
+}
diff --git a/src/pages/SignInPage.js b/src/pages/SignInPage.js
index a3175ec7..7b0f1597 100644
--- a/src/pages/SignInPage.js
+++ b/src/pages/SignInPage.js
@@ -48,7 +48,7 @@ export default function SignInPage(props) {
   }, [params.accountId, params.privateKey]);
 
   return (
-    <div className="container-xl">
+    <div className="container-xl text-white">
       <div className="row">
         <div
           className="d-inline-block position-relative overflow-hidden"
diff --git a/yarn.lock b/yarn.lock
index 01967c82..7866f190 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8549,9 +8549,9 @@ near-social-vm-types@^1.0.0:
   resolved "https://registry.yarnpkg.com/near-social-vm-types/-/near-social-vm-types-1.0.0.tgz#721494a863d2c0d64da2a43d80224e4080b690db"
   integrity sha512-K5CxfiiKc7evzFb/1BGBOD2x4QqnEBuVaHkgRsRTGv02ctLkxA/Xf892SornWSkD75Hf0s9j/jeM5PpMfXcM9A==
 
-"near-social-vm@git+https://github.com/NearSocial/VM.git#2.5.1":
-  version "2.5.1"
-  resolved "git+https://github.com/NearSocial/VM.git#32a404f19063eb53e907980bbfc56601fb608e8a"
+"near-social-vm@git+https://github.com/NearSocial/VM.git#2.5.2":
+  version "2.5.2"
+  resolved "git+https://github.com/NearSocial/VM.git#9fe2d4ec05727ee2e2db8ddf198556220a169a4f"
   dependencies:
     "@braintree/sanitize-url" "6.0.0"
     "@radix-ui/react-accordion" "^1.1.1"