KPC
Kevin Powell - Community•4w ago
ahmd shajmeer

Mobile Layout not taking full space

I am currently working on a dashboard project that have layout issue am facing while mobile view. I have provided both desktop view and mobile view. On mobile view the main content element should take the space what left by the collapsed sidenavbar. Also the sidenavbar has contents that still not showing , on scrolling that sidenavbar is closing.
No description
4 Replies
ahmd shajmeer
ahmd shajmeerOP•4w ago
App.tsx 
<div className="min-h-screen p-4 grid grid-cols-[auto,1fr]">
      {/* Left sidebar - visible on all screens */}
      <div className="mr-2">
        <SidebarProvider>
          <Sidebar />
        </SidebarProvider>
      </div>

      {/* Main content area */}
      <div className="grid grid-cols-1 md:grid-cols-[1fr,auto] gap-4">
        {/* Top navbar */}
        <div className="col-span-full">
          <Navbar
            colors={themeColors}
            onSelect={handleColorSelect}
            onClear={handleClearColor}
          />
        </div>

        {/* Main content */}
        <div
          className="col-span-full md:col-span-1 row-span-4"
          style={{ backgroundColor: selectedThemeColor || 'white' }}
        >
          <MainLayout>
            <Outlet />
          </MainLayout>
        </div>

        {/* Right sidebar */}
        <div
          className="col-span-full md:col-span-1 md:col-start-2 row-span-4"
          style={{ backgroundColor: selectedThemeColor || 'white' }}
        >
          <RightBar />
        </div>
      </div>
    </div>
<div className="min-h-screen p-4 grid grid-cols-[auto,1fr]">
      {/* Left sidebar - visible on all screens */}
      <div className="mr-2">
        <SidebarProvider>
          <Sidebar />
        </SidebarProvider>
      </div>

      {/* Main content area */}
      <div className="grid grid-cols-1 md:grid-cols-[1fr,auto] gap-4">
        {/* Top navbar */}
        <div className="col-span-full">
          <Navbar
            colors={themeColors}
            onSelect={handleColorSelect}
            onClear={handleClearColor}
          />
        </div>

        {/* Main content */}
        <div
          className="col-span-full md:col-span-1 row-span-4"
          style={{ backgroundColor: selectedThemeColor || 'white' }}
        >
          <MainLayout>
            <Outlet />
          </MainLayout>
        </div>

        {/* Right sidebar */}
        <div
          className="col-span-full md:col-span-1 md:col-start-2 row-span-4"
          style={{ backgroundColor: selectedThemeColor || 'white' }}
        >
          <RightBar />
        </div>
      </div>
    </div>
SideBar.tsx 
<>
  {isMobile && isCollapsed && (
    <button className="h-14 w-14 rounded-full bg-[#1C1C1C] text-white flex items-center justify-center" onClick={() => setIsCollapsed(false)}>
      <ChevronsRight className="h-6 w-6" />
    </button>
  )}
  {isMobile && !isCollapsed && (
    <div className="fixed inset-0 bg-black/50 z-30" onClick={() => setIsCollapsed(true)} />
  )}
  <aside
    className={cn(
      "flex flex-col gap-4 bg-[#1C1C1C] p-4 text-white transition-all duration-300 h-fit",
      isMobile && ["fixed left-0 top-0 bottom-0 z-40", isCollapsed ? "-translate-x-full" : "translate-x-0"],
      !isMobile && ["relative rounded-3xl", isCollapsed ? "w-[70px]" : "w-[250px]"],
      isMobile && !isCollapsed && "w-[250px]",
      "rounded-r-3xl lg:rounded-3xl"
    )}
  >
    <div className="flex items-center justify-between">
      {!isCollapsed && (
        <h2 className="text-xl font-extrabold font-nunitoSans text-white transition-all duration-600">
          <span className="text-[#ddff8f]">EA</span> Games
        </h2>
      )}
      <Button
        variant="ghost"
        size="icon"
        className={cn("h-6 w-6 text-white hover:bg-transparent hover:text-white", isCollapsed ? "mx-auto" : "ml-auto")}
        onClick={() => setIsCollapsed(!isCollapsed)}
      >
        {isCollapsed ? <ChevronsRight className="h-4 w-4 transition-transform" /> : <ChevronsLeft className="h-4 w-4 transition-transform" />}
      </Button>
    </div>
    <nav className="flex flex-1 flex-col gap-2">
      <NavItem
        icon={LayoutDashboard}
        title="Dashboard"
        to="/dashboard"
        isCollapsed={isCollapsed}
        isActive={location.pathname === '/dashboard'}
      />
      {/* Other Nav Items */}
    </nav>
  </aside>
