On smaller screens we want the nav menu to be disabled by default

packages/web/lib/hooks/usePersistedState.tsx

@@ -4,10 +4,12 @@ export function usePersistedState<T>({
   key,
   initialValue,
   isSessionStorage,
+  defaultEvaluator,
 }: {
   key: string
   initialValue: T
   isSessionStorage?: boolean
+  defaultEvaluator?: () => T
 }): [T, (x: T | ((prev: T) => T)) => void, boolean] {
   // State to store our value
   // Pass initial state function to useState so logic is only executed once
@@ -27,6 +29,8 @@ export function usePersistedState<T>({
       // Parse stored json or if none return initialValue
       if (item) {
         setStoredValue(JSON.parse(item))
+      } else if (defaultEvaluator) {
+        setValue(defaultEvaluator())
       }
       setIsLoading(false)
     } catch (error) {

packages/web/pages/l/[section].tsx

@@ -9,6 +9,7 @@ import { LibraryContainer } from '../../components/templates/library/LibraryCont
 import { useMemo } from 'react'
 import { HighlightsContainer } from '../../components/nav-containers/HighlightsContainer'
 import { usePersistedState } from '../../lib/hooks/usePersistedState'
+import { isTouchScreenDevice } from '../../lib/deviceType'
 
 export default function Home(): JSX.Element {
   const router = useRouter()
@@ -19,6 +20,9 @@ export default function Home(): JSX.Element {
       key: 'nav-show-menu',
       isSessionStorage: false,
       initialValue: true,
+      defaultEvaluator: () => {
+        return !isTouchScreenDevice()
+      },
     })
 
   const section: NavigationSection | undefined = useMemo(() => {