import styled from 'styled-components' ; import { Layout , Menu } from 'antd' ; import { Scrollbars } from 'react-custom-scrollbars' ; import { useQuery } from 'react-query' ; import { IOrganizationEntity } from '@notifire/shared' ; import { NavLink } from 'react-router-dom' ; import { SettingOutlined , NotificationOutlined , MonitorOutlined , TeamOutlined } from '@ant-design/icons' ; const { Sider } = Layout ; type Props = { } ; export function SideNav ( { } ) { const { data : organization , isLoading : isOrganizationLoading } = useQuery < IOrganizationEntity > ( '/v1/organizations/me' ) ; return ( < Sider className = "side-nav" width = { 250 } collapsed = { false } theme = "light" > < Scrollbars autoHide > < Menu mode = "inline" > < Menu . Item icon = { < NotificationOutlined />} key="templates"> < NavLink to = "/templates" className = "nav-text" data - test - id = "side-nav-templates-link" > < span > Notifications < /span> < /NavLink> < /Menu.Item> < Menu . Item icon = { < MonitorOutlined / > } key = "activities" > < NavLink to = "/activities" className = "nav-text" data - test - id = "side-nav-activities-link" > < span > Activity Feed < /span> < /NavLink> < /Menu.Item> < Menu . Item icon = { < SettingOutlined / > } key = "settings" > < NavLink to = "/settings/widget" className = "nav-text" data - test - id = "side-nav-settings-link" > < span > Settings < /span> < /NavLink> < /Menu.Item> < Menu . Item icon = { < TeamOutlined / > } key = "members" > < NavLink to = "/settings/organization" className = "nav-text" data - test - id = "side-nav-settings-organization" > < span > Team Members < /span> < /NavLink> < /Menu.Item> < /Menu> < /Scrollbars> < /Sider>); }