From ad0dadc86a130ca27a257801b0eac338c4cac925 Mon Sep 17 00:00:00 2001
From: Caleb Jacob <thecalebjacob@gmail.com>
Date: Mon, 9 Oct 2023 10:52:08 -0600
Subject: [PATCH] Implement header UX updates, bring back Current Component UI

---
 .../navigation/CurrentComponent.tsx           |  10 +-
 src/components/navigation/Navigation.tsx      |   4 +-
 .../navigation/desktop/DesktopNavigation.tsx  |   2 +-
 .../navigation/desktop/MainNavigationMenu.tsx |  61 +++++----
 .../navigation/mobile/AccordionMenu.tsx       |  91 ++++++++------
 .../navigation/navigation-categories.ts       | 119 ++++--------------
 6 files changed, 123 insertions(+), 164 deletions(-)

diff --git a/src/components/navigation/CurrentComponent.tsx b/src/components/navigation/CurrentComponent.tsx
index 9410eac72..3db7acd3e 100644
--- a/src/components/navigation/CurrentComponent.tsx
+++ b/src/components/navigation/CurrentComponent.tsx
@@ -5,11 +5,11 @@ import { VmComponent } from '@/components/vm/VmComponent';
 import { useBosComponents } from '@/hooks/useBosComponents';
 import { useCurrentComponentStore } from '@/stores/current-component';
 
-const StyledCurrentComponent = styled.div`
+const Wrapper = styled.div`
   border: 1px solid #eeeeec;
   background-color: #f9f9f8;
   border-radius: 4px;
