From 6a695d9db6189511814cc729ae3c0ea8919c14fb Mon Sep 17 00:00:00 2001
From: Erik van Sebille <erikvansebille@gmail.com>
Date: Fri, 6 Mar 2026 12:51:02 +0100
Subject: [PATCH 1/2] Fixing multi-line menu items

---
 src/components/desktop-nav.js | 2 ++
 src/components/mobile-nav.js  | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/src/components/desktop-nav.js b/src/components/desktop-nav.js
index bbff9a68..97753c75 100644
--- a/src/components/desktop-nav.js
+++ b/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',
diff --git a/src/components/mobile-nav.js b/src/components/mobile-nav.js
index 9d7e619c..d3029e64 100644
--- a/src/components/mobile-nav.js
+++ b/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'}
         >

From eae55a608024c9f3e4799be3201f9b293fd06d59 Mon Sep 17 00:00:00 2001
From: Erik van Sebille <erikvansebille@gmail.com>
Date: Fri, 6 Mar 2026 12:52:24 +0100
Subject: [PATCH 2/2] Fix overlap of light/dark switch on menu bar

---
 src/components/header.js | 9 ++++++++-
 src/pages/_app.js        | 2 --
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/header.js b/src/components/header.js
index 064f5bff..a0203a63 100644
--- a/src/components/header.js
+++ b/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>
diff --git a/src/pages/_app.js b/src/pages/_app.js
index 961b8f0b..1c027c3b 100644
--- a/src/pages/_app.js
+++ b/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>
   )