Now we are going to create a complete sidebar menu with plenty of options for admin to manage the entire website. This layout and options are inspired by WordPress dashboard.

Screen Shot 2022-01-20 at 3.59.10 PM

// components/nav/AdminNav.js
import React, { useState, useEffect } from "react";
import { Menu, Button } from "antd";
import {
  PushpinOutlined,
  CameraOutlined,
  FileTextOutlined,
  CommentOutlined,
  UserSwitchOutlined,
  SettingOutlined,
  DesktopOutlined,
} from "@ant-design/icons";
import { useTheme } from "next-themes";
import { Layout } from "antd";

const { Sider } = Layout;

const { SubMenu } = Menu;
const AdminNav = () => {
  // theme
  const { theme, setTheme } = useTheme();
  // state
  const [collapsed, setCollapsed] = useState(false);
  const [menuTheme, setMenuTheme] = useState("");

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

  return (
    <Sider
      collapsible
      collapsed={collapsed}
      onCollapse={() => setCollapsed(!collapsed)}
      theme={menuTheme}
    >
      <Menu
        defaultSelectedKeys={["1"]}
        defaultOpenKeys={["1"]}
        mode="inline"
        inlineCollapsed={collapsed}
        theme={menuTheme}
      >
        <SubMenu key="1" icon={<PushpinOutlined />} title="Posts">
          <Menu.Item key="2">All Posts</Menu.Item>
          <Menu.Item key="3">Add New</Menu.Item>
          <Menu.Item key="4">Categories</Menu.Item>
          <Menu.Item key="5">Tags</Menu.Item>
        </SubMenu>
        <SubMenu key="6" icon={<CameraOutlined />} title="Media">
          <Menu.Item key="7">Library</Menu.Item>
          <Menu.Item key="8">Add New</Menu.Item>
        </SubMenu>
        <SubMenu key="9" icon={<FileTextOutlined />} title="Pages">
          <Menu.Item key="10">All Pages</Menu.Item>
          <Menu.Item key="11">Add New</Menu.Item>
        </SubMenu>
        <Menu.Item key="12" icon={<CommentOutlined />}>
          Comments
        </Menu.Item>
        <Menu.Item key="13" icon={<DesktopOutlined />}>
          Apperance
        </Menu.Item>
        <SubMenu key="14" icon={<UserSwitchOutlined />} title="Users">
          <Menu.Item key="15">All Users</Menu.Item>
          <Menu.Item key="16">Add New</Menu.Item>
          <Menu.Item key="17">Profile</Menu.Item>
        </SubMenu>
        <Menu.Item key="18" icon={<SettingOutlined />}>
          Settings
        </Menu.Item>
      </Menu>
    </Sider>
  );
};

export default AdminNav;