diff --git a/CHANGELOG.md b/CHANGELOG.md index 66f42cc..684654e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,7 +1,8 @@ # [v2.0.0](https://github.com/MoIzadloo/ultimate-react-multilevel-menu/compare/v1.0.0...v2.0.0) (2023-09-10) ## 💥 Breaking Changes -- [`b7bd9b0`](https://github.com/MoIzadloo/ultimate-react-multilevel-menu/commit/b7bd9b0) feat: add rtl support and update README.md + +- [`b7bd9b0`](https://github.com/MoIzadloo/ultimate-react-multilevel-menu/commit/b7bd9b0) feat: add rtl support and update README.md # v1.0.0 (2023-09-06) diff --git a/README.md b/README.md index 898fa27..f8680ce 100644 --- a/README.md +++ b/README.md @@ -4,10 +4,10 @@ URMM is a responsive menu react component. It's designed to be customizable and user-friendly. -- **User-friendly** simple and eligent +- **User-friendly** simple and elegant - **Customizable** to be suited to your needs - **RTL-Support** to support different languages -- **Mutli-level** to go as deep as you want +- **Multi-level** to go as deep as you want # Pros @@ -15,9 +15,9 @@ URMM is a responsive menu react component. It's designed to be customizable and 2. URMM supports multi-level menus 3. URMM is easy to implement -## Demo. +## Demo -Documentation is [here](https://moizadloo.github.io/ultimate-react-multilevel-menu/). +Documentation is [here](https://moizadloo.github.io/ultimate-react-multilevel-menu/) ## Install @@ -31,18 +31,29 @@ or yarn add ultimate-react-multilevel-menu ``` +## Stylesheets + +Make sure to include shipped CSS in your application to apply the correct styling to all components + +```tsx + { + /* The following line can be included in your src/index.js or App.js file */ + } + import 'ultimate-react-multilevel-menu/dist/index.css' +``` + + ## Minimum Working Set Up ```tsx import { - Nav, + Navbar, Collapse, Item, Items, Logo } from 'ultimate-react-multilevel-menu' - -; + ``` ## Componnents -### Nav +### Navbar -Nav component is container of all other components and you can change the color scheme by using the predefined css classes or your custom css classes +The navbar component is the container of all other components and you can change the color scheme by using the predefined CSS classes or your custom CSS classes #### Props @@ -74,7 +85,17 @@ Nav component is container of all other components and you can change the color ### Collapse -Collapse component is container of Item and Items components and it's responsible to make the menu responsive and elegant on small screens +The collapse component is the container of the Nav component and it's responsible for making the menu responsive and elegant on small screens + +#### Props + +| Name | Type | Default | Description | +| ---- | ---- | ------- | ----------- | + +### Nav + +The Nav component is a container of Item and Items components, in fact, the Collapse component uses the Nav component to wrap Item and Items components under the hood. +in case you don't want the collapse toggle button you can use it directly instead. #### Props @@ -83,7 +104,7 @@ Collapse component is container of Item and Items components and it's responsibl ### Logo -Logo component is container of your logo which can be an image or a simple text +The logo component is the container of your logo which can be an image or simple text #### Props @@ -107,7 +128,7 @@ Item component is a single link ### Items -Items component is a link and a container for other Item or Items components +Items component is a link and a container for other Items or Items components #### Props @@ -119,4 +140,4 @@ Items component is a link and a container for other Item or Items components ### Contact Me -Email : `moizadloo@gmail.com` +Email: `moizadloo@gmail.com` diff --git a/rollup.config.js b/rollup.config.js index ff4df26..ec63283 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -33,9 +33,9 @@ export default [ nodeResolve(), typescript(), postcss({ - extract: false, - minimize: false, - modules: true, + extract: true, + minimize: true, + modules: false, sourceMap: true, use: { less: { javascriptEnabled: true } diff --git a/src/index.ts b/src/index.ts index e6687c5..0d01a59 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,4 +1,6 @@ export { + Navbar, + NavbarProps, Nav, NavProps, Collapse, diff --git a/src/lib/index.ts b/src/lib/index.ts index 1a62f44..d55bf0c 100644 --- a/src/lib/index.ts +++ b/src/lib/index.ts @@ -1,4 +1,6 @@ export { + Navbar, + NavbarProps, Nav, NavProps, Collapse, @@ -9,4 +11,4 @@ export { ItemsProps, Logo, LogoProps -} from './nav' +} from './navbar' diff --git a/src/lib/nav/collapse/collapse.tsx b/src/lib/nav/collapse/collapse.tsx deleted file mode 100644 index 246bc76..0000000 --- a/src/lib/nav/collapse/collapse.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import React, { useState } from 'react' -import CollapseProps from './collapse.props' -import classNames from 'classnames' -import './collapse.less' -import Items from '../items/items' - -/** - * A generic Collapse - * @returns Element - */ -function Collapse (props: CollapseProps): JSX.Element { - const [isCollapsed, setIsCollapsed] = useState(true) - function traverse (props: any): any[] { - const clone: any[] = [] - if (props.children !== undefined && Array.isArray(props.children)) { - clone.push(props.children.map((child: any) => { - if (child.type === Items) { - return React.cloneElement(child, { isCollapse: true }, traverse(child.props)) - } else { - return React.cloneElement(child, { isCollapse: true }) - } - })) - } else if (typeof props.children === 'object') { - clone.push(React.cloneElement(props.children, { isCollapse: true })) - } - return clone - } - return ( - <> -
{ setIsCollapsed(!isCollapsed) }} className={classNames('navbar-toggler', { collapsed: !isCollapsed })}> - - - -
- - - - ) -} - -export default Collapse diff --git a/src/lib/nav/items/items.tsx b/src/lib/nav/items/items.tsx deleted file mode 100644 index 09782e6..0000000 --- a/src/lib/nav/items/items.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React, { useState } from 'react' -import ItemsProps from './items.props' -import classNames from 'classnames' -import './items.less' - -/** - * A generic Items - * @returns Element - */ -function Items (props: ItemsProps): JSX.Element { - const { as: Cmp = 'a', ...rest } = props - const [isPopped, setPop] = useState(false) - return ( -
  • - { - if (props.isCollapse === true) { - if (!isPopped) { - e.preventDefault() - } - setPop(!isPopped) - } - }} {...rest} className={classNames('item', 'dropDown')} - >{props.title} - - -
    • - ) -} - -export default Items diff --git a/src/lib/nav/collapse/collapse.less b/src/lib/navbar/collapse/collapse.less similarity index 74% rename from src/lib/nav/collapse/collapse.less rename to src/lib/navbar/collapse/collapse.less index 55ed57d..14b2917 100644 --- a/src/lib/nav/collapse/collapse.less +++ b/src/lib/navbar/collapse/collapse.less @@ -1,29 +1,6 @@ @import '../../../styles/theme.less'; @import '../../../styles/_colors.less'; -.nav{ - display: flex; - flex-direction: row; - margin: 0; - flex-basis: 100%; - flex-grow: 1; - padding: 0; - @media screen and (max-width: 575.98px) { - display: none; - } -} -.navbar-collapse{ - display: none; - flex-direction: row; - padding: .5rem 0; - margin: 0; - flex-basis: 100%; - flex-grow: 1; - @media screen and (max-width: 575.98px) { - display: none; - flex-direction: column; - } -} .navbar-toggler { position: relative; display: block; @@ -57,7 +34,7 @@ opacity: 1; border-radius: 1rem; transform: rotate(0deg); - background-color: rgba(0,0,0, .9); + background: rgba(0,0,0, .9); transition: 0.25s ease-in-out; &:nth-child(1) { diff --git a/src/lib/nav/collapse/collapse.md b/src/lib/navbar/collapse/collapse.md similarity index 62% rename from src/lib/nav/collapse/collapse.md rename to src/lib/navbar/collapse/collapse.md index 5bb02f6..cc3f7d4 100644 --- a/src/lib/nav/collapse/collapse.md +++ b/src/lib/navbar/collapse/collapse.md @@ -1,11 +1,11 @@ ```tsx padded -import { Nav, Collapse, Item, Items } from '../../' +import { Navbar, Collapse, Item, Items } from '../../' import classnames from 'classnames' -; + ``` diff --git a/src/lib/nav/collapse/collapse.props.ts b/src/lib/navbar/collapse/collapse.props.ts similarity index 100% rename from src/lib/nav/collapse/collapse.props.ts rename to src/lib/navbar/collapse/collapse.props.ts diff --git a/src/lib/nav/collapse/collapse.spec.tsx b/src/lib/navbar/collapse/collapse.spec.tsx similarity index 100% rename from src/lib/nav/collapse/collapse.spec.tsx rename to src/lib/navbar/collapse/collapse.spec.tsx diff --git a/src/lib/navbar/collapse/collapse.tsx b/src/lib/navbar/collapse/collapse.tsx new file mode 100644 index 0000000..bcc91ea --- /dev/null +++ b/src/lib/navbar/collapse/collapse.tsx @@ -0,0 +1,27 @@ +import React, { useState } from 'react' +import CollapseProps from './collapse.props' +import classNames from 'classnames' +import './collapse.less' +import Nav from '../nav/nav' + +/** + * A generic Collapse + * @returns Element + */ +function Collapse (props: CollapseProps): JSX.Element { + const [isCollapsed, setIsCollapsed] = useState(true) + return ( + <> +
    { setIsCollapsed(!isCollapsed) }} className={classNames('navbar-toggler', { collapsed: !isCollapsed })}> + + + +
    + + + ) +} + +export default Collapse diff --git a/src/lib/nav/index.ts b/src/lib/navbar/index.ts similarity index 69% rename from src/lib/nav/index.ts rename to src/lib/navbar/index.ts index c688b1d..990a5cf 100644 --- a/src/lib/nav/index.ts +++ b/src/lib/navbar/index.ts @@ -1,5 +1,7 @@ -export { default as Nav } from './nav' -export { default as NavProps } from './nav.props' +export { default as Navbar } from './navbar' +export { default as NavbarProps } from './navbar.props' +export { default as Nav } from './nav/nav' +export { default as NavProps } from './nav/nav.props' export { default as Collapse } from './collapse/collapse' export { default as CollapseProps } from './collapse/collapse.props' export { default as Item } from './item/item' diff --git a/src/lib/nav/item/item.less b/src/lib/navbar/item/item.less similarity index 100% rename from src/lib/nav/item/item.less rename to src/lib/navbar/item/item.less diff --git a/src/lib/nav/item/item.md b/src/lib/navbar/item/item.md similarity index 52% rename from src/lib/nav/item/item.md rename to src/lib/navbar/item/item.md index 19ea482..ad9699b 100644 --- a/src/lib/nav/item/item.md +++ b/src/lib/navbar/item/item.md @@ -1,9 +1,9 @@ ```tsx padded -import { Nav, Collapse, Item } from '../../' +import { Navbar, Collapse, Item } from '../../' import classnames from 'classnames' -; + ``` diff --git a/src/lib/nav/item/item.props.ts b/src/lib/navbar/item/item.props.ts similarity index 100% rename from src/lib/nav/item/item.props.ts rename to src/lib/navbar/item/item.props.ts diff --git a/src/lib/nav/item/item.spec.tsx b/src/lib/navbar/item/item.spec.tsx similarity index 100% rename from src/lib/nav/item/item.spec.tsx rename to src/lib/navbar/item/item.spec.tsx diff --git a/src/lib/nav/item/item.tsx b/src/lib/navbar/item/item.tsx similarity index 100% rename from src/lib/nav/item/item.tsx rename to src/lib/navbar/item/item.tsx diff --git a/src/lib/nav/items/items.less b/src/lib/navbar/items/items.less similarity index 91% rename from src/lib/nav/items/items.less rename to src/lib/navbar/items/items.less index 44f1486..3ecbbf6 100644 --- a/src/lib/nav/items/items.less +++ b/src/lib/navbar/items/items.less @@ -1,19 +1,19 @@ -.isCollapse{ +.collapsed{ display: block !important; } -.isNavbar:hover > ul{ +.is-navbar:hover > ul{ display: block; } -.dropDown{ +.dropdown{ display: flex !important; justify-content: flex-start; align-items: center; flex-direction: row; } -.dropDown::after{ +.dropdown::after{ display: inline-block; margin-left: .255em; content: ""; @@ -33,6 +33,7 @@ box-sizing: border-box; background-color: #fff; border-radius: .25rem; + z-index: 100; li{ width: 100%; } @@ -48,7 +49,7 @@ box-sizing: border-box; padding: .5rem 1.5rem; } - .dropDown::after{ + .dropdown::after{ border-top: .3em solid transparent; border-right: 0; border-bottom: .3em solid transparent; @@ -59,7 +60,7 @@ a { padding: .5rem; } - .dropDown::after{ + .dropdown::after{ border-top: .3em solid; border-right: .3em solid transparent; border-bottom: 0; diff --git a/src/lib/nav/items/items.md b/src/lib/navbar/items/items.md similarity index 72% rename from src/lib/nav/items/items.md rename to src/lib/navbar/items/items.md index a02b478..264e850 100644 --- a/src/lib/nav/items/items.md +++ b/src/lib/navbar/items/items.md @@ -1,7 +1,7 @@ ```tsx padded -import { Nav, Collapse, Item, Items } from '../../' +import { Navbar, Collapse, Item, Items } from '../../' import classnames from 'classnames' -; + ``` diff --git a/src/lib/nav/items/items.props.ts b/src/lib/navbar/items/items.props.ts similarity index 90% rename from src/lib/nav/items/items.props.ts rename to src/lib/navbar/items/items.props.ts index 25a5232..9d743b5 100644 --- a/src/lib/nav/items/items.props.ts +++ b/src/lib/navbar/items/items.props.ts @@ -4,7 +4,6 @@ interface ItemsProps extends Partial> { children?: ReactNode title?: string href?: string - isCollapse?: boolean as?: ElementType } diff --git a/src/lib/nav/items/items.spec.tsx b/src/lib/navbar/items/items.spec.tsx similarity index 100% rename from src/lib/nav/items/items.spec.tsx rename to src/lib/navbar/items/items.spec.tsx diff --git a/src/lib/navbar/items/items.tsx b/src/lib/navbar/items/items.tsx new file mode 100644 index 0000000..1719220 --- /dev/null +++ b/src/lib/navbar/items/items.tsx @@ -0,0 +1,54 @@ +import React, { useState, useEffect } from 'react' +import ItemsProps from './items.props' +import classNames from 'classnames' +import './items.less' + +/** + * A generic Items + * @returns Element + */ +function Items (props: ItemsProps): JSX.Element { + const { as: Cmp = 'a', ...rest } = props + const [isPopped, setPop] = useState(false) + + const [windowSize, setWindowSize] = useState([ + window.innerWidth, + window.innerHeight + ]) + + useEffect(() => { + const handleWindowResize = (): void => { + setWindowSize([window.innerWidth, window.innerHeight]) + } + + window.addEventListener('resize', handleWindowResize) + + return () => { + window.removeEventListener('resize', handleWindowResize) + } + }, []) + + const collapsed = windowSize[0] >= 575.98 + + return ( +
  • + { + if (!collapsed) { + console.log(collapsed) + if (!isPopped) { + e.preventDefault() + } + setPop(!isPopped) + } + }} {...rest} className={classNames('item', 'dropdown')} + >{props.title} + + +
    • + ) +} + +export default Items diff --git a/src/lib/nav/logo/logo.less b/src/lib/navbar/logo/logo.less similarity index 100% rename from src/lib/nav/logo/logo.less rename to src/lib/navbar/logo/logo.less diff --git a/src/lib/nav/logo/logo.md b/src/lib/navbar/logo/logo.md similarity index 80% rename from src/lib/nav/logo/logo.md rename to src/lib/navbar/logo/logo.md index 8f8fa20..cc1daf3 100644 --- a/src/lib/nav/logo/logo.md +++ b/src/lib/navbar/logo/logo.md @@ -1,7 +1,7 @@ ```tsx padded -import { Nav, Collapse, Item, Items, Logo } from '../../' +import { Navbar, Collapse, Item, Items, Logo } from '../../' import classnames from 'classnames' -; + ``` ### Logo With Image ```tsx padded -import { Nav, Collapse, Items, Item, Logo } from '../../' +import { Navbar, Collapse, Items, Item, Logo } from '../../' import classnames from 'classnames' -; + ``` diff --git a/src/lib/nav/logo/logo.props.ts b/src/lib/navbar/logo/logo.props.ts similarity index 52% rename from src/lib/nav/logo/logo.props.ts rename to src/lib/navbar/logo/logo.props.ts index 70c6b75..e68288b 100644 --- a/src/lib/nav/logo/logo.props.ts +++ b/src/lib/navbar/logo/logo.props.ts @@ -1,9 +1,9 @@ import { ElementType, ReactNode } from 'react' -interface logoProps extends Partial> { +interface LogoProps extends Partial> { children?: ReactNode href?: string as?: ElementType } -export default logoProps +export default LogoProps diff --git a/src/lib/nav/logo/logo.spec.tsx b/src/lib/navbar/logo/logo.spec.tsx similarity index 100% rename from src/lib/nav/logo/logo.spec.tsx rename to src/lib/navbar/logo/logo.spec.tsx diff --git a/src/lib/nav/logo/logo.tsx b/src/lib/navbar/logo/logo.tsx similarity index 80% rename from src/lib/nav/logo/logo.tsx rename to src/lib/navbar/logo/logo.tsx index 1f64587..7673947 100644 --- a/src/lib/nav/logo/logo.tsx +++ b/src/lib/navbar/logo/logo.tsx @@ -1,5 +1,5 @@ import React from 'react' -import logoProps from './logo.props' +import LogoProps from './logo.props' import classNames from 'classnames' import './logo.less' @@ -7,7 +7,7 @@ import './logo.less' * A generic Logo * @returns Element */ -function Logo (props: logoProps): JSX.Element { +function Logo (props: LogoProps): JSX.Element { const { as: Cmp = 'a', ...rest } = props return (
    diff --git a/src/lib/navbar/nav/nav.less b/src/lib/navbar/nav/nav.less new file mode 100644 index 0000000..40f357c --- /dev/null +++ b/src/lib/navbar/nav/nav.less @@ -0,0 +1,34 @@ +@import '../../../styles/theme.less'; +@import '../../../styles/_colors.less'; + +.nav{ + display: flex; + flex-direction: row; + margin: 0; + flex-basis: 100%; + flex-grow: 1; + padding: 0; + @media screen and (max-width: 575.98px) { + display: none; + } +} + +.navbar-collapse{ + display: none; + flex-direction: row; + align-items: flex-start; + padding: .5rem 0; + margin: 0; + flex-basis: 100%; + flex-grow: 1; + @media screen and (max-width: 575.98px) { + display: none; + flex-direction: column; + } +} + +.show{ + @media screen and (max-width: 575.98px) { + display: flex; + } +} \ No newline at end of file diff --git a/src/lib/navbar/nav/nav.md b/src/lib/navbar/nav/nav.md new file mode 100644 index 0000000..59581e8 --- /dev/null +++ b/src/lib/navbar/nav/nav.md @@ -0,0 +1,20 @@ +```tsx padded +import { Navbar, Nav, Item, Items, Logo } from '../' +import classnames from 'classnames' + +; + Logo + + +``` diff --git a/src/lib/navbar/nav/nav.props.ts b/src/lib/navbar/nav/nav.props.ts new file mode 100644 index 0000000..8d6f76c --- /dev/null +++ b/src/lib/navbar/nav/nav.props.ts @@ -0,0 +1,8 @@ +import { ReactNode } from 'react' + +interface NavProps extends Partial> { + children?: ReactNode + collapsed?: boolean +} + +export default NavProps diff --git a/src/lib/nav/nav.spec.tsx b/src/lib/navbar/nav/nav.spec.tsx similarity index 100% rename from src/lib/nav/nav.spec.tsx rename to src/lib/navbar/nav/nav.spec.tsx diff --git a/src/lib/navbar/nav/nav.tsx b/src/lib/navbar/nav/nav.tsx new file mode 100644 index 0000000..12ee432 --- /dev/null +++ b/src/lib/navbar/nav/nav.tsx @@ -0,0 +1,28 @@ +import React, { useEffect, useState } from 'react' +import CollapseProps from './nav.props' +import classNames from 'classnames' +import './nav.less' + +/** + * A generic Nav + * @returns Element + */ +function Nav (props: CollapseProps): JSX.Element { + const { collapsed = false } = props + const [isCollapsed, setIsCollapsed] = useState(collapsed) + useEffect(() => { + setIsCollapsed(collapsed) + }, [props.collapsed]) + return ( + <> +
      + {props.children} +
    +
      + {props.children} +
    + + ) +} + +export default Nav diff --git a/src/lib/nav/nav.less b/src/lib/navbar/navbar.less similarity index 90% rename from src/lib/nav/nav.less rename to src/lib/navbar/navbar.less index 2d24f65..e63404c 100644 --- a/src/lib/nav/nav.less +++ b/src/lib/navbar/navbar.less @@ -18,7 +18,7 @@ .navbar-light{ .navbar-toggler{ &-line { - background-color: rgba(0,0,0, .9); + background: rgba(0,0,0, .9); } } .logo-container > a{ @@ -53,7 +53,7 @@ } .navbar-toggler{ &-line { - background-color: @white; + background: @white; } } .logo-container > a{ @@ -87,7 +87,8 @@ margin-left: 0; } } - .dropDown::after{ + .dropdown::after{ + margin-left: 0; margin-right: .255em; } .navbar-toggler{ @@ -98,13 +99,15 @@ left: 0; right: 98%; } - .dropDown::after{ + .dropdown::after{ border-left: .0; border-right: .3em solid; } @media screen and (max-width: 575.98px) { - .dropDown::after{ + .dropdown::after{ + margin-left: 0; + margin-right: .255em; border-top: .3em solid; border-right: .3em solid transparent; border-bottom: 0; diff --git a/src/lib/nav/nav.md b/src/lib/navbar/navbar.md similarity index 79% rename from src/lib/nav/nav.md rename to src/lib/navbar/navbar.md index 63d46f7..0a183cf 100644 --- a/src/lib/nav/nav.md +++ b/src/lib/navbar/navbar.md @@ -1,7 +1,7 @@ ```tsx padded -import { Nav, Collapse, Item, Items, Logo } from '../' +import { Navbar, Collapse, Item, Items, Logo } from '../' import classnames from 'classnames' -; + ``` ### Color schemes @@ -23,9 +23,9 @@ import classnames from 'classnames' #### Dark ```tsx padded -import { Nav, Collapse, Item, Items, Logo } from '../' +import { Navbar, Collapse, Item, Items, Logo } from '../' import classnames from 'classnames' -; + ``` #### Light ```tsx padded -import { Nav, Collapse, Item, Items, Logo } from '../' +import { Navbar, Collapse, Item, Items, Logo } from '../' import classnames from 'classnames' -; + ``` #### Primary ```tsx padded -import { Nav, Collapse, Item, Items, Logo } from '../' +import { Navbar, Collapse, Item, Items, Logo } from '../' import classnames from 'classnames' -; + ``` #### Gray ```tsx padded -import { Nav, Collapse, Item, Items, Logo } from '../' +import { Navbar, Collapse, Item, Items, Logo } from '../' import classnames from 'classnames' -; + ``` ### Props @@ -115,9 +115,9 @@ import classnames from 'classnames' ##### RTL ```tsx padded -import { Nav, Collapse, Item, Items, Logo } from '../' +import { Navbar, Collapse, Item, Items, Logo } from '../' import classnames from 'classnames' -; + ``` ##### LTR ```tsx padded -import { Nav, Collapse, Item, Items, Logo } from '../' +import { Navbar, Collapse, Item, Items, Logo } from '../' import classnames from 'classnames' -; + ``` diff --git a/src/lib/nav/nav.props.ts b/src/lib/navbar/navbar.props.ts similarity index 100% rename from src/lib/nav/nav.props.ts rename to src/lib/navbar/navbar.props.ts diff --git a/src/lib/navbar/navbar.spec.tsx b/src/lib/navbar/navbar.spec.tsx new file mode 100644 index 0000000..6fb3caa --- /dev/null +++ b/src/lib/navbar/navbar.spec.tsx @@ -0,0 +1,3 @@ +describe('Logger', () => { + test.todo('please pass'); +}); \ No newline at end of file diff --git a/src/lib/nav/nav.tsx b/src/lib/navbar/navbar.tsx similarity index 61% rename from src/lib/nav/nav.tsx rename to src/lib/navbar/navbar.tsx index 2b445e2..d51ddd0 100644 --- a/src/lib/nav/nav.tsx +++ b/src/lib/navbar/navbar.tsx @@ -1,13 +1,13 @@ import React from 'react' -import NavProps from './nav.props' +import NavProps from './navbar.props' import classNames from 'classnames' -import './nav.less' +import './navbar.less' /** - * A generic Nav + * A generic Navbar * @returns Element */ -function Nav (props: NavProps): JSX.Element { +function Navbar (props: NavProps): JSX.Element { return (