Active menu links for admin nav

/* 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;