From c90027a632d6cb0aeaf60492cf1b593c6bbbdc8b Mon Sep 17 00:00:00 2001
From: Harry Ross <hazross@hotmail.com>
Date: Fri, 29 Dec 2023 17:58:52 +1100
Subject: [PATCH] Made readme additions

---
 README.md | 57 ++++++++++++++++++++++++++++++++-----------------------
 1 file changed, 33 insertions(+), 24 deletions(-)

diff --git a/README.md b/README.md
index 0383dfb..f491fa3 100644
--- a/README.md
+++ b/README.md
@@ -2,20 +2,34 @@
 
 ### Installation
 
-1. install package
+1. Install package
 ```bash
 npm install ssw.megamenu
 ```
-2. import global styles
+
+```bash
+yarn add ssw.megamenu
+```
+
+```bash
+pnpm add ssw.megamenu
+```
+
+2. Import the generated styles
+
+**NOTE: If you have TailwindCSS installed in your project, you can skip this step**
+
 ```javascript
-import "ssw.megamenu/dist/style.css";
+import "ssw.megamenu/style.css";
 ```
-3. use components in your project
+
+3. You can then use the components in your React app like so:
 ```javascript
-// commonjs
+// CommonJS
 const { Menu, MobileMenu, MenuBar } = require('ssw.megamenu');
-// es module
-import { Menu, MobileMenu, MenuBar } from 'ssw.megamenu';
+
+// ESM
+import { MegaMenuLayout } from 'ssw.megamenu';
 ```
 
 ### Basic Usage
@@ -25,15 +39,12 @@ The `ssw.megamenu` NPM package provides you with the `<MegaMenuLayout />` compon
 #### Example:
 
 ```tsx
-import React, { useState, useRef } from 'react';
-import { Menu, MobileMenu } from 'ssw.megamenu';
-import './App.css';
+import { MegaMenuLayout } from 'ssw.megamenu';
 
 function App() {
   return (
-    <header className="App-header">Test MenuBar</header>
     <MegaMenuLayout />
-    <div>Some content</div>
+    /* {{ CONTENT_HERE }} */
   );
 }
 
@@ -46,16 +57,12 @@ The `<MegaMenuLayout />` component can be used with SSG (Static Site Generation)
 #### Example usage with SSR (Next.js):
 
 ```tsx
-
-import React, { useState, useRef } from 'react';
-import { Menu, MobileMenu } from 'ssw.megamenu';
-import './App.css';
+import { MegaMenuLayout } from 'ssw.megamenu';
 
 function App(props) {
   return (
-    <header className="App-header">Test MenuBar</header>
     <MegaMenuLayout menuBarItems={props.menuBarItems} />
-    <div>Some content</div>
+    /* {{ CONTENT_HERE }} */
   );
 }
 
@@ -77,10 +84,12 @@ In the project directory, you can run:
 
 ### `pnpm dev`
 
-Runs the app in the development mode.<br />
+Runs the app in the development mode.
+
+
 Open [http://localhost:5173](http://localhost:5173) to view it in the browser.
 
-The page will reload if you make edits.<br />
+The page will reload if you make edits.
 
 ### `pnpm build`
 
@@ -88,8 +97,8 @@ Builds the lib for production to the `dist` folder.<br />
 
 ### How to publish?
 
-1. **Important: Before to push your changes, you need to increment the version number in the file package.json**
-2. Make a pull request to integrate your code into the main branch.
+1. **Important: Before to push your changes, you need to increment the version number in the file package.json using [semver](https://semver.org/)**
+2. Make a pull request to add your code into the `main` branch.
 3. Get the pull request approved
-4. Merged your code into main branch
-5. Package published by github actions
+4. Merge your code into the `main` branch
+5. Publish a GitHub release with the same version number as the one you incremented in the file package.json at https://github.com/SSWConsulting/SSW.MegaMenu/releases