feat::package: package updates

exemple/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-craftify-core": "^0.0.16",
+    "react-craftify-core": "^0.0.17",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.16.0"
   },

exemple/src/App.tsx

@@ -6,10 +6,20 @@ import Modalss from './components/Modals'
 import Drawers from './components/Drawers'
 import Tables from './components/Tables'
 import Statistics from './components/Statistics'
+import Navbar from './components/Navbar'
+import Menus from './components/Menus'
 
 function App() {
   return (
     <>
+    {/* <Navbar>
+      Heyy I have
+      Heyy I have <br/>
+      Heyy I have <br/>
+      Heyy I have  <br/>
+<br/>
+      Heyy I have
+    </Navbar> */}
       {/* <ArticleCards/>
        <CardComponent/> */
       }
@@ -18,11 +28,11 @@ function App() {
       {/* <div style={{ margin: "8rem 0" }}>
 					<Tables />
 			</div> */}
-
+{/*       
 				<div style={{ margin: "8rem 0" }}>
 					<Statistics />
-				</div>
-
+				</div> */}
+        {/* <Menus/> */}
     </>
   )
 }

exemple/src/components/Menus/index.tsx

@@ -0,0 +1,59 @@
+import React, { useState, useEffect } from "react";
+import { Card, Container, Menu } from "react-craftify-core";
+import { Link } from "react-router-dom";
+
+
+const Menus = () => {
+  const [selectedItem, setSelectedItem] = useState(window.location.pathname.split("/")[1]);
+
+  useEffect(() => {
+    if (location !== prevLocation) {
+      // Get the right selected item for the actual path
+      setSelectedItem(window.location.pathname.split("/")[1]);
+    }
+  }, [location]);
+
+  return (
+    <Container>
+      <Card>
+        <div className="componentBlock">
+          <h3 className="componentTitle">Menu</h3>
+          <p className="componentDescr">Simple menu</p>
+
+          <Card style={{ padding: 0 }}>
+            <Menu
+              style={{ width: 250, padding: "1.2rem 0" }}
+              selectedItem={selectedItem}
+            >
+              <Menu.Item uniqueKey="">
+                <Link to="/">Menu item 1</Link>
+              </Menu.Item>
+
+              <Menu.Item uniqueKey="2">
+                <Link to="/2">Menu item 2</Link>
+              </Menu.Item>
+
+              <Menu.Item uniqueKey="3">
+                <Link to="/3">Menu item 3</Link>
+              </Menu.Item>
+
+              <Menu.Item uniqueKey="4">
+                <Link to="/4">Menu item 4</Link>
+              </Menu.Item>
+
+              <Menu.Item uniqueKey="5">
+                <Link to="/5">Menu item 5</Link>
+              </Menu.Item>
+
+              <Menu.Item uniqueKey="6">
+                <button>Menu item 6</button>
+              </Menu.Item>
+            </Menu>
+          </Card>
+        </div>
+      </Card>
+    </Container>
+  );
+};
+
+export default Menus;

exemple/src/components/Navbar/Navbar.css

@@ -0,0 +1,7 @@
+.navbar {
+	background: #fff;
+	box-shadow: 0 2px 8px #f0f1f2;
+	position: relative;
+	z-index: 10;
+	max-width: 100%;
+}

exemple/src/components/Navbar/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import  './NavBar.css';
+
+const Navbar = ({ children }) => {
+  return (
+    <div className="navbar">
+      {children}
+    </div>
+  );
+};
+
+Navbar.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default Navbar;

packages/components/package.json

@@ -2,7 +2,7 @@
   "name": "react-craftify-core",
   "version": "0.0.17",
   "description": "React-craftify is a versatile React component library designed to enhance the user interface of your web applications. With a focus on aesthetics and usability, React-craftify provides a collection of customizable UI components that can seamlessly integrate into your projects. ",
-  "main": "dist/cjs/index.js",
+  "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
   "scripts": {