Chore: Navbar social links in dropdown menu (#676)

* refactored navbar social links to dropdown menu

* fixed nested dropdown

* refactored navbar dropdown link styles

* nested icon into anchor, added light/darkmode to icon

* added light/dark mode to social icons

apps/base-docs/docusaurus.config.js

@@ -316,6 +316,40 @@ const config = {
             },
           ],
         },
+        {
+          type: 'dropdown',
+          label: 'Socials',
+          navposition: 'topRight',
+          items: [
+            {
+              label: 'Discord',
+              icon: 'discord',
+              type: 'custom-dropdownLink',
+              target: '_blank',
+              to: "https://discord.com/invite/buildonbase",
+              eventLabel: 'socials_discord',
+              eventContext: 'navbar',
+            },
+            {
+              label: 'Twitter',
+              icon: 'twitter',
+              type: 'custom-dropdownLink',
+              target: '_blank',
+              to: "https://www.twitter.com/base",
+              eventLabel: 'socials_twitter',
+              eventContext: 'navbar',
+            },
+            {
+              label: 'Github',
+              icon: 'github',
+              type: 'custom-dropdownLink',
+              target: '_blank',
+              to: "https://www.github.com/base-org",
+              eventLabel: 'socials_github',
+              eventContext: 'navbar',
+            },
+          ]
+        },
         // Langauge selection dropdown will be supported in the future
         // {
         //   type: 'localeDropdown',

apps/base-docs/src/components/Icon/index.tsx

@@ -20,9 +20,10 @@ type IconProps = {
     | 'close';
   width?: string;
   height?: string;
+  color: 'white' | 'black';
 };
 
-export default function Icon({ name, width = '24', height = '24' }: IconProps) {
+export default function Icon({ name, width = '24', height = '24', color }: IconProps) {
   if (name === 'thumbs-up') {
     return (
       <svg
@@ -243,12 +244,12 @@ export default function Icon({ name, width = '24', height = '24' }: IconProps) {
         width="24"
         height="20"
         viewBox="0 0 24 20"
-        fill="current"
+        fill="none"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
           d="M20.3303 2.42851C18.7535 1.7066 17.0888 1.19445 15.3789 0.905151C15.1449 1.32344 14.9332 1.7538 14.7446 2.19444C12.9232 1.91997 11.071 1.91997 9.24961 2.19444C9.06095 1.75385 8.84924 1.32349 8.61535 0.905151C6.90433 1.1969 5.2386 1.71026 3.66019 2.43228C0.526644 7.06842 -0.322811 11.5894 0.101917 16.0462C1.937 17.4021 3.99098 18.4332 6.17458 19.0948C6.66626 18.4335 7.10134 17.732 7.47519 16.9976C6.76511 16.7324 6.07975 16.4052 5.42706 16.0198C5.59884 15.8952 5.76684 15.7668 5.92918 15.6423C7.82837 16.5354 9.90124 16.9985 12 16.9985C14.0987 16.9985 16.1715 16.5354 18.0707 15.6423C18.235 15.7763 18.403 15.9046 18.5729 16.0198C17.9189 16.4058 17.2323 16.7337 16.5209 16.9995C16.8943 17.7335 17.3294 18.4345 17.8216 19.0948C20.007 18.4359 22.0626 17.4052 23.898 16.0481C24.3963 10.8796 23.0467 6.40019 20.3303 2.42851ZM8.01318 13.3053C6.82961 13.3053 5.85179 12.2312 5.85179 10.9099C5.85179 9.58848 6.79563 8.50495 8.0094 8.50495C9.22318 8.50495 10.1934 9.58848 10.1727 10.9099C10.1519 12.2312 9.21941 13.3053 8.01318 13.3053ZM15.9867 13.3053C14.8013 13.3053 13.8272 12.2312 13.8272 10.9099C13.8272 9.58848 14.7711 8.50495 15.9867 8.50495C17.2024 8.50495 18.1651 9.58848 18.1444 10.9099C18.1236 12.2312 17.193 13.3053 15.9867 13.3053Z"
-          fill="current"
+          fill={color}
         />
       </svg>
     );
@@ -259,12 +260,12 @@ export default function Icon({ name, width = '24', height = '24' }: IconProps) {
         width="24"
         height="20"
         viewBox="0 0 24 20"
-        fill="current"
+        fill="none"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
           d="M21.543 5.10412C21.5576 5.3157 21.5576 5.52728 21.5576 5.74081C21.5576 12.2471 16.6045 19.7508 7.54759 19.7508V19.7469C4.87215 19.7508 2.25229 18.9844 0 17.5395C0.389031 17.5863 0.780012 17.6097 1.17197 17.6106C3.38915 17.6126 5.54296 16.8687 7.28726 15.4988C5.18026 15.4588 3.3326 14.085 2.68714 12.0794C3.42523 12.2217 4.18574 12.1925 4.91018 11.9946C2.61304 11.5304 0.96039 9.51217 0.96039 7.16823V7.10583C1.64485 7.48706 2.41121 7.69864 3.19513 7.72204C1.03157 6.27609 0.364656 3.39785 1.67118 1.14751C4.17112 4.22369 7.8596 6.09377 11.8191 6.29169C11.4223 4.58152 11.9644 2.78944 13.2436 1.58724C15.2268 -0.276985 18.3459 -0.181433 20.2101 1.80077C21.3129 1.58334 22.3698 1.17871 23.337 0.605404C22.9694 1.7452 22.2001 2.71339 21.1725 3.32862C22.1484 3.21357 23.102 2.95227 24 2.55348C23.3389 3.5441 22.5063 4.40699 21.543 5.10412Z"
-          fill="current"
+          fill={color}
         />
       </svg>
     );
@@ -275,14 +276,14 @@ export default function Icon({ name, width = '24', height = '24' }: IconProps) {
         width={width}
         height={height}
         viewBox="0 0 24 24"
-        fill="current"
+        fill="none"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
           fillRule="evenodd"
           clipRule="evenodd"
           d="M12.0099 0.199951C5.36875 0.199951 0 5.60828 0 12.2991C0 17.6475 3.43994 22.1747 8.21205 23.7771C8.80869 23.8975 9.02724 23.5167 9.02724 23.1964C9.02724 22.9159 9.00757 21.9545 9.00757 20.9527C5.6667 21.674 4.97099 19.5104 4.97099 19.5104C4.43409 18.1082 3.63858 17.7478 3.63858 17.7478C2.54511 17.0066 3.71823 17.0066 3.71823 17.0066C4.93117 17.0867 5.56763 18.2485 5.56763 18.2485C6.64118 20.0913 8.37111 19.5706 9.06706 19.25C9.16638 18.4688 9.48473 17.928 9.82275 17.6275C7.15817 17.3471 4.35469 16.3055 4.35469 11.658C4.35469 10.3359 4.8316 9.25423 5.58729 8.41299C5.46807 8.11258 5.0504 6.87039 5.70677 5.20782C5.70677 5.20782 6.72083 4.88725 9.00732 6.44977C9.98625 6.18492 10.9958 6.05019 12.0099 6.04906C13.024 6.04906 14.0577 6.18943 15.0123 6.44977C17.299 4.88725 18.3131 5.20782 18.3131 5.20782C18.9695 6.87039 18.5515 8.11258 18.4323 8.41299C19.2079 9.25423 19.6652 10.3359 19.6652 11.658C19.6652 16.3055 16.8617 17.3269 14.1772 17.6275C14.6148 18.0081 14.9924 18.7291 14.9924 19.871C14.9924 21.4935 14.9727 22.7957 14.9727 23.1962C14.9727 23.5167 15.1915 23.8975 15.7879 23.7773C20.56 22.1745 23.9999 17.6475 23.9999 12.2991C24.0196 5.60828 18.6312 0.199951 12.0099 0.199951Z"
-          fill="current"
+          fill={color}
         />
       </svg>
     );
@@ -293,20 +294,20 @@ export default function Icon({ name, width = '24', height = '24' }: IconProps) {
         width={width}
         height={height}
         viewBox="0 0 24 22"
-        fill="current"
+        fill="none"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
           d="M4.11859 0.043457H19.5979V21.9565H17.3257V11.9189H17.3034C17.0523 9.14476 14.7103 6.97081 11.8582 6.97081C9.00619 6.97081 6.66419 9.14476 6.41307 11.9189H6.39078V21.9565H4.11859V0.043457Z"
-          fill="current"
+          fill={color}
         />
         <path
           d="M0.000244141 3.1537L0.923321 6.26393H1.70439V18.8463C1.31223 18.8463 0.994327 19.1627 0.994327 19.5531V20.4014H0.852315C0.46016 20.4014 0.142256 20.7179 0.142256 21.1083V21.9565H8.09492V21.1083C8.09492 20.7179 7.77702 20.4014 7.38486 20.4014H7.24285V19.5531C7.24285 19.1627 6.92494 18.8463 6.53279 18.8463H5.68072V3.1537H0.000244141Z"
-          fill="current"
+          fill={color}
         />
         <path
           d="M17.4677 18.8463C17.0755 18.8463 16.7576 19.1627 16.7576 19.5531V20.4014H16.6156C16.2235 20.4014 15.9056 20.7179 15.9056 21.1083V21.9565H23.8582V21.1083C23.8582 20.7179 23.5403 20.4014 23.1482 20.4014H23.0062V19.5531C23.0062 19.1627 22.6883 18.8463 22.2961 18.8463V6.26393H23.0772L24.0002 3.1537H18.3198V18.8463H17.4677Z"
-          fill="current"
+          fill={color}
         />
       </svg>
     );

apps/base-docs/src/css/navbar.css

@@ -34,10 +34,10 @@
 }
 
 /* Enable if dropdown menus overflow right boundary */
-/* .navbar__items--right .dropdown__menu {
+.navbar__items--right .dropdown__menu {
   left: auto !important;
   right: 0 !important;
-} */
+}
 
 .navbar__item,
 .navbar__link {
@@ -76,8 +76,8 @@
   background-color: rgb(var(--gray100));
 }
 
+
 .dropdown__link {
-  padding: 20px var(--spacing-5);
   color: rgb(var(--gray0)) !important;
   font-size: var(--title3-font-size);
   line-height: var(--title3-line-height);
@@ -87,6 +87,13 @@
 .dropdown__link:hover {
   text-decoration: underline;
 }
+.dropdown__link--content {
+  padding: 10px var(--spacing-5);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 1rem;
+}
 
 /* Dropdown Caret Icon */
 .dropdown .navbar__link::after {
@@ -103,7 +110,6 @@
 }
 
 /* Hide External Link Icons */
-.dropdown__link svg,
 .navbar__link svg {
   display: none;
 }

apps/base-docs/src/theme/Navbar/Content/index.js

@@ -1,17 +1,17 @@
 import React, { useCallback } from 'react';
 import { useThemeConfig, ErrorCauseBoundary } from '@docusaurus/theme-common';
 import { useNavbarMobileSidebar } from '@docusaurus/theme-common/internal';
-import NavbarItem from '@theme/NavbarItem';
-import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
-import SearchBar from '@theme/SearchBar';
-import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle';
-import NavbarLogo from '@theme/Navbar/Logo';
-import NavbarSearch from '@theme/Navbar/Search';
-import styles from './styles.module.css';
 
-import Icon from '../../../components/Icon';
+import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
+import NavbarItem from '@theme/NavbarItem';
+import NavbarLogo from '@theme/Navbar/Logo';
+import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle';
+import NavbarSearch from '@theme/Navbar/Search';
+import SearchBar from '@theme/SearchBar';
+
 import { CustomConnectButton } from '../../NavbarItem/ComponentTypes';
-import logEvent, { ActionType, AnalyticsEventImportance, ComponentType } from "base-ui/utils/logEvent";
+import Icon from '../../../components/Icon';
+import styles from './styles.module.css';
 
 function useNavbarItems() {
   // TODO temporary casting until ThemeConfig type is improved
@@ -40,77 +40,10 @@ ${JSON.stringify(item, null, 2)}`,
   );
 }
 function NavbarLayoutTopContent({ left, right }) {
-  const discordClick = useCallback(() => {
-    logEvent(
-      'social_discord',
-      {
-        action: ActionType.click,
-        component: ComponentType.icon,
-        context: 'navbar',
-      },
-      AnalyticsEventImportance.low
-    );
-  }, [logEvent])
-
-  const twitterClick = useCallback(() => {
-    logEvent(
-      'social_twitter',
-      {
-        action: ActionType.click,
-        component: ComponentType.icon,
-        context: 'navbar',
-      },
-      AnalyticsEventImportance.low
-    );  }, [logEvent])
-
-  const githubClick = useCallback(() => {
-    logEvent(
-      'social_github',
-      {
-        action: ActionType.click,
-        component: ComponentType.icon,
-        context: 'navbar',
-      },
-      AnalyticsEventImportance.low
-    );
-  }, [logEvent])
-
-
   return (
     <div className="navbar__inner">
       <div className="navbar__items">{left}</div>
-      <div className="navbar__items navbar__items--right">
-        {right}
-        <div className="navbar__social__links">
-          <a
-            href="https://discord.com/invite/buildonbase"
-            target="_blank"
-            rel="noreferrer"
-            aria-label="Base on Discord"
-            onClick={discordClick}
-          >
-            <Icon name="discord" />
-          </a>
-          <a
-            href="https://www.twitter.com/base"
-            target="_blank"
-            rel="noreferrer"
-            aria-label="Base on Twitter"
-            onClick={twitterClick}
-          >
-            <Icon name="twitter" />
-          </a>
-          <a
-            href="https://www.github.com/base-org"
-            target="_blank"
-            rel="noreferrer"
-            aria-label="Base on Github"
-            onClick={githubClick}
-          >
-            <Icon name="github" />
-          </a>
-        </div>
-      </div>
+      <div className="navbar__items navbar__items--right">{right}</div>
     </div>
   );
 }

apps/base-docs/src/theme/NavbarItem/ComponentTypes.js

@@ -1,5 +1,8 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useAccount } from 'wagmi';
+import { ConnectButton } from '@rainbow-me/rainbowkit';
+import '@rainbow-me/rainbowkit/styles.css';
+import { useColorMode } from '@docusaurus/theme-common';
 
 import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
 import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
@@ -10,17 +13,18 @@ import DocNavbarItem from '@theme/NavbarItem/DocNavbarItem';
 import DocSidebarNavbarItem from '@theme/NavbarItem/DocSidebarNavbarItem';
 import DocsVersionNavbarItem from '@theme/NavbarItem/DocsVersionNavbarItem';
 import DocsVersionDropdownNavbarItem from '@theme/NavbarItem/DocsVersionDropdownNavbarItem';
-import { ConnectButton } from '@rainbow-me/rainbowkit';
-import '@rainbow-me/rainbowkit/styles.css';
-import styles from './styles.module.css';
-import { WalletAvatar } from '../../components/WalletAvatar';
+
+import sanitizeEventString from 'base-ui/utils/sanitizeEventString';
 import logEvent, {
   ActionType,
   AnalyticsEventImportance,
   ComponentType,
   identify,
 } from 'base-ui/utils/logEvent';
-import sanitizeEventString from 'base-ui/utils/sanitizeEventString';
+
+import styles from './styles.module.css';
+import { WalletAvatar } from '../../components/WalletAvatar';
+import Icon from '../../components/Icon';
 
 export const CustomConnectButton = ({ className }) => {
   return (
@@ -171,6 +175,15 @@ export const CustomNavbarLink = (props) => {
 };
 
 export const CustomDropdownLink = (props) => {
+  const [iconColor, setIconColor] = useState('');
+  const { colorMode } = useColorMode();
+
+  useEffect(() => {
+    setIconColor(
+      colorMode === 'dark' ? 'black' : 'white'
+    )
+  }, [colorMode]);
+
   return (
     <li>
       <a
@@ -190,7 +203,10 @@ export const CustomDropdownLink = (props) => {
           );
         }}
       >
-        {props.label}
+        <div className="dropdown__link--content">
+          {props.icon && <Icon name={props.icon} width="24" height="24" color={iconColor} />}
+          <span>{props.label}</span>
+        </div>
       </a>
     </li>
   );