Next.js Discord

Discord Forum

How do you put main content along with sidebar?

Unanswered
Odorous house ant posted this in #help-forum
Open in Discord
Odorous house antOP
I have a sidebar component and I'm trying to put main content outside of the sidebar so it can be used as navigation while the user interacts with other content.

I'm not sure what the best way to do this is. I've always done it by using some large margin left like 64 but the large margins have always been sketchy to me because they're quite sensitive.

I'm looking for ideas on how I can improve this. In the image is the sidebar component I'm using and the other image is using flex-1. It works when I use a margin like "ml-64" but I'd like to know if there's other ways to do it that yield better results.

14 Replies

Spectacled bear
Couldn't you use flexbox?
Sun bear
you can use flexbox or grid
Jboncz
I typically use columns in my layout to seperate them.
import React from 'react';

const TwoColumnLayout = ({ leftContent, rightContent }) => {
  return (
    <div className="flex min-h-screen">
      <div className="w-1/5 bg-gray-100 p-4">
        {leftContent}
      </div>
      <div className="flex-1 bg-white p-4">
        {rightContent}
      </div>
    </div>
  );
};

export default TwoColumnLayout;

or even something like this would work
Odorous house antOP
@Jboncz @Sun bear @Spectacled bear With flex you can bring it to center start and end, do you then adjust it from there? Like adding padding/margin to put it in the place you want?
Jboncz
Yeah for the most part
Lakeland Terrier
https://www.creative-tim.com/twcomponents/cheatsheet/ Here is a super helpful tailwind cheatsheet
https://yoksel.github.io/flex-cheatsheet/ and a little flex cheatsheet
flex and padding should be able to get your desired result. You can also set widths depending on screen sizes
Spectacled bear
Using flexbox doesn't lock you to 50-50 or any other equal size ratio for columns and/or rows
You can use flex-basis to turn that 50-50 to something like 30-70 if you prefer
French Lop
i would use grid if the dimensions are fixed and flex if the side-bar should be as wide as its content
Jboncz
The thing about CSS is theres no single way to do it 😄
@Jboncz The thing about CSS is theres no single way to do it 😄
Spectacled bear
100%, even just playing around with margins and paddings is a valid approach - most of the times there's no wrong approach, just better/worse depending on the use case
that's why css is chaotic
Jboncz
Exactly.