From 564bf78b019283b0fd4736af95470f9aa0b6301f Mon Sep 17 00:00:00 2001
From: Habib Deriv <88178645+habib-deriv@users.noreply.github.com>
Date: Fri, 13 Oct 2023 11:27:31 +0400
Subject: [PATCH] Revert "Hasan/fix: hero image flickering (#5716)" (#5775)

This reverts commit f07b2191ec734212159b7c85a1b4388dc0b3aa1c.
---
 gatsby-browser.js                                     |  8 ++++++++
 .../templates/navigation/template/index.tsx           | 11 +++++++----
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/gatsby-browser.js b/gatsby-browser.js
index 2dc049b457e..e1056afcdb9 100644
--- a/gatsby-browser.js
+++ b/gatsby-browser.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import { createRoot } from 'react-dom/client'
 import { WrapPagesWithLocaleContext } from './src/components/localization'
 import { isProduction } from './src/common/websocket/config'
 import { LocalStore } from './src/common/storage'
@@ -141,4 +142,11 @@ export const onRouteUpdate = () => {
     }, 1500)
 }
 
+export const replaceHydrateFunction = () => {
+    return (element, container) => {
+        const root = createRoot(container)
+        root.render(element)
+    }
+}
+
 export const wrapPageElement = WrapPagesWithLocaleContext
diff --git a/src/features/components/templates/navigation/template/index.tsx b/src/features/components/templates/navigation/template/index.tsx
index 47746712110..f517004a72b 100644
--- a/src/features/components/templates/navigation/template/index.tsx
+++ b/src/features/components/templates/navigation/template/index.tsx
@@ -101,10 +101,13 @@ const NavTemplate = ({
 
                     {has_items ? (
                         <>
-                            <span ref={nav_wrapper_ref}>
-                                <MobileMenu has_top_nav={has_top_nav} />
-                            </span>
-                            <DesktopMenu has_centered_items={has_centered_items} />
+                            {is_mobile_or_tablet ? (
+                                <span ref={nav_wrapper_ref}>
+                                    <MobileMenu has_top_nav={has_top_nav} />
+                                </span>
+                            ) : (
+                                <DesktopMenu has_centered_items={has_centered_items} />
+                            )}
                         </>
                     ) : null}
                     {children}