Merge pull request #1219 from near/chore/bring-top-nav-back

chore: reduce amount of search categories (Part 2/2)
near · Jun 28, 2024 · 422a6fd · 422a6fd
2 parents feeb34a + d86899f
commit 422a6fd
Show file tree

Hide file tree

Showing 7 changed files with 190 additions and 99 deletions.
diff --git a/src/components/layouts/DefaultLayout.tsx b/src/components/layouts/DefaultLayout.tsx
@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { BosLoaderBanner } from '../BosLoaderBanner';
 import { MarketingNavigation } from '../marketing-navigation/MarketingNavigation';
 import { useSidebarLayoutEnabled } from '../sidebar-navigation/hooks';
-import { LargeScreenHeader } from '../sidebar-navigation/LargeScreenHeader';
+// import { LargeScreenHeader } from '../sidebar-navigation/LargeScreenHeader';
 import { SidebarNavigation } from '../sidebar-navigation/SidebarNavigation';
 import { useNavigationStore } from '../sidebar-navigation/store';
 import { SMALL_SCREEN_LAYOUT_MAX_WIDTH } from '../sidebar-navigation/utils';

diff --git a/src/components/sidebar-navigation/LargeScreenHeader.tsx b/src/components/sidebar-navigation/LargeScreenHeader.tsx
@@ -6,7 +6,6 @@ import { useAuthStore } from '@/stores/auth';
 
 import { Button } from '../lib/Button';
 import { VmComponent } from '../vm/VmComponent';
-import { LargeScreenNotificationButton } from './LargeScreenNotificationButton';
 import { LargeScreenProfileDropdown } from './LargeScreenProfileDropdown';
 import { useNavigationStore } from './store';
 import * as S from './styles';