</>
<>
  {isMobile && isCollapsed && (
    <button className="h-14 w-14 rounded-full bg-[#1C1C1C] text-white flex items-center justify-center" onClick={() => setIsCollapsed(false)}>
      <ChevronsRight className="h-6 w-6" />
    </button>
  )}
  {isMobile && !isCollapsed && (
    <div className="fixed inset-0 bg-black/50 z-30" onClick={() => setIsCollapsed(true)} />
  )}
  <aside
    className={cn(
      "flex flex-col gap-4 bg-[#1C1C1C] p-4 text-white transition-all duration-300 h-fit",
      isMobile && ["fixed left-0 top-0 bottom-0 z-40", isCollapsed ? "-translate-x-full" : "translate-x-0"],
      !isMobile && ["relative rounded-3xl", isCollapsed ? "w-[70px]" : "w-[250px]"],
      isMobile && !isCollapsed && "w-[250px]",
      "rounded-r-3xl lg:rounded-3xl"
    )}
  >
    <div className="flex items-center justify-between">
      {!isCollapsed && (
        <h2 className="text-xl font-extrabold font-nunitoSans text-white transition-all duration-600">
          <span className="text-[#ddff8f]">EA</span> Games
        </h2>
      )}
      <Button
        variant="ghost"
        size="icon"
        className={cn("h-6 w-6 text-white hover:bg-transparent hover:text-white", isCollapsed ? "mx-auto" : "ml-auto")}
        onClick={() => setIsCollapsed(!isCollapsed)}
      >
        {isCollapsed ? <ChevronsRight className="h-4 w-4 transition-transform" /> : <ChevronsLeft className="h-4 w-4 transition-transform" />}
      </Button>
    </div>
    <nav className="flex flex-1 flex-col gap-2">
      <NavItem
        icon={LayoutDashboard}
        title="Dashboard"
        to="/dashboard"
        isCollapsed={isCollapsed}
        isActive={location.pathname === '/dashboard'}
      />
      {/* Other Nav Items */}
    </nav>
  </aside>
</>
Chris Bolson
Chris Bolson•4w ago
You have a lot going on here and, as far as I can work out, some redundant styling (which is not related to the issue but I thought that it was worth mentioning). Your main parent container has this styling: 
<div className="min-h-screen p-4 grid grid-cols-[auto,1fr]">
<div className="min-h-screen p-4 grid grid-cols-[auto,1fr]">
You are defining 2 columns at all times, regardless of viewport width. On the mobile view, whilst the "aside" element is set to position:fixed, you also have the button to reveal the nav element and this is occupying this first column, forcing the content over to the right. To resolve this you may need to move the button into the header element and also remove the 2 columns on smaller screens. An example of the redundant code is how you have defined the columns on the main content area. The container has 2 columns so it's children will automatically occupy the first and second column. There is no need to define this unless in some other point of the code you have overridden their natural cell occupation which, as far as I can tell, is not the case. 
{/* Main content */}
<div className="col-span-full md:col-span-1 row-span-4"
{/* Main content */}
<div className="col-span-full md:col-span-1 row-span-4"
You don't need to define those classes here as you have already added a grid columns condition on the parent, only having 2 columns on larger screens, so it can only ever occupy a single column. I also see no reason to define the number of rows as the parent only contains 2 elements. Likewise, on the right sidebar you have much the same: 
{/* Right sidebar */}
<div className="col-span-full md:col-span-1 md:col-start-2 row-span-4"
{/* Right sidebar */}
<div className="col-span-full md:col-span-1 md:col-start-2 row-span-4"
This element will only occupy 1 column by default so no need to define that. It will also be in the second column (when defined on the parent) so again, it is redundant. Again, these issues are not related to your main issue, I just thought that it was worth pointing them out. Note - I realize that this may be a slimmed down version of your code so there may be reasons for these "extra" classes. As regards your issue with the nav closing when scrolling, it looks like you have set an "onClick" event on the parent container which is closing it when you click on it. 
<div className="fixed inset-0 bg-black/50 z-30" onClick={() => setIsCollapsed(true)} />
<div className="fixed inset-0 bg-black/50 z-30" onClick={() => setIsCollapsed(true)} />
ahmd shajmeer
ahmd shajmeerOP•4w ago
I understand only a bit from your view, but I appreciate you for pointing out this. Lets keep my code aside and can you provide code that how you will approach this layout with the four components? This will help me a lot for comparing my code and figure out the issue.
Chris Bolson
Chris Bolson•4w ago
The issue is that your sidebar button is occupying the first column so this pushes the main content over to the right. As I say, I think that you will need to place this sidebar reveal button/toggle in the header element so that, on smaller screens, it doesn't require it's own column. Then, on smaller screens you reduce the main parent container grid column number to just 1. However, I don't really use React so I can't code this up for you. I also suggest that you take a closer look at how grid works as you can end up saving yourself time by not defining unnecessary columns and rows.

Did you find this page helpful?