💥 feat: add rtl support and update README.md

CHANGELOG.md

@@ -1,12 +1,9 @@
 # v1.0.0 (2023-09-06)
 
-## 💥 Breaking Changes
-- [`f43b984`](https://github.com/MoIzadloo/ultimate-react-multilevel-menu/commit/f43b984)  feat: first commit
-
-# v1.0.0 (2023-09-06)
-
 ## ✨ New Features
-- [`abf31d9`](https://github.com/MoIzadloo/react-multi-level-menu/commit/abf31d9)  feat: yarn instead of npm 
+
+- [`abf31d9`](https://github.com/MoIzadloo/react-multi-level-menu/commit/abf31d9) feat: yarn instead of npm
 
 ## 💥 Breaking Changes
-- [`1566235`](https://github.com/MoIzadloo/react-multi-level-menu/commit/1566235)  feat: first commit
+
+- [`1566235`](https://github.com/MoIzadloo/react-multi-level-menu/commit/1566235) feat: first commit

README.md

@@ -1 +1,122 @@
+<img src="./styleguide/assets/logo.png" width="90" align="right" />
+
 # The Ultimate React Multilevel Menu
+
+URMM is a responsive menu react component. It's designed to be customizable and user-friendly.
+
+- **User-friendly** simple and eligent
+- **Customizable** to be suited to your needs
+- **RTL-Support** to support different languages
+- **Mutli-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.
+
+Documentation is [here](https://moizadloo.github.io/ultimate-react-multilevel-menu/).
+
+## Install
+
+```sh
+npm install --save ultimate-react-multilevel-menu
+```
+
+or
+
+```sh
+yarn add ultimate-react-multilevel-menu
+```
+
+## Minimum Working Set Up
+
+```tsx
+import {
+  Nav,
+  Collapse,
+  Item,
+  Items,
+  Logo
+} from 'ultimate-react-multilevel-menu'
+
+;<Nav className={'navbar-light bg-white'}>
+  <Logo href="/">Logo</Logo>
+  <Collapse>
+    <Item href={'#home'}>Home</Item>
+    <Items href={'#articles'} title="Articles">
+      <Items href={'#power-plant'} title="Power plant">
+        <Item href={'#turbine'}>Turbine</Item>
+      </Items>
+    </Items>
+    <Items href={'#about'} title="About">
+      <Item href={'#introduction'}>Introduction</Item>
+    </Items>
+    <Item href={'#pricing'}>Pricing</Item>
+  </Collapse>
+</Nav>
+```
+
+## Componnents
+
+### Nav
+
+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
+
+#### Props
+
+| Name      | Type           | Default | Description           |
+| --------- | -------------- | ------- | --------------------- |
+| dir       | "rtl" \| "ltr" | "ltr"   | Menu direction        |
+| className | "string"       | ""      | CSS class for nav tag |
+
+### Collapse
+
+Collapse component is container of Item and Items components and it's responsible to make the menu responsive and elegant on small screens
+
+#### Props
+
+| Name | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+
+### Logo
+
+Logo component is container of your logo which can be an image or a simple text
+
+#### Props
+
+| Name      | Type              | Default | Description                       |
+| --------- | ----------------- | ------- | --------------------------------- |
+| href      | "string"          | ""      | Logo url link                     |
+| as        | React.ElementType | a       | The component that link render as |
+| className | "string"          | ""      | CSS class for container div tag   |
+
+### Item
+
+Item component is a single link
+
+#### Props
+
+| Name      | Type              | Default | Description                       |
+| --------- | ----------------- | ------- | --------------------------------- |
+| href      | "string"          | ""      | Item url link                     |
+| as        | React.ElementType | a       | The component that link render as |
+| className | "string"          | ""      | CSS class for container li tag    |
+
+### Items
+
+Items component is a link and a container for other Item or Items components
+
+#### Props
+
+| Name      | Type              | Default | Description                       |
+| --------- | ----------------- | ------- | --------------------------------- |
+| href      | "string"          | ""      | Url link for it self              |
+| as        | React.ElementType | a       | The component that link render as |
+| className | "string"          | ""      | CSS class for container ul tag    |
+
+### Contact Me
+
+Email : `moizadloo@gmail.com`

package.json

@@ -11,7 +11,7 @@
   ],
   "license": "MIT",
   "author": "Mostafa Izadloo <moizadloo@gmail.com>",
-  "homepage": "https://github.com/MoIzadloo/ultimate-react-multilevel-menu",
+  "homepage": "https://moizadloo.github.io/ultimate-react-multilevel-menu/",
   "bugs": {
     "url": "https://github.com/MoIzadloo/ultimate-react-multilevel-menu/issues"
   },

src/lib/nav/collapse/collapse.md

@@ -5,11 +5,7 @@ import classnames from 'classnames'
   <Collapse>
     <Items href={'#about'} title="About">
       <Item href={'#introduction'}>Introduction</Item>
-      <Items href={'#about'} title="About">
-        <Item href={'#introduction'}>Introduction</Item>
-      </Items>
     </Items>
-    <Item href={'#introduction'}>Introduction</Item>
   </Collapse>
 </Nav>
 ```

src/lib/nav/collapse/collapse.tsx

@@ -17,11 +17,11 @@ function Collapse (props: CollapseProps): JSX.Element {
         if (child.type === Items) {
           return React.cloneElement(child, { isCollapse: true }, traverse(child.props))
         } else {
-          return React.cloneElement(child)
+          return React.cloneElement(child, { isCollapse: true })
         }
       }))
     } else if (typeof props.children === 'object') {
-      clone.push(React.cloneElement(props.children))
+      clone.push(React.cloneElement(props.children, { isCollapse: true }))
     }
     return clone
   }

src/lib/nav/item/item.less

@@ -4,6 +4,8 @@
     padding: .5rem;
     display: block;
     text-decoration: none;
+    text-overflow: ellipsis;
+    white-space: nowrap;
     width: 100%;
     color: rgba(0,0,0,.5);
     &:focus{

src/lib/nav/item/item.props.ts

@@ -1,8 +1,9 @@
-import { ReactNode } from 'react'
+import { ElementType, ReactNode } from 'react'
 
 interface ItemProps extends Partial<Omit<HTMLAnchorElement, 'children'>> {
   children?: ReactNode
   href?: string
+  as?: ElementType
 }
 
 export default ItemProps

src/lib/nav/item/item.tsx

@@ -8,11 +8,12 @@ import './item.less'
  * @returns Element
  */
 function Item (props: ItemProps): JSX.Element {
+  const { as: Cmp = 'a', ...rest } = props
   return (
     <li className={classNames('nav-item', props.className)}>
-      <a className={classNames('item')} href={props.href}>
+      <Cmp {...rest} className={classNames('item')}>
         {props.children}
-      </a>
+      </Cmp>
     </li>
   )
 }

src/lib/nav/items/items.less

@@ -40,7 +40,9 @@
         display: none;
         top: 0;
         width: 100%;
-        left: 100%;
+        left: 98%;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
     }
     a{
         box-sizing: border-box;

src/lib/nav/items/items.props.ts

@@ -1,10 +1,11 @@
-import { ReactNode } from 'react'
+import { ReactNode, ElementType } from 'react'
 
 interface ItemsProps extends Partial<Omit<HTMLAnchorElement, 'children'>> {
   children?: ReactNode
   title?: string
   href?: string
   isCollapse?: boolean
+  as?: ElementType
 }
 
 export default ItemsProps

src/lib/nav/items/items.tsx

@@ -8,20 +8,21 @@ import './items.less'
  * @returns Element
  */
 function Items (props: ItemsProps): JSX.Element {
+  const { as: Cmp = 'a', ...rest } = props
   const [isPopped, setPop] = useState(false)
   return (
     <li className={classNames('nav-item', { isNavbar: !(props.isCollapse ?? false) }, props.className)}>
-      <a
-        onClick={(e) => {
+      <Cmp
+        onClick={(e: any) => {
           if (props.isCollapse === true) {
             if (!isPopped) {
               e.preventDefault()
             }
             setPop(!isPopped)
           }
-        }} className={classNames('item', 'dropDown')} href={props.href}
+        }} {...rest} className={classNames('item', 'dropDown')}
       >{props.title}
-      </a>
+      </Cmp>
       <ul className={classNames('nav-items', { isCollapse: (props.isCollapse ?? true) && isPopped })}>
         {props.children}
       </ul>

src/lib/nav/logo/logo.less

@@ -7,4 +7,7 @@
     padding-bottom: 0.31rem;
     margin-right: 1rem;
     font-size: 1.25rem;
+    @media screen and (max-width: 575.98px) {
+        margin-right: 0;
+    }
 }

src/lib/nav/logo/logo.md

@@ -1,7 +1,43 @@
 ```tsx padded
-import { Nav, Collapse, Item, Logo } from '../../'
+import { Nav, Collapse, Item, Items, Logo } from '../../'
 import classnames from 'classnames'
 ;<Nav className={classnames('navbar-light')}>
   <Logo href={'/'}>Logo</Logo>
+  <Collapse>
+    <Item href={'#home'}>Home</Item>
+    <Items href={'#articles'} title="Articles">
+      <Items href={'#power-plant'} title="Power plant">
+        <Item href={'#turbine'}>Turbine</Item>
+      </Items>
+    </Items>
+    <Items href={'#about'} title="About">
+      <Item href={'#introduction'}>Introduction</Item>
+    </Items>
+    <Item href={'#pricing'}>Pricing</Item>
+  </Collapse>
+</Nav>
+```
+
+### Logo With Image
+
+```tsx padded
+import { Nav, Collapse, Items, Item, Logo } from '../../'
+import classnames from 'classnames'
+;<Nav className={classnames('navbar-light')}>
+  <Logo href={'/'}>
+    <img src={'logo.png'} />
+  </Logo>
+  <Collapse>
+    <Item href={'#home'}>Home</Item>
+    <Items href={'#articles'} title="Articles">
+      <Items href={'#power-plant'} title="Power plant">
+        <Item href={'#turbine'}>Turbine</Item>
+      </Items>
+    </Items>
+    <Items href={'#about'} title="About">
+      <Item href={'#introduction'}>Introduction</Item>
+    </Items>
+    <Item href={'#pricing'}>Pricing</Item>
+  </Collapse>
 </Nav>
 ```

src/lib/nav/logo/logo.props.ts

@@ -1,8 +1,9 @@
-import { ReactNode } from 'react'
+import { ElementType, ReactNode } from 'react'
 
 interface logoProps extends Partial<Omit<HTMLAnchorElement, 'children'>> {
   children?: ReactNode
   href?: string
+  as?: ElementType
 }
 
 export default logoProps

src/lib/nav/logo/logo.tsx

@@ -8,11 +8,12 @@ import './logo.less'
  * @returns Element
  */
 function Logo (props: logoProps): JSX.Element {
+  const { as: Cmp = 'a', ...rest } = props
   return (
     <div className={classNames('logo-container', props.className)}>
-      <a href={props.href}>
+      <Cmp {...rest}>
         {props.children}
-      </a>
+      </Cmp>
     </div>
   )
 }