-  min-height: 100%;
+  min-width: 253px;
 
   .title {
     color: #868682;
@@ -31,7 +31,7 @@ const StyledCurrentComponent = styled.div`
     justify-content: center;
   }
   > div {
-    padding: 15px;
+    padding: 15px 15px 0;
     div:nth-child(1) {
       flex-direction: column;
       text-align: center;
@@ -64,7 +64,7 @@ export const CurrentComponent = () => {
   if (!src) return null;
 
   return (
-    <StyledCurrentComponent className="current-component">
+    <Wrapper>
       <div className="title">Current Component</div>
       <VmComponent
         src={components.componentSummary}
@@ -74,6 +74,6 @@ export const CurrentComponent = () => {
           showTags: true,
         }}
       />
-    </StyledCurrentComponent>
+    </Wrapper>
   );
 };
diff --git a/src/components/navigation/Navigation.tsx b/src/components/navigation/Navigation.tsx
index c35262b6d..c52546b4e 100644
--- a/src/components/navigation/Navigation.tsx
+++ b/src/components/navigation/Navigation.tsx
@@ -7,11 +7,11 @@ export const Navigation = () => {
   const [matches, setMatches] = useState(true);
 
   useEffect(() => {
-    setMatches(window.matchMedia('(min-width: 1120px)').matches);
+    setMatches(window.matchMedia('(min-width: 1024px)').matches);
   }, []);
 
   useEffect(() => {
-    window.matchMedia('(min-width: 1120px)').addEventListener('change', (e) => setMatches(e.matches));
+    window.matchMedia('(min-width: 1024px)').addEventListener('change', (e) => setMatches(e.matches));
   }, []);
 
   return (
diff --git a/src/components/navigation/desktop/DesktopNavigation.tsx b/src/components/navigation/desktop/DesktopNavigation.tsx
index 5a986f956..cf3f875e6 100644
--- a/src/components/navigation/desktop/DesktopNavigation.tsx
+++ b/src/components/navigation/desktop/DesktopNavigation.tsx
@@ -71,7 +71,7 @@ const Search = styled.div`
     border: 1px solid var(--sand6);
     background-color: white;
     font-size: 16px;
-    margin-left: 1rem;
+    margin-left: 2rem;
     width: 200px;
     transition: all 200ms;
 
diff --git a/src/components/navigation/desktop/MainNavigationMenu.tsx b/src/components/navigation/desktop/MainNavigationMenu.tsx
index 0cf2db7f7..4735d7fea 100644
--- a/src/components/navigation/desktop/MainNavigationMenu.tsx
+++ b/src/components/navigation/desktop/MainNavigationMenu.tsx
@@ -2,14 +2,16 @@ import * as NavigationMenu from '@radix-ui/react-navigation-menu';
 import Link from 'next/link';
 import styled from 'styled-components';
 
-import { Button } from '@/components/lib/Button';
+import { useCurrentComponentStore } from '@/stores/current-component';
 import { recordMouseEnter } from '@/utils/analytics';
 
+import { CurrentComponent } from '../CurrentComponent';
 import { navigationCategories } from '../navigation-categories';
 
 const Wrapper = styled.div`
   position: relative;
   display: flex;
+  justify-content: center;
   z-index: 1;
   flex-grow: 1;
   padding: 0 1rem;
@@ -92,7 +94,7 @@ const Container = styled.div`
 const NavLink = styled(NavigationMenu.Link)`
   display: inline-block;
   min-width: 120px;
-  padding: 8px 0;
+  padding: 7px 0;
   font: var(--text-s);
   color: var(--sand10);
   transition: color 200ms;
@@ -109,31 +111,30 @@ const NavLink = styled(NavigationMenu.Link)`
 const Section = styled.div`
   display: flex;
   flex-direction: column;
-  padding: 24px 24px 0;
-
-  &:nth-child(1),
-  &:nth-child(2) {
-    padding-top: 0;
-  }
-
-  &:nth-child(odd) {
-    border-right: 1px solid var(--sand4);
-  }
+  padding: 0 24px 0;
+  gap: 24px;
+  border-right: 1px solid var(--sand4);
 
   &:first-child:last-child {
     border-right: none;
   }
 `;
 
+const CurrentComponentSection = styled.div`
+  padding: 0 24px 0;
+`;
+
 const SectionTitle = styled.p`
   font: var(--text-s);
   color: var(--sand12);
   font-weight: 600;
-  padding: 8px 0;
+  padding: 7px 0;
   margin: 0;
 `;
 
 export const MainNavigationMenu = () => {
+  const currentComponentSrc = useCurrentComponentStore((store) => store.src);
+
   return (
     <Wrapper>
       <NavRoot delayDuration={0}>
@@ -146,19 +147,27 @@ export const MainNavigationMenu = () => {
 
                 <NavContent>
                   <Container>
-                    {category.sections.map((section) => (
-                      <Section key={section.title}>
-                        {section.title && <SectionTitle>{section.title}</SectionTitle>}
-
-                        {section.links.map((link) => (
-                          <NavLink key={link.title} asChild>
-                            <Link href={link.url} target={link.url.indexOf('http') === 0 ? '_blank' : undefined}>
-                              {link.title}
-                            </Link>
-                          </NavLink>
-                        ))}
-                      </Section>
-                    ))}
+                    <Section>
+                      {category.sections.map((section) => (
+                        <div key={section.title}>
+                          {section.title && <SectionTitle>{section.title}</SectionTitle>}
+
+                          {section.links.map((link) => (
+                            <NavLink key={link.title} asChild>
+                              <Link href={link.url} target={link.url.indexOf('http') === 0 ? '_blank' : undefined}>
+                                {link.title}
+                              </Link>
+                            </NavLink>
+                          ))}
+                        </div>
+                      ))}
+                    </Section>
+
+                    {currentComponentSrc && category.title === 'Develop' && (
+                      <CurrentComponentSection>
+                        <CurrentComponent />
+                      </CurrentComponentSection>
+                    )}
                   </Container>
                 </NavContent>
               </NavItem>
diff --git a/src/components/navigation/mobile/AccordionMenu.tsx b/src/components/navigation/mobile/AccordionMenu.tsx
index cf6c2187e..2fee6451a 100644
--- a/src/components/navigation/mobile/AccordionMenu.tsx
+++ b/src/components/navigation/mobile/AccordionMenu.tsx
@@ -2,6 +2,9 @@ import * as Accordion from '@radix-ui/react-accordion';
 import Link from 'next/link';
 import styled from 'styled-components';
 
+import { useCurrentComponentStore } from '@/stores/current-component';
+
+import { CurrentComponent } from '../CurrentComponent';
 import { navigationCategories } from '../navigation-categories';
 
 type Props = {
@@ -90,6 +93,10 @@ const Section = styled.div`
   }
 `;
 
+const CurrentComponentSection = styled.div`
+  padding: 24px;
+`;
+
 const SectionTitle = styled.p`
   font: var(--text-s);
   color: var(--sand12);
@@ -98,40 +105,50 @@ const SectionTitle = styled.p`
   margin: 0;
 `;
 
-export const AccordionMenu = (props: Props) => (
-  <Wrapper>
-    <AccordionRoot type="multiple">
-      {navigationCategories
-        .filter((category) => category.visible === 'all' || category.visible === 'mobile')
-        .map((category) => (
-          <AccordionItem value={category.title} key={category.title}>
-            <AccordionHeader>
-              <AccordionTrigger>
-                {category.title}
-                <i className="ph-bold ph-caret-down" />
-              </AccordionTrigger>
-            </AccordionHeader>
-
-            <AccordionContent>
-              {category.sections.map((section) => (
-                <Section key={section.title}>
-                  {section.title && <SectionTitle>{section.title}</SectionTitle>}
-
-                  {section.links.map((link) => (
-                    <Link
-                      href={link.url}
-                      target={link.url.indexOf('http') === 0 ? '_blank' : undefined}
-                      key={link.title}
-                      onClick={props.onCloseMenu}
-                    >
-                      {link.title}
-                    </Link>
-                  ))}
-                </Section>
-              ))}
-            </AccordionContent>
-          </AccordionItem>
-        ))}
-    </AccordionRoot>
-  </Wrapper>
-);
+export const AccordionMenu = (props: Props) => {
+  const currentComponentSrc = useCurrentComponentStore((store) => store.src);
+
+  return (
+    <Wrapper>
+      <AccordionRoot type="multiple">
+        {navigationCategories
+          .filter((category) => category.visible === 'all' || category.visible === 'mobile')
+          .map((category) => (
+            <AccordionItem value={category.title} key={category.title}>
+              <AccordionHeader>
+                <AccordionTrigger>
+                  {category.title}
+                  <i className="ph-bold ph-caret-down" />
+                </AccordionTrigger>
+              </AccordionHeader>
+
+              <AccordionContent>
+                {category.sections.map((section) => (
+                  <Section key={section.title}>
+                    {section.title && <SectionTitle>{section.title}</SectionTitle>}
+
+                    {section.links.map((link) => (
+                      <Link
+                        href={link.url}
+                        target={link.url.indexOf('http') === 0 ? '_blank' : undefined}
+                        key={link.title}
+                        onClick={props.onCloseMenu}
+                      >
+                        {link.title}
+                      </Link>
+                    ))}
+                  </Section>
+                ))}
+
+                {currentComponentSrc && category.title === 'Develop' && (
+                  <CurrentComponentSection>
+                    <CurrentComponent />
+                  </CurrentComponentSection>
+                )}
+              </AccordionContent>
+            </AccordionItem>
+          ))}
+      </AccordionRoot>
+    </Wrapper>
+  );
+};
diff --git a/src/components/navigation/navigation-categories.ts b/src/components/navigation/navigation-categories.ts
index 63ba87fe0..96f2b2d06 100644
--- a/src/components/navigation/navigation-categories.ts
+++ b/src/components/navigation/navigation-categories.ts
@@ -1,113 +1,59 @@
 export const navigationCategories = [
   {
-    title: 'Platform',
+    title: 'Develop',
     visible: 'all',
     sections: [
       {
-        title: null,
+        title: 'Docs',
         links: [
           {
-            title: 'Decentralized Front-Ends',
-            url: 'https://docs.near.org/bos/components',
+            title: 'All',
+            url: 'https://docs.near.org',
           },
           {
-            title: 'Decentralized Hosting',
-            url: 'https://docs.near.org/bos/tutorial/bos-gateway',
+            title: 'Overview',
+            url: 'https://docs.near.org/concepts/welcome',
           },
           {
-            title: 'Data Platform',
-            url: 'https://docs.near.org/concepts/data-flow/data-storage',
+            title: 'Smart Contracts',
+            url: 'https://docs.near.org/develop/contracts/welcome',
           },
           {
-            title: 'Fast Auth',
-            url: 'https://docs.near.org/tools/fastauth-sdk',
+            title: 'Applications',
+            url: 'https://docs.near.org/develop/integrate/welcome',
           },
           {
-            title: 'Near Protocol',
-            url: 'https://docs.near.org/concepts/web3/near',
+            title: 'Data Query',
+            url: 'https://docs.near.org/bos/queryapi/intro',
           },
-        ],
-      },
-      {
-        title: 'Discover',
-        links: [
           {
-            title: 'Applications',
-            url: '/applications',
-          },
-          {
-            title: 'Gateways',
-            url: 'https://near.org/gateways',
+            title: 'RPC',
+            url: 'https://docs.near.org/api/rpc/introduction',
           },
         ],
       },
-    ],
-  },
-
-  {
-    title: 'Developers',
-    visible: 'all',
-    sections: [
       {
         title: 'Resources',
         links: [
           {
-            title: 'Documentation',
-            url: 'https://docs.near.org',
-          },
-          {
-            title: 'Sandbox',
-            url: '/sandbox',
+            title: 'Tools',
+            url: 'https://docs.near.org/tools/welcome',
           },
           {
-            title: 'Tutorials',
+            title: 'Examples & Tutorials',
             url: 'https://docs.near.org/bos/tutorial/quickstart',
           },
           {
             title: 'GitHub',
             url: 'https://github.com/near/dx',
           },
-        ],
-      },
-      {
-        title: 'Discover',
-        links: [
-          {
-            title: 'Components',
-            url: '/components',
-          },
           {
             title: 'Standards & Proposals',
             url: 'https://github.com/near/NEPs',
           },
-        ],
-      },
-      {
-        title: 'Tools',
-        links: [
-          {
-            title: 'VS Code Extension',
-            url: 'https://docs.near.org/bos/dev/vscode',
-          },
-          {
-            title: 'BOS Loader',
-            url: 'https://docs.near.org/bos/dev/bos-loader',
-          },
-          {
-            title: 'APIs',
-            url: 'https://docs.near.org/bos/api/home',
-          },
-          {
-            title: 'SDKs',
-            url: 'https://docs.near.org/sdk/welcome',
-          },
           {
-            title: 'Command Line Tools',
-            url: 'https://github.com/bos-cli-rs/bos-cli-rs',
-          },
-          {
-            title: 'View All',
-            url: 'https://docs.near.org/tools/welcome',
+            title: 'Technical Papers',
+            url: 'https://docs.near.org/concepts/advanced/papers',
           },
         ],
       },
@@ -133,33 +79,29 @@ export const navigationCategories = [
             title: 'Gateways',
             url: '/gateways',
           },
-          {
-            title: 'People',
-            url: '/people',
-          },
-          {
-            title: 'Standards & Proposals',
-            url: 'https://github.com/near/NEPs',
-          },
         ],
       },
     ],
   },
 
   {
-    title: 'Community',
+    title: 'Ecosystem',
     visible: 'all',
     sections: [
       {
-        title: 'Ecosystem',
+        title: null,
         links: [
           {
             title: 'Overview',
             url: '/ecosystem',
           },
+          {
+            title: 'People',
+            url: '/people',
+          },
           {
             title: 'News',
-            url: 'https://near.org/nearweekapp.near/widget/nearweek-news',
+            url: '/nearweekapp.near/widget/nearweek-news',
           },
           {
             title: 'Events',
@@ -167,15 +109,6 @@ export const navigationCategories = [
           },
         ],
       },
-      {
-        title: 'Discover',
-        links: [
-          {
-            title: 'People',
-            url: '/people',
-          },
-        ],
-      },
     ],
   },