Resizable Panels in mobile?

[ksteidl]

Sup guys,

has anyone already figured out how to make the resize panels responsive (especially in mobile) without hiding them.

Currently have 2 panels: one the sidebar and the other the main. Maybe making the sidebar absolute under 768px and toggle visibility with fixed width?

Need some tips

[imaricodes]

You could use conditional statements to change the view.

{desktop && (
    <ResizablePanelGroup direction={"horizontal"}/>
       <ResizablePanel>
           Panel One
       <ResizablePanel>
      <ResizableHandle/>
       <ResizablePanel>
           Panel Two
       <ResizablePanel> 
     </ResizablePanelGroup>
   ) 
        :

     ( 
         <ResizablePanelGroup direction={"vertical"}/>
            <ResizablePanel>
                Panel One
            <ResizablePanel>
            <ResizableHandle/>
            <ResizablePanel>
                 Panel Two
            <ResizablePanel> 
          < /ResizablePanelGroup>
      )
}

Where you derive the true/false value of the desktop variable is up to you. In one version, I had an event listener listening for changes on the window size. t would set the values of (for instance) the 'desktop' variable to render the either of the two expressions in the ternary conditional. For example, if window width < 1400 px, desktop = false...

You can also show and collapse panels based on user interaction (button click) or based on window size. I'm still getting a handle on using the collapse / expand properties and methods. If I wanted a sidebar to be optionally shown when in mobile, I'd consider just collapsing it to zero using the built in resizable methods.

[ThaBeanBoy]

I'm currently having the same issue, I'll probably try out what @imaricodes suggested.

This is what I currently have:

<>
      <div className="hidden md:block">
        <ResizablePanelGroup className="relative" direction="horizontal">
          <ResizablePanel
            defaultSize={23}
            className="sticky top-4 overflow-y-scroll md:h-[calc(100vh-80px)]"
          >
            <ul>
              {navigation.map(({ href, ...Item }, key) => (
                <li key={key}>
                  <NavigationItem
                    className="mb-1 transition last:mb-0"
                    {...Item}
                    href={href}
                    onClick={navigationLinkClick}
                  />
                </li>
              ))}
            </ul>
          </ResizablePanel>

          <ResizableHandle className="mx-2" />

          <ResizablePanel>{content}</ResizablePanel>
        </ResizablePanelGroup>
      </div>

      {/* Mobile view */}
      <div className="md:hidden">
        <Drawer>
          <DrawerTrigger asChild>
            <Button variant="link" className="px-0">
              Documentation Menu
            </Button>
          </DrawerTrigger>

          <DrawerContent>
            <DrawerHeader>
              <DrawerTitle>Documentation Menu</DrawerTitle>

              <ul className="max-h-96 overflow-y-scroll">
                {navigation.map((Item, key) => (
                  <li key={key}>
                    <NavigationItem
                      className="mb-1 transition last:mb-0"
                      {...Item}
                      onClick={navigationLinkClick}
                    />
                  </li>
                ))}
              </ul>
            </DrawerHeader>
          </DrawerContent>
        </Drawer>

        {content}
      </div>
    </>

I used the utility class hidden, to hide the desktop view, and display the mobile view. I'm using gsap to animate out of the page, and pushing the the new page once the animation is completed:

  const navigationLinkClick: MouseEventHandler<HTMLAnchorElement> = (e) => {
    const { href } = e.currentTarget;

    if (mainRef.current && pathname !== href) {
      e.preventDefault();

      gsap.to(mainRef.current.children, {
        x: -600,
        opacity: 0,
        stagger: 10,
        onComplete: () => {
          router.push(href);
        },
      });
    }
  };

The result of the code is when a user clicks a link to another page, it takes a long time.

[ThaBeanBoy]

Instead of making a custom hook, I found this hook.

I imported the useWindowWidth

import { useWindowWidth } from "@react-hook/window-size";

Inside the component, it was easy to get the width of the screen and use that screen width to conditionally render the desktop view or the mobile view. This method resolved my animation issue.

const screenWidth = useWindowWidth();

if (screenWidth >= 786) {
    return (
      // Desktop view
      <div>
        <ResizablePanelGroup className="relative" direction="horizontal">
          <ResizablePanel
            defaultSize={23}
            className="sticky top-4 overflow-y-scroll md:h-[calc(100vh-80px)]"
          >
            <ul>
              {navigation.map(({ href, ...Item }, key) => (
                <li key={key}>
                  <NavigationItem
                    className="mb-1 transition last:mb-0"
                    {...Item}
                    href={href}
                    onClick={navigationLinkClick}
                  />
                </li>
              ))}
            </ul>
          </ResizablePanel>

          <ResizableHandle className="mx-2" />

          <ResizablePanel>
            <Main ref={mainRef} />
          </ResizablePanel>
        </ResizablePanelGroup>
      </div>
    );
  }

  return (
    // Mobile view
    <div className="md:hidden">
      <Drawer>
        <DrawerTrigger asChild>
          <Button variant="link" className="px-0">
            Documentation Menu
          </Button>
        </DrawerTrigger>

        <DrawerContent>
          <DrawerHeader>
            <DrawerTitle>Documentation Menu</DrawerTitle>

            <ul className="max-h-96 overflow-y-scroll">
              {navigation.map((Item, key) => (
                <li key={key}>
                  <NavigationItem
                    className="mb-1 transition last:mb-0"
                    {...Item}
                    onClick={navigationLinkClick}
                  />
                </li>
              ))}
            </ul>
          </DrawerHeader>
        </DrawerContent>
      </Drawer>

      {content}
    </div>
  );

Side note, make the stagger property of the animation smaller. Anyway, I hope the hook can help. Good luck with your project.

[tswymer]

With SSR, using conditionals in JS to render different versions for desktop & mobile panels causes potential hydration mismatches, and using CSS to show / hide PanelGroups still renders them twice, even if one is hidden (causing my E2E tests to complain about multiple matches for locators).

This worked for me when I needed horizontal (and resizable) panels on desktop, but vertically stacked panels on mobile, rendering everything once and with CSS only:

<ResizablePanelGroup direction="horizontal" className="!flex-col md:!flex-row gap-4">
  <ResizablePanel defaultSize="{50}" minSize="{25}" className="!basis-auto md:!basis-0" >
    {content}
  </ResizablePanel>

  <ResizableHandle withHandle className="hidden md:flex" />

  <ResizablePanel defaultSize="{50}" minSize="{25}" className="!basis-auto md:!basis-0" >
    {content}
  </ResizablePanel>
</ResizablePanelGroup>

[tomredman]

Brilliant!

[sudarshan-mane]

Two Important Classe "relative [&>*]:h-full"

Note: Adding only relative or wrapping children in div doesn't seem right approach either as if you console, RadixPrimitive has children with class table, to which we have to give h-full; to access that children use [&>*]:h-full.

Hope this helps
Final code:

---

<ScrollAreaPrimitive.Viewport className="relative h-full w-full rounded-[inherit] [&>*]:h-full">
  {children}
</ScrollAreaPrimitive.Viewport>

---