💥 feat: Many problems have been solved

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)
 

README.md

@@ -4,20 +4,20 @@
 
 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
 
 1. URMM is fully customizable thanks to different props
 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'
-
-;<Nav className={'navbar-light bg-white'}>
+;<Navbar className={'navbar-light bg-white'}>
   <Logo href="/">Logo</Logo>
   <Collapse>
     <Item href={'#home'}>Home</Item>
@@ -56,14 +67,14 @@ import {
     </Items>
     <Item href={'#pricing'}>Pricing</Item>
   </Collapse>
-</Nav>
+</Navbar>
 ```
 
 ## 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`

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 }

src/index.ts

@@ -1,4 +1,6 @@
 export {
+  Navbar,
+  NavbarProps,
   Nav,
   NavProps,
   Collapse,

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'

src/lib/nav/collapse/collapse.less → 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) {

src/lib/nav/collapse/collapse.md → 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'
-;<Nav className={classnames('navbar-light')}>
+;<Navbar className={classnames('navbar-light')}>
   <Collapse>
     <Items href={'#about'} title="About">
       <Item href={'#introduction'}>Introduction</Item>
     </Items>
   </Collapse>
-</Nav>
+</Navbar>
 ```

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 (
+    <>
+      <div onClick={() => { setIsCollapsed(!isCollapsed) }} className={classNames('navbar-toggler', { collapsed: !isCollapsed })}>
+        <span className={classNames('navbar-toggler-line')} />
+        <span className={classNames('navbar-toggler-line')} />
+        <span className={classNames('navbar-toggler-line')} />
+      </div>
+      <Nav collapsed={isCollapsed}>
+        {props.children}
+      </Nav>
+    </>
+  )
+}
+
+export default Collapse

src/lib/nav/index.ts → 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'

src/lib/nav/item/item.md → 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'
-;<Nav className={classnames('navbar-light')}>
+;<Navbar className={classnames('navbar-light')}>
   <Collapse>
     <Item href={'#home'}>Home</Item>
   </Collapse>
-</Nav>
+</Navbar>
 ```

src/lib/nav/items/items.less → 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;