Trying to explain this may be a bit tricky, so I'll primarily use images and share the HTML code from the inspector. Essentially, in my HTML code, I have two completely separate sections that are divided by curly braces and conditions. Strangely, when the web app is first loaded or reloaded, these two elements sometimes merge together. What I mean is that one element contains the sub-elements of the other. This should not be happening at all. I even added console.logs to double-check which item should be displayed, and despite confirming that ITEM A should be displayed, it ends up showing ITEM B with additional elements from ITEM A mixed in. It's incredibly confusing for me and probably for you too, so I'll just leave the code here for reference.
This code pertains to a navigation component with a Sidebar that remains visible on desktop screens but changes to a navbar with a menu icon on mobile devices. Clicking the menu icon expands the sidebar and pushes the content accordingly.
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>
);
};
To see what's going wrong visually, check out this video. As shown, upon a fresh reload, the ID clearly indicates that the mobile nav, which shouldn't be visible (confirmed via log statements), is being displayed. But oddly, the navbar appears with elements from the sidebar - even though the mobile navbar should only show a menu icon. Why are these elements merging and why isn't the sidebar showing up only on larger screens? The console logs indicate that the sidebar should appear, yet that's not the case.
Here's the code after a fresh reload, and here's how it looks after switching between mobile and desktop views (the expected outcome).
The mobile view functions correctly, and the desktop setup works fine after resizing the screen before reverting back to full size. However, the desktop display encounters issues on a fresh reload.