We have created sidebar. Now it's time to use ant design's Layout component to align the sidebar and main content of the page side by side.

Let's try this in admin/index.js

import { useState, useEffect } from "react";
import { Button, Layout } from "antd";
import { useTheme } from "next-themes";
import AdminNav from "../../components/nav/AdminNav";

const { Content } = Layout;

const Admin = () => {
  const { theme, setTheme } = useTheme("dark");
  const [menuTheme, setMenuTheme] = useState("");

  useEffect(() => {
    setMenuTheme(theme);
  }, [theme]);

  return (
    <Layout
      style={{
        minHeight: "100vh",
      }}
      hasSlider={true}
    >
      <AdminNav />

      <Layout
        style={{ backgroundColor: menuTheme === "dark" ? "black" : "white" }}
      >
        <Content style={{ margin: "0 16px" }}>
          <h1 style={{ color: menuTheme === "dark" ? "white" : "black" }}>Heading 1</h1>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima cum
            amet atque eos, ut quia doloribus consectetur dolores aperiam,
            expedita consequuntur harum tenetur pariatur similique quidem
            eligendi distinctio ratione aliquid!
          </p>
          <h2>Headeing 2</h2>
        </Content>
      </Layout>
    </Layout>
  );
};

export default Admin;