🌬️🍔 ↝ Different methods of `[isMobile]`

[Gizmotronn]

See in pages/planets/[id].tsx:

 const [isMobile, setIsMobile] = useState(false);

    useEffect(() => {
        if (typeof window !== "undefined") {
        const checkIsMobile = () => {
            setIsMobile(window.innerWidth <= 768);
        };
        checkIsMobile();
        window.addEventListener("resize", checkIsMobile);
        return () => {
            window.removeEventListener("resize", checkIsMobile);
        };
        }
    }, []);

    if (!id) {
        return null;
    };

    if (isMobile) {
        return (
            <LayoutNoNav>
                <IndividualBasePlanet id={id as string} />
            </LayoutNoNav>
        );
    };

While in the main <Layout> component in components/Section/Layout.tsx:

const Layout: React.FC<DashboardLayoutProps> = ({ children }) => {
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {     // Check if window is defined before accessing it
    if (typeof window !== "undefined") {
      const checkIsMobile = () => {
        setIsMobile(window.innerWidth <= 768);
      };
      checkIsMobile();
      window.addEventListener("resize", checkIsMobile);
      return () => {
        window.removeEventListener("resize", checkIsMobile);
      };
    }
  }, []);

  return (
    <>
        <main className="h-max pb-10 grow pt-6">
          <Navbar />
          <div className="py-12">
            {children}
          </div>
        </main>
      {isMobile && (
        <div className="md:hidden overflow-y-auto h-screen p-4">
          <main className="h-max pb-10 grow">{children}</main>
          <Bottombar />
        </div>
      )}
    </>
  );
};

export default Layout;

This could cause problems, I just noticed this when I was creating the route for individual sectors. We need to define a coherent syntax for mobile configuration before this new repo gets messy.

<awaiting jira/plane linked issue tag>

[Gizmotronn]

Layout:

    return (
        <div className="mx-12">
            {/* Desktop Layout */}
            <div className="hidden md:grid md:grid-cols-5 md:grid-rows-3 md:gap-4 md:relative md:h-full">
                <div className="md:row-span-1 md:col-span-5 md:flex md:items-center md:justify-center p-12"> 
                    {renderContent()}
                </div>
                <div className="md:row-span-1 md:col-span-5 md:flex md:items-center md:justify-center"></div> 
                <div className="md:row-span-1 md:col-span-5 md:flex md:items-center md:justify-center p-12 mb-12"> 
                    {renderAutomatonContent()}
                </div>
            </div>

            {/* Mobile Layout */}
            <div className="grid grid-cols-1 grid-rows-auto gap-4 md:hidden relative min-h-screen">
                <div>01</div>
                <div>02</div>
                <div>04</div>
                <div className="col-span-1 flex justify-center items-end pb-5">
                    {renderContent()}
                </div>
                <div>05</div>
                <div>08</div>
                <div className="col-span-1 flex justify-center items-end pb-5">
                    {renderAutomatonContent()}
                </div>
                <div>09</div>
                <div>10</div>
                <div>11</div>
            </div>
        </div>
    );

This seems to be a good plan.