@@ -47,7 +46,6 @@ export const LargeScreenHeader = () => {
           title: currentPageTitle,
           rightSideChildren: signedIn ? (
             <>
-              <LargeScreenNotificationButton />
               <LargeScreenProfileDropdown />
             </>
           ) : (

diff --git a/src/components/sidebar-navigation/LargeScreenProfileDropdown.tsx b/src/components/sidebar-navigation/LargeScreenProfileDropdown.tsx
@@ -20,7 +20,7 @@ export const LargeScreenProfileDropdown = () => {
   }, [near]);
 
   return (
-    <S.LargeScreenHeaderActionWrapper>
+    <S.LargeScreenHeaderActionWrapper $width="100%" $justifyContent="start">
       <VmComponent
         src={components.navigation.profileDropdown}
         props={{

diff --git a/src/components/sidebar-navigation/Search.tsx b/src/components/sidebar-navigation/Search.tsx
@@ -0,0 +1,18 @@
+import { useBosComponents } from '@/hooks/useBosComponents';
+
+import { VmComponent } from '../vm/VmComponent';
+import * as S from './styles';
+
+export const Search = () => {
+  const components = useBosComponents();
+  return (
+    <S.SearchWrapper>
+      <VmComponent
+        src={components.navigation.search}
+        props={{
+          placeholder: 'Search for apps...',
+        }}
+      />
+    </S.SearchWrapper>
+  );
+};
diff --git a/src/components/sidebar-navigation/Sidebar.tsx b/src/components/sidebar-navigation/Sidebar.tsx
@@ -1,34 +1,34 @@
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 
+import { useSignInRedirect } from '@/hooks/useSignInRedirect';
+import { useAuthStore } from '@/stores/auth';
+
 import { Tooltip } from '../lib/Tooltip';
 import NearIconSvg from './icons/near-icon.svg';
-// import { PinnedApps } from './PinnedApps';
+import { LargeScreenProfileDropdown } from './LargeScreenProfileDropdown';
+import { Search } from './Search';
 import { useNavigationStore } from './store';
 import * as S from './styles';
 import { currentPathMatchesRoute } from './utils';
-import { LargeScreenProfileDropdown } from './LargeScreenProfileDropdown';
-import { LargeScreenNameDropdown } from './LargeScreenNameDropdown';
-import { useSignInRedirect } from '@/hooks/useSignInRedirect';
-import { useAuthStore } from '@/stores/auth';
 
 export const Sidebar = () => {
   const router = useRouter();
   const expandedDrawer = useNavigationStore((store) => store.expandedDrawer);
   const isSidebarExpanded = useNavigationStore((store) => store.isSidebarExpanded && !store.expandedDrawer);
   const isOpenedOnSmallScreens = useNavigationStore((store) => store.isOpenedOnSmallScreens);
   const toggleExpandedSidebar = useNavigationStore((store) => store.toggleExpandedSidebar);
-  // const toggleExpandedDrawer = useNavigationStore((store) => store.toggleExpandedDrawer);
   const handleBubbledClickInSidebar = useNavigationStore((store) => store.handleBubbledClickInSidebar);
-  const { requestAuthentication } = useSignInRedirect();
   const tooltipsDisabled = isSidebarExpanded;
   const signedIn = useAuthStore((store) => store.signedIn);
-  const signedAccountId = useAuthStore((store) => store.accountId);
+  const { requestAuthentication } = useSignInRedirect();
 
-  const handleSignIn = () => {
+  const handleCreateAccount = () => {
     requestAuthentication(true);
   };
 
+  console.log('signedIn: ', signedIn);
+
   const isNavigationItemActive = (route: string | string[], exactMatch = false) => {
     if (expandedDrawer) return false;
     return currentPathMatchesRoute(router.asPath, route, exactMatch);
@@ -51,6 +51,13 @@ export const Sidebar = () => {
           </S.ToggleExpandButton>
         </S.Top>
 
+        <S.SearchSection $expanded={isSidebarExpanded}>
+          <Search />
+          <S.SearchIconWrapper $expanded={isSidebarExpanded}>
+            <i className="ph-bold ph-magnifying-glass" />
+          </S.SearchIconWrapper>
+        </S.SearchSection>
+
         <S.Section>
           <S.Stack $gap="0.5rem">
             <Tooltip content="Home" side="right" disabled={tooltipsDisabled}>
@@ -60,12 +67,6 @@ export const Sidebar = () => {
               </S.NavigationItem>
             </Tooltip>
 
-            {/* <Tooltip content="Activity" side="right" disabled={tooltipsDisabled}>
-              <S.NavigationItem $active={isNavigationItemActive('/activity')} $type="featured" href="/activity">
-                <i className="ph-bold ph-pulse" />
-                <span>Activity</span>
-              </S.NavigationItem>
-            </Tooltip> */}
             <Tooltip content="Documentation" side="right" disabled={tooltipsDisabled}>
               <S.NavigationItem
                 $active={isNavigationItemActive('/documentation')}
@@ -83,25 +84,9 @@ export const Sidebar = () => {
                 <span>Support</span>
               </S.NavigationItem>
             </Tooltip>
-
-            {/* <Tooltip content="Discover" side="right" disabled={tooltipsDisabled}>
-              <S.NavigationItem
-                as="button"
-                type="button"
-                $active={isNavigationItemActive(['/applications', '/components', '/gateways'])}
-                $expanded={expandedDrawer === 'discover'}
-                $type="featured"
-                onClick={(event) => toggleExpandedDrawer('discover', event)}
-              >
-                <i className="ph-bold ph-shapes" />
-                <span>Discover</span>
-              </S.NavigationItem>
-            </Tooltip> */}
           </S.Stack>
         </S.Section>
 
-        {/* <PinnedApps /> */}
-
         <S.Section>
           <S.SectionLabel>Discover </S.SectionLabel>
 
@@ -121,20 +106,6 @@ export const Sidebar = () => {
               </S.NavigationItem>
             </Tooltip>
 
-            {/* <Tooltip content="More" side="right" disabled={tooltipsDisabled}>
-              <S.NavigationItem
-                as="button"
-                type="button"
-                $active={false}
-                $expanded={expandedDrawer === 'marketing'}
-                $type="featured"
-                onClick={(event) => toggleExpandedDrawer('marketing', event)}
-              >
-                <i className="ph-bold ph-dots-three-outline-vertical" />
-                <span>More</span>
-              </S.NavigationItem>
-            </Tooltip> */}
-
             <Tooltip content="News" side="right" disabled={tooltipsDisabled}>
               <S.NavigationItem
                 $active={isNavigationItemActive('/nearweekapp.near/widget/nearweek.com')}
@@ -197,30 +168,18 @@ export const Sidebar = () => {
           </S.Stack>
         </S.Section>
 
-        {/* TODO: Improve handling the sidebar opening */}
-        <S.LoginSection
-          onFocus={() => {
-            !isSidebarExpanded && toggleExpandedSidebar();
-          }}
-        >
+        <S.ProfileDropdownSection $expanded={isSidebarExpanded}>
           {signedIn ? (
-            <Tooltip content={signedAccountId} side="right" disabled={tooltipsDisabled}>
-              <S.LoginItem $active={false} $type="featured">
-                <LargeScreenProfileDropdown />
-                <LargeScreenNameDropdown />
-              </S.LoginItem>
-            </Tooltip>
+            <LargeScreenProfileDropdown />
           ) : (
             <Tooltip content="Sign-up or Login" side="right" disabled={tooltipsDisabled}>
-              <S.LoginItem $active={false} $type="featured" onClick={handleSignIn}>
-                <i className="ph-bold ph-keyhole" />
+              <S.LoginItem $active={false} $type="featured" onClick={handleCreateAccount}>
+                <i className="ph-bold ph-user" />
                 <span>Sign-up or Login</span>
               </S.LoginItem>
             </Tooltip>
           )}
-        </S.LoginSection>
-
-        {/* <LargeScreenProfileDropdown /> */}
+        </S.ProfileDropdownSection>
       </S.OverflowContainChild>
     </S.Sidebar>
   );

diff --git a/src/components/sidebar-navigation/SmallScreenHeader.tsx b/src/components/sidebar-navigation/SmallScreenHeader.tsx
@@ -1,17 +1,14 @@
 import Image from 'next/image';
-import { useCallback } from 'react';
 
 import { useBosComponents } from '@/hooks/useBosComponents';
 import { useSignInRedirect } from '@/hooks/useSignInRedirect';
 import { useAuthStore } from '@/stores/auth';
-import { useVmStore } from '@/stores/vm';
 
 import { Button } from '../lib/Button';
-import { VmComponent } from '../vm/VmComponent';
 import NearIconSvg from './icons/near-icon.svg';
+import { LargeScreenProfileDropdown } from './LargeScreenProfileDropdown';
 import { useNavigationStore } from './store';
 import * as S from './styles';
-import { LargeScreenProfileDropdown } from './LargeScreenProfileDropdown';
 
 export const SmallScreenHeader = () => {
   const components = useBosComponents();
@@ -20,26 +17,13 @@ export const SmallScreenHeader = () => {
   const setNavigation = useNavigationStore((store) => store.set);
   const showDrawerCollapse = useNavigationStore((store) => store.isOpenedOnSmallScreens && !!store.expandedDrawer);
   const expandedDrawerTitle = useNavigationStore((store) => store.expandedDrawerTitle);
-
-  const near = useVmStore((store) => store.near);
-  const availableStorage = useAuthStore((store) => store.availableStorage);
-  const availableStorageDisplay = availableStorage?.gte(10) ? availableStorage.div(1000).toFixed(2) : '0';
-  const logOut = useAuthStore((store) => store.logOut);
   const signedIn = useAuthStore((store) => store.signedIn);
   const { requestAuthentication } = useSignInRedirect();
 
-  const handleSignIn = () => {
-    requestAuthentication();
-  };
   const handleCreateAccount = () => {
     requestAuthentication(true);
   };
 
-  const withdrawTokens = useCallback(async () => {
-    if (!near) return;
-    await near.contract.storage_withdraw({}, undefined, '1');
-  }, [near]);
-
   return (
     <S.SmallScreenHeader>
       {showDrawerCollapse ? (
@@ -65,14 +49,9 @@ export const SmallScreenHeader = () => {
       )}
 
       {signedIn ? (
-        <S.SmallScreenHeaderActions $hidden={isOpenedOnSmallScreens}>
+        <S.SmallScreenHeaderActions $hidden={isOpenedOnSmallScreens} $gap="16px">
+          <Button label="search" icon="ph ph-magnifying-glass" variant="secondary" href={components.search.indexPage} />
           <LargeScreenProfileDropdown />
-
-          {/* <VmComponent
-            showLoadingSpinner={false}
-            src={components.navigation.smallScreenHeader}
-            props={{ availableStorage: availableStorageDisplay, withdrawTokens, logOut }}
-          /> */}
         </S.SmallScreenHeaderActions>
       ) : (
         <>