From a7e640320c8739fab0954a62dca50007e35ce1c2 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 11 Jul 2024 08:59:34 +0800
Subject: [PATCH] On smaller screens we want the nav menu to be disabled by
 default

---
 packages/web/lib/hooks/usePersistedState.tsx | 4 ++++
 packages/web/pages/l/[section].tsx           | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/packages/web/lib/hooks/usePersistedState.tsx b/packages/web/lib/hooks/usePersistedState.tsx
index 0aa5b6097..709fb9ff7 100644
--- a/packages/web/lib/hooks/usePersistedState.tsx
+++ b/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) {
diff --git a/packages/web/pages/l/[section].tsx b/packages/web/pages/l/[section].tsx
index 1def74370..9a0b96807 100644
--- a/packages/web/pages/l/[section].tsx
+++ b/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(() => {