Added the coming soon label.

components/donateButton.tsx

@@ -1,17 +1,17 @@
-import Link from 'next/link'
 import { Button } from '@chakra-ui/react'
 
 export default function DonateButton() {
+  const handleClick = () => {
+    window.open('https://opencollective.com/open-austin', '_blank')
+  }
+
   return (
-    <Link
-      href="https://opencollective.com/open-austin"
-      target="_blank"
-      rel="noreferrer"
-      passHref
+    <Button
+      variant="primary"
+      display={{ base: 'none', md: 'inline-flex' }}
+      onClick={handleClick}
     >
-      <Button variant="primary" display={{ base: 'none', md: 'inline-flex' }} as="a">
-        Donate
-      </Button>
-    </Link>
+      Donate
+    </Button>
   )
 }

components/header.tsx

@@ -1,4 +1,4 @@
-import Image from 'next/image'
+import Image from 'next/image';
 import {
   Box,
   Flex,
@@ -14,19 +14,19 @@ import {
   useColorModeValue,
   useDisclosure,
   Badge,
-} from '@chakra-ui/react'
+} from '@chakra-ui/react';
 import {
   HamburgerIcon,
   CloseIcon,
   ChevronDownIcon,
   ChevronRightIcon,
-} from '@chakra-ui/icons'
-import DonateButton from './donateButton'
-import DarkModeSwitch from './darkModeSwitch'
-import { Link as NextLink } from './link'
+} from '@chakra-ui/icons';
+import DonateButton from './donateButton';
+import DarkModeSwitch from './darkModeSwitch';
+import { Link as NextLink } from './link';
 
 export const Header = () => {
-  const { isOpen, onToggle } = useDisclosure()
+  const { isOpen, onToggle } = useDisclosure();
 
   return (
     <Box>
@@ -55,7 +55,7 @@ export const Header = () => {
             aria-label={'Toggle Navigation'}
           />
         </Flex>
-        <Flex flex={{ base: 1 }} justify={{ base: 'center', md: 'start' }}>
+        <Flex flex={{ base9: 1 }} justify={{ base: 'center', md: 'start' }}>
           <Link href="/">
             <Image
               alt="Open Austin's logo; a five-pointed star in orange and black"
@@ -85,13 +85,13 @@ export const Header = () => {
         <MobileNav />
       </Collapse>
     </Box>
-  )
-}
+  );
+};
 
 const DesktopNav = () => {
-  const linkColor = useColorModeValue('gray.600', 'gray.200')
-  const linkHoverColor = useColorModeValue('gray.800', 'white')
-  const popoverContentBgColor = useColorModeValue('white', 'gray.800')
+  const linkColor = useColorModeValue('gray.600', 'gray.200');
+  const linkHoverColor = useColorModeValue('gray.800', 'white');
+  const popoverContentBgColor = useColorModeValue('white', 'gray.800');
 
   return (
     <Stack direction={'row'} spacing={8} align="center">
@@ -136,8 +136,8 @@ const DesktopNav = () => {
         </Box>
       ))}
     </Stack>
-  )
-}
+  );
+};
 
 const DesktopSubNav = ({ label, href, subLabel, wip }: NavItem) => {
   return (
@@ -190,8 +190,8 @@ const DesktopSubNav = ({ label, href, subLabel, wip }: NavItem) => {
         </Flex>
       </Stack>
     </Link>
-  )
-}
+  );
+};
 
 const MobileNav = () => {
   return (
@@ -204,11 +204,11 @@ const MobileNav = () => {
         <MobileNavItem key={navItem.label} {...navItem} />
       ))}
     </Stack>
-  )
-}
+  );
+};
 
 const MobileNavItem = ({ label, children, href }: NavItem) => {
-  const { isOpen, onToggle } = useDisclosure()
+  const { isOpen, onToggle } = useDisclosure();
 
   return (
     <Stack layerStyle="ns" onClick={children && onToggle}>
@@ -264,17 +264,17 @@ const MobileNavItem = ({ label, children, href }: NavItem) => {
         </Stack>
       </Collapse>
     </Stack>
-  )
-}
+  );
+};
 
 type NavItem = {
-  label: string
-  subLabel?: string
-  children?: Array<NavItem>
-  href?: string
-  external?: boolean
-  wip?: boolean
-}
+  label: string;
+  subLabel?: string;
+  children?: Array<NavItem>;
+  href?: string;
+  external?: boolean;
+  wip?: boolean;
+};
 
 const NAV_ITEMS: ReadonlyArray<NavItem> = [
   {
@@ -307,8 +307,9 @@ const NAV_ITEMS: ReadonlyArray<NavItem> = [
     children: [
       {
         label: 'Join Slack',
-        href: 'https://slack.open-austin.org/',
+        href: '#',
         external: true,
+        wip: true,
       },
       {
         label: 'Onboarding',
@@ -346,4 +347,6 @@ const NAV_ITEMS: ReadonlyArray<NavItem> = [
       },
     ],
   },
-]
+];
+
+export default Header;