From 5de0c464f08d28c26e2e3db66b05d8296f00a893 Mon Sep 17 00:00:00 2001
From: Mythie <me@lucasjamessmith.me>
Date: Thu, 23 Nov 2023 13:57:08 +1100
Subject: [PATCH] fix: hydration errors for modifier key

---
 .../components/(dashboard)/layout/desktop-nav.tsx   | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/components/(dashboard)/layout/desktop-nav.tsx b/apps/web/src/components/(dashboard)/layout/desktop-nav.tsx
index 01bdec657..76077cb04 100644
--- a/apps/web/src/components/(dashboard)/layout/desktop-nav.tsx
+++ b/apps/web/src/components/(dashboard)/layout/desktop-nav.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import type { HTMLAttributes } from 'react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { Search } from 'lucide-react';
 
@@ -15,11 +15,14 @@ export type DesktopNavProps = HTMLAttributes<HTMLDivElement>;
 export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
   // const pathname = usePathname();
   const [open, setOpen] = useState(false);
+  const [modifierKey, setModifierKey] = useState(() => 'Ctrl');
 
-  const userAgent = typeof navigator !== 'undefined' ? navigator.userAgent : 'unknown';
+  useEffect(() => {
+    const userAgent = typeof navigator !== 'undefined' ? navigator.userAgent : 'unknown';
+    const isMacOS = /Macintosh|Mac\s+OS\s+X/i.test(userAgent);
 
-  const isMacOS = /Macintosh|Mac\s+OS\s+X/i.test(userAgent);
-  const modifierKey = isMacOS ? '⌘' : 'Ctrl';
+    setModifierKey(isMacOS ? '⌘' : 'Ctrl');
+  }, []);
 
   return (
     <div
@@ -39,7 +42,7 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
         </div>
 
         <div>
-          <div className="text-muted-foreground bg-muted rounded-md px-1.5 py-0.5 font-mono text-xs">
+          <div className="text-muted-foreground bg-muted flex items-center rounded-md px-1.5 py-0.5  text-xs tracking-wider">
             {modifierKey}+K
           </div>
         </div>