/* styles.css */
.active {
color: #1890ff !important;
text-decoration: underline;
}
import React, { useState, useContext, useEffect } from "react";
import { Menu, Button } from "antd";
import {
PushpinOutlined,
CameraOutlined,
FileTextOutlined,
CommentOutlined,
UserSwitchOutlined,
SettingOutlined,
DesktopOutlined,
} from "@ant-design/icons";
import { Layout } from "antd";
import Link from "next/link";
import { AuthContext } from "../../context/auth";
import { useRouter } from "next/router";
import { useWindowWidth } from "@react-hook/window-size";
const { Sider } = Layout;
const { SubMenu } = Menu;
const AdminNav = () => {
// context
const [auth, setAuth] = useContext(AuthContext);
// hooks
const router = useRouter();
// state
const [collapsed, setCollapsed] = useState(false);
const [current, setCurrent] = useState("");
useEffect(() => {
process.browser && setCurrent(window.location.pathname);
}, [process.browser && window.location.pathname]);
// detect window size and collapse sidebar
const onlyWidth = useWindowWidth();
useEffect(() => {
console.log("onlyWidth", onlyWidth);
if (onlyWidth < 800) {
setCollapsed(true);
} else if (onlyWidth > 800) {
setCollapsed(false);
}
}, [onlyWidth < 800]);
const activeName = (name) => `nav-link ${current === name && "active"}`;
return (
<Sider
collapsible
collapsed={collapsed}
onCollapse={() => setCollapsed(!collapsed)}
style={{
marginTop: 50,
}}
>
<Menu
// defaultSelectedKeys={["1"]}
defaultOpenKeys={["1", "6", "9", "14"]}
mode="inline"
inlineCollapsed={collapsed}
>
<Menu.Item key="19" icon={<SettingOutlined />}>
<Link href="/admin">
<a className={activeName("/admin")}>Dashboard</a>
</Link>
</Menu.Item>
{/* posts */}
<SubMenu key="1" icon={<PushpinOutlined />} title="Posts">
<Menu.Item key="2">
<Link href="/admin/posts">
<a className={activeName("/admin/posts")}>All Posts</a>
</Link>
</Menu.Item>
<Menu.Item key="3">
<Link href="/admin/posts/new">
<a className={activeName("/admin/posts/new")}>Add New</a>
</Link>
</Menu.Item>
<Menu.Item key="4">
<Link href="/admin/categories">
<a className={activeName("/admin/categories")}>Categories</a>
</Link>
</Menu.Item>
</SubMenu>
{/* media */}
<SubMenu key="6" icon={<CameraOutlined />} title="Media">
<Menu.Item key="7">
<Link href="/admin/media/library">
<a className={activeName("/admin/media/library")}>Library</a>
</Link>
</Menu.Item>
<Menu.Item key="8">
<Link href="/admin/media/new">
<a className={activeName("/admin/media/new")}>Add New</a>
</Link>
</Menu.Item>
</SubMenu>
{/* pages */}
<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>
{/* users */}
<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;