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;