Side Bar Layout

Side Bar Layout offers a flexible and organized structure for modern web applications. It features a left sidebar navigation for easy access to key sections, an optional top bar, and a main content area — all styled with Tailwind CSS and optimized for Next.js and React.js projects.

Perfect for dashboards, admin panels, and applications that require efficient navigation.

Side Bar Layout preview

1. Setup codes

Before setup the Top Bar Layout, please setup some commons components:

• SideBar component
• TopBarLayout component

Create a new file component components/layouts/SideBarLayout.tsx

jsx
import React, { ReactNode } from "react";

import SideBar from "./common/SideBar";
import TopBarLayout from "./TopBarLayout";

type SideBarLayoutProps = {
  children: ReactNode;
};

/**
 * SideBar with the TopBar Navigation at the top of page
 * Do not have footer at the end page
 * Have the SideBar on the left site
 */
const SideBarLayout = ({ children }: SideBarLayoutProps) => {
  return (
    <TopBarLayout haveFooter={false}>
      <div className="grid h-screen grid-cols-[1fr_3fr] pt-[70px]">
        <SideBar />
        {children}
      </div>
    </TopBarLayout>
  );
};

export default SideBarLayout;

If you do not need to have the TopBar, you can remove it like that

jsx
import React, { ReactNode } from "react";

import SideBar from "./common/SideBar";

type SideBarLayoutProps = {
  children: ReactNode;
};

/**
 * SideBar with the TopBar Navigation at the top of page
 * Do not have footer at the end page
 * Have the SideBar on the left site
 */
const SideBarLayout = ({ children }: SideBarLayoutProps) => {
  return (
    <div className="grid h-screen grid-cols-[1fr_3fr] pt-[70px]">
      <SideBar />
      {children}
    </div>
  );
};

export default SideBarLayout;

2. Usages

Now you can use the SideBarLayout component in any pages, such as app/page.tsx or in layout app/layout.tsx

jsx
import SideBarLayout from "@/components/layouts/SideBarLayout";

export default async function Layout({ children }: { children: React.ReactNode }) {
  return <SideBarLayout>{children}</SideBarLayout>;
}

And then, any pages inside this layout have the same Sidebar layout.

The UI like that