From 1d3e7dc02fb766f6dafbe163ffdbd82482bf5305 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Mon, 4 Jul 2022 14:20:19 +0300
Subject: [PATCH] Fix menu visibile on initial load due to SSR

---
 app/components/layout/Menu.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/app/components/layout/Menu.tsx b/app/components/layout/Menu.tsx
index f31015814..67267e9d0 100644
--- a/app/components/layout/Menu.tsx
+++ b/app/components/layout/Menu.tsx
@@ -2,8 +2,8 @@ import clsx from "clsx";
 import { Link } from "@remix-run/react";
 import navItems from "./nav-items.json";
 import { Image } from "../Image";
+import { useIsMounted } from "~/hooks/useIsMounted";
 
-// xxx: overflows but maybe on chrome mobile emulator only?
 export function Menu({
   expanded,
   closeMenu,
@@ -11,6 +11,11 @@ export function Menu({
   expanded: boolean;
   closeMenu: () => void;
 }) {
+  const isMounted = useIsMounted();
+
+  // without this menu is initially visible due to SSR and not knowing user screen width on server (probably)
+  if (!isMounted) return null;
+
   return (
     <nav className={clsx("layout__menu", { expanded })} aria-hidden={!expanded}>
       <div className="layout__menu__links">