Next.js Discord

Discord Forum

Need help reading the window size of a page

Unanswered
Common Greenshank posted this in #help-forum
Open in Discord
Common GreenshankOP
I have a Sidebar component that i want to make collapsible when user clicks on the button to collapse. One thing to note is that i have a useState that is set to false, however i would like to read the window size to set the default value based on the window size

const Sidebar = () => {
  const [collapse, setCollapse] = useState(window.innerWidth < 768);
  const width = collapse ? "w-14" : "w-48";
  return (
    <div
      className={`bg-slate-800 p-2 flex flex-col gap-6 relative ${width} transition-all duration-300`}
    >
      <h1 className="text-white text-lg font-bold self-center">
        {collapse ? "" : ""}
      </h1>
      {collapse ? (
        <div className="flex flex-col gap-4 text-white self-center">
          <Link href="/" className="flex gap-2 items-center">
            <Home strokeWidth={1} />
          </Link>
          <Link href="/settings" className="flex gap-2 items-center">
            <Settings strokeWidth={1} />
          </Link>
        </div>
      ) : (
        <div className="flex flex-col gap-3 text-white">
          <Link href="/" className="flex gap-2 items-center">
            <Home strokeWidth={1} />
            Home
          </Link>
          <Link href="/settings" className="flex gap-2 items-center">
            <Settings strokeWidth={1} />
            Settings
          </Link>
        </div>
      )}
      <Button
        className="absolute right-[-20px] top-8 rounded-full p-2 bg-slate-600 hover:bg-slate-400 transition-all duration-300"
        onClick={() => setCollapse(!collapse)}
      >
        {collapse ? (
          <ChevronRight strokeWidth={2} size={20} />
        ) : (
          <ChevronLeft strokeWidth={2} size={20} />
        )}
      </Button>
    </div>
  );
};


window.innerwidth is throwing me an error

14 Replies

European sprat
"window" is undefined when the component prerenders on the server so you can't use it in useState
browser only stuff needs to be handled in a useEffect or event handler
Common GreenshankOP
Understood, what would be the best way to read from the DOM ?
Or what would be an alternative approach to what im doing here
European sprat
if you absolutely want to use window in useState as the default value you could skip the pre-rendering by following this:

https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading#skipping-ssr
as for what you're doing i don't have an opinion or suggestions
@Common Greenshank Or what would be an alternative approach to what im doing here
French Spaniel
Media queries and tailwind
@French Spaniel Media queries and tailwind
Common GreenshankOP
even with a button click? that maintains state?
French Spaniel
Im on mobile so hard to read code for me, but correct me if I am wrong

You want the navbar to collapse to a specific width based on screen size?
@French Spaniel Im on mobile so hard to read code for me, but correct me if I am wrong You want the navbar to collapse to a specific width based on screen size?
Common GreenshankOP
I want to set a default collapsible state when im on mobile vs desktop
currently the default is set to false
French Spaniel
I see so shown on one by default and not on the other
French Spaniel
I can’t think of anything serverside you could do

Not sure how to do it besides client side like Jarrah said and you can also look at the user agent string, so you would be updating the page on the client side

https://developer.mozilla.org/en-US/docs/Web/API/Navigator