Added Responsive Navbar

example/package.json

@@ -10,6 +10,8 @@
     "eject": "node ../node_modules/react-scripts/bin/react-scripts.js eject"
   },
   "dependencies": {
+    "@coreui/bootstrap-react": "^1.0.0-beta.0",
+    "bootstrap": "^5.1.3",
     "dezenix-react": "link:..",
     "http-serve": "^1.0.1",
     "react": "link:../node_modules/react",

example/src/App.js

@@ -7,9 +7,15 @@ import {
   ComplexComponent,
   PortfolioHome,
 
-
+
+
+
+
 
 } from 'dezenix-react'
+
+import ResponsiveNavbar from './components/ResponsiveNavbar';
+
 import Home from './components/Home'
 import { HashRouter, Route, Routes } from 'react-router-dom'
 import img1 from "./images/img01.png"
@@ -41,7 +47,9 @@ const App = () => {
         />
         <Route path='/complex' element={<ComplexComponent />} />
         <Route path='/portfoliohome' element={<PortfolioHome pic={img1} />} />
-
+         <Route path='/responsivenavbar' element={<ResponsiveNavbar />} />
+
+
       </Routes>
     </HashRouter>
   )

example/src/components/Home.js

@@ -34,7 +34,10 @@ const Home = () => {
           <Link to='/portfoliohome' className='component'>
             <h2> Portfolio Home example</h2>
           </Link>
-
+          <Link to='/responsivenavbar' className='component'>
+            <h2> Responsive Navbar</h2>
+          </Link>
+
         </div>
       </div>
     </div>

example/src/components/ResponsiveNavbar/index.js

@@ -0,0 +1,48 @@
+import React, { useEffect, useState } from 'react';
+import { Alert,CNavbar,CContainer,CNavbarBrand,CNavbarToggler,CCollapse,CNavbarNav,CNavLink,CDropdown,CDropdownToggle,CDropdownMenu,CDropdownDivider,CDropdownItem,CNavItem,CForm,CFormInput,CButton } from '@coreui/bootstrap-react'
+import 'bootstrap/dist/css/bootstrap.min.css'
+
+
+const ResponsiveNavbar = () => {
+  const [visible, setVisible] = useState(false)
+  return (
+    <>
+      <CNavbar expand="lg" colorScheme="light" className="bg-light">
+        <CContainer fluid>
+          <CNavbarBrand href="#">Dezenix</CNavbarBrand>
+          <CNavbarToggler onClick={() => setVisible(!visible)} />
+          <CCollapse className="navbar-collapse" visible={visible}>
+            <CNavbarNav>
+              <CNavItem>
+                <CNavLink href="#" active>
+                  Home
+                </CNavLink>
+              </CNavItem>
+              <CNavItem>
+                <CNavLink href="#">Option 1</CNavLink>
+              </CNavItem>
+              <CDropdown variant="nav-item" popper={false}>
+                <CDropdownToggle color="secondary">More</CDropdownToggle>
+                <CDropdownMenu>
+                  <CDropdownItem href="#">Option 2</CDropdownItem>
+                  <CDropdownItem href="#">Option 3</CDropdownItem>
+                  <CDropdownDivider />
+                  <CDropdownItem href="#">Other Option</CDropdownItem>
+                </CDropdownMenu>
+              </CDropdown>
+
+            </CNavbarNav>
+            <CForm className="d-flex justify-content-end">
+              <CFormInput type="search" className="me-2" placeholder="Search" />
+              <CButton type="submit" color="success" variant="outline">
+                Search
+              </CButton>
+            </CForm>
+          </CCollapse>
+        </CContainer>
+      </CNavbar>
+    </>
+  )
+}
+
+export default ResponsiveNavbar

example/yarn.lock

@@ -1322,6 +1322,11 @@
     exec-sh "^0.3.2"
     minimist "^1.2.0"
 
+"@coreui/bootstrap-react@^1.0.0-beta.0":
+  version "1.0.0-beta.0"
+  resolved "https://registry.yarnpkg.com/@coreui/bootstrap-react/-/bootstrap-react-1.0.0-beta.0.tgz#002cbf7593ddf41e9c2489eeb909d625fbaf314e"
+  integrity sha512-jNCPCm/7nTf3eE/5/LlIwwIWW6ffAU5vg+bw8L+lmkhLXIt5RWEchbYiKmLBvSB9OaWvLo95NuOQtiWZIv0zNQ==
+
 "@csstools/convert-colors@^1.4.0":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"
@@ -2973,6 +2978,11 @@ boolbase@^1.0.0, boolbase@~1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
+bootstrap@^5.1.3:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.1.3.tgz#ba081b0c130f810fa70900acbc1c6d3c28fa8f34"
+  integrity sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"

package.json

@@ -4,10 +4,7 @@
   "description": "A library of components",
   "author": "Dezenix",
   "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/Dezenix/frontend-reactjs.git"
-  },
+  "repository": "https://github.com/Dezenix/frontend-reactjs.git",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
   "source": "src/index.js",

src/index.js

@@ -4,3 +4,4 @@ export { default as ProductCard } from './lib-components/product_card'
 export { default as ProgressBar } from './lib-components/progress_bar'
 export { default as ComplexComponent } from './lib-components/complexComponent'
 export { default as PortfolioHome } from './lib-components/portfolio_home'
+export { default as ResponsiveNavbar } from './lib-components/ResponsiveNavbar'

src/lib-components/ResponsiveNavbar/index.js

@@ -0,0 +1,48 @@
+import React, { useEffect, useState } from 'react';
+import { Alert,CNavbar,CContainer,CNavbarBrand,CNavbarToggler,CCollapse,CNavbarNav,CNavLink,CDropdown,CDropdownToggle,CDropdownMenu,CDropdownDivider,CDropdownItem,CNavItem,CForm,CFormInput,CButton } from '@coreui/bootstrap-react'
+import 'bootstrap/dist/css/bootstrap.min.css'
+
+
+const ResponsiveNavbar = () => {
+  const [visible, setVisible] = useState(false)
+  return (
+    <>
+      <CNavbar expand="lg" colorScheme="light" className="bg-light">
+        <CContainer fluid>
+          <CNavbarBrand href="#">Dezenix</CNavbarBrand>
+          <CNavbarToggler onClick={() => setVisible(!visible)} />
+          <CCollapse className="navbar-collapse" visible={visible}>
+            <CNavbarNav>
+              <CNavItem>
+                <CNavLink href="#" active>
+                  Home
+                </CNavLink>
+              </CNavItem>
+              <CNavItem>
+                <CNavLink href="#">Option 1</CNavLink>
+              </CNavItem>
+              <CDropdown variant="nav-item" popper={false}>
+                <CDropdownToggle color="secondary">More</CDropdownToggle>
+                <CDropdownMenu>
+                  <CDropdownItem href="#">Option 2</CDropdownItem>
+                  <CDropdownItem href="#">Option 3</CDropdownItem>
+                  <CDropdownDivider />
+                  <CDropdownItem href="#">Other Option</CDropdownItem>
+                </CDropdownMenu>
+              </CDropdown>
+
+            </CNavbarNav>
+            <CForm className="d-flex justify-content-end">
+              <CFormInput type="search" className="me-2" placeholder="Search" />
+              <CButton type="submit" color="success" variant="outline">
+                Search
+              </CButton>
+            </CForm>
+          </CCollapse>
+        </CContainer>
+      </CNavbar>
+    </>
+  )
+}
+
+export default ResponsiveNavbar