Merge pull request #268 from Parcels-code/menu-bar-fixes

Menu bar fixes: avoid light/dark switch overlap and multiline menu items

Author: erikvansebille

src/components/desktop-nav.js

@@ -25,6 +25,8 @@ export const DesktopNav = ({ navItems, ...props }) => {
                 fontSize={'sm'}
                 fontWeight={'bold'}
                 // eslint-disable-next-line react-hooks/rules-of-hooks
+                whiteSpace={'nowrap'}
+                flexShrink={0}
                 color={useColorModeValue('gray.600', 'gray.200')}
                 _hover={{
                   textDecoration: 'none',

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/components/mobile-nav.js

@@ -35,6 +35,7 @@ const MobileNavItem = ({ href, children, label }) => {
       >
         <Text
           fontWeight={600}
+          whiteSpace={'nowrap'}
           color={useColorModeValue('gray.600', 'gray.200')}
         >
           {label}
@@ -56,6 +57,7 @@ const MobileNavItem = ({ href, children, label }) => {
           pl={4}
           borderLeft={1}
           borderStyle={'solid'}
+          whiteSpace={'nowrap'}
           borderColor={useColorModeValue('gray.200', 'gray.700')}
           align={'start'}
         >

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>
   )