Fix overlap of light/dark switch on menu bar

Author: erikvansebille

src/components/header.js

@@ -2,7 +2,7 @@ import { DesktopNav } from '@/components/desktop-nav'
 import { Link } from '@/components/mdx'
 import { MobileNav } from '@/components/mobile-nav'
 import { menuItems } from '@/data/menu-items'
-import { CloseIcon, HamburgerIcon } from '@chakra-ui/icons'
+import { CloseIcon, HamburgerIcon, MoonIcon, SunIcon } from '@chakra-ui/icons'
 import {
   Box,
   Container,
@@ -95,6 +95,13 @@ export const Header = () => {
               navItems={navItems}
               display={{ base: 'none', md: 'flex' }}
             />
+            <IconButton
+              aria-label={`Switch to ${colorMode === 'light' ? 'dark' : 'light'} mode`}
+              icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
+              onClick={toggleColorMode}
+              variant={'ghost'}
+              size={'sm'}
+            />
           </Stack>
         </Container>
       </Flex>

src/pages/_app.js

@@ -4,7 +4,6 @@ import { ChakraProvider } from '@chakra-ui/react'
 import { useRouter } from 'next/router'
 import Script from 'next/script'
 import { useEffect } from 'react'
-import { ColorModeToggle } from '@/components/ColorModeToggle'
 
 function MyApp({ Component, pageProps }) {
   const router = useRouter()
@@ -42,7 +41,6 @@ function MyApp({ Component, pageProps }) {
         }}
       />
 
-      <ColorModeToggle />
       <Component {...pageProps} />
     </ChakraProvider>
   )