I am not sure how to explain it so I'll provide mostly images, and paste the html from the inspector. But basically, I have two entirely separate parts of my HTML code, they are separated by curly braces and conditions. For some reason, when running the web app, ONLY FOR THE FIRST TIME after reloading, the two elements that are separated are combined. What I mean by this is that one element contains the subelements of the other one. This definitely shouldn't be the case, I added console.logs to verify that the correct item should be displayed and even tho it says ITEM A is being displayed, it is showing ITEM B and adds elements of ITEM A to it. I am super super super confused and you probably are too so I am just gonna leave the code here.
This is my code, it's navigation component with Sidebar that is always visible on desktop but on mobile you have a navbar with a menu icon, when the menu icon is clicked the sidebar expands and pushes the content.
import React, { useState } from "react";
import { useMediaQuery } from "react-responsive";
import {
BellIcon,
ChatAlt2Icon,
CogIcon,
MenuIcon,
} from "@heroicons/react/outline";
export const Sidebar: React.FC = ({ children }) => {
const [isOpen, setOpen] = useState(false);
const isLarge = useMediaQuery({ query: "(min-width: 768px)" });
console.log(isLarge);
return (
<div className={"flex flex-row w-screen h-screen"}>
{/* Sidebar starts */}
{(isOpen || isLarge) && (
<div
id="sidebar"
className={"relative w-64 bg-gray-800 h-screen"}
>
<div className="flex flex-col justify-between">
<div className="px-8">
<ul className="mt-12"></ul>
</div>
<div
className="px-8 border-t border-gray-700"
id="bottom-bar"
>
<ul className="w-full flex items-center justify-between bg-gray-800">
<li className="cursor-pointer text-white pt-5 pb-3">
<BellIcon
className="icon icon-tabler icon-tabler-bell"
width={20}
height={20}
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
></BellIcon>
</li>
<li className="cursor-pointer text-white pt-5 pb-3">
<ChatAlt2Icon
className="icon icon-tabler icon-tabler-bell"
width={20}
height={20}
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
></ChatAlt2Icon>
</li>
<li className="cursor-pointer text-white pt-5 pb-3">
<CogIcon
className="icon icon-tabler icon-tabler-bell"
width={20}
height={20}
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
></CogIcon>
</li>
</ul>
</div>
</div>
</div>
)}
{/* Sidebar ends */}
<div className="flex flex-col w-full h-full">
{/* mobile navbar starts */}
{!isLarge && (
<div
id="mobile-nav"
className="flex h-16 w-full relative bg-gray-800 flex-row items-center p-3"
>
<div className="cursor-pointer text-white pt-5 pb-3">
<MenuIcon
className={"icon icon-tabler icon-tabler-bell"}
width={30}
height={30}
stroke="currentColor"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
onClick={() => {
setOpen(!isOpen);
console.log(isOpen);
}}
></MenuIcon>
</div>
</div>
)}
{/* mobile navbar ends */}
<div className="flex w-full h-full rounded relative">
{children}
</div>
</div>
</div>
);
};
Now here is what's happening, from the video you can see that on fresh reload, it clearly says in the id that it is in fact the mobile nav which shouldn't be visible ( I can confirm it shouldn't with log statements ). But for some reason, the navbar is displayed and the weirdest part, it also has the elements of the sidebar! The mobile navbar only has a menu icon, but on fresh reload it has all of the elements from the sidebar? What is even happening here, why are they being combined and why isn't the sidebar only being displayed when it's a larger screen? Console.logs indicate that the sidebar is being displayed which isn't the case.
This is after switching to mobile and back (this is how it should be from the start)
Mobile works fine, and desktop works fine after resizing the screen and going back to full screen, but the desktop doesn't work properly on fresh reload.
useMediaQuerywill be undefined, and thats why it works when you resize the screen. try to load you component withnext/dynamicand SSRfalse