1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[437],{7481:function(e,n,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/components/navbar",function(){return t(9822)}])},9822:function(e,n,t){"use strict";t.r(n),t.d(n,{default:function(){return P}});var a=t(5893),r=t(9008),l=t(2530),o=t(2167),s=t(7294);function i(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t=[],a=!0,r=!1,l=void 0;try{for(var o,s=e[Symbol.iterator]();!(a=(o=s.next()).done)&&(t.push(o.value),!n||t.length!==n);a=!0);}catch(i){r=!0,l=i}finally{try{a||null==s.return||s.return()}finally{if(r)throw l}}return t}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}var c={navbar:"relative px-4 py-2 shadow top-0 w-full lg:flex lg:flex-row lg:items-center lg:justify-start lg:relative",brand:"cursor-pointer font-bold inline-block mr-4 py-1.5 text-2xl whitespace-nowrap hover:text-gray-200",toggler:"block float-right text-4xl lg:hidden focus:outline-none focus:shadow",item:"whitespace-pre cursor-pointer px-4 py-3 hover:text-gray-200",collapse:{default:"border-t border-gray-500 fixed left-0 mt-2 shadow py-2 text-center lg:border-none lg:flex lg:flex-grow lg:items-center lg:mt-0 lg:py-0 lg:relative lg:shadow-none",open:"h-auto visible transition-all duration-500 ease-out w-full opacity-100 lg:transition-none",close:"h-auto invisible w-0 transition-all duration-300 ease-in lg:opacity-100 lg:transition-none lg:visible"},nav:{start:"block mb-0 mr-auto pl-0 lg:flex lg:mb-0 lg:pl-0",middle:"block mb-0 ml-auto pl-0 lg:flex lg:pl-0 lg:mb-0 lg:mx-auto",end:"block pl-0 mb-0 ml-auto lg:flex lg:pl-0 lg:mb-0"}},d=s.createContext({});function p(e){var n=e.children,t=e.className,r=i(s.useState(!1),2),l=r[0],o=r[1],p=s.useRef(null),u=s.useCallback((function(){window.innerWidth>1024&&o((function(e){return!e}))}),[]);return s.useEffect((function(){var e=function(e){var n;if(window.innerWidth<1024&&!(null===(n=p.current)||void 0===n?void 0:n.contains(e.target))){if(!l)return;o(!1)}};return window.addEventListener("click",e),function(){return window.removeEventListener("click",e)}}),[l,p]),(0,a.jsx)(d.Provider,{value:{open:l,toggle:u},children:(0,a.jsx)("nav",{ref:p,className:"".concat(t," ").concat(c.navbar),children:n})})}var u=function(){return s.useContext(d)};function v(e){var n=e.children,t=e.href;return(0,a.jsx)("a",{href:t,className:c.brand,children:(0,a.jsx)("strong",{children:n})})}function h(){var e=u().toggle;return(0,a.jsx)("button",{type:"button","aria-expanded":"false","aria-label":"Toggle navigation",className:c.toggler,onClick:e,children:"\u2261"})}function b(e){var n=e.children,t=u().open;return(0,a.jsx)("div",{style:{backgroundColor:"inherit"},className:"".concat(c.collapse.default,"\n ").concat(t?c.collapse.open:c.collapse.close),children:n})}function g(e){var n=e.children,t=e.orientation;return(0,a.jsx)("ul",{className:c.nav[t],children:n})}function f(e){var n=e.children;return(0,a.jsx)("li",{className:c.item,children:n})}function m(e){var n=e.children,t=e.href,r=e.active,l=e.activeClass;return(0,a.jsx)("a",{href:t,className:r?l:"",children:n})}var x=function(){return(0,a.jsx)("div",{className:"mb-8",children:(0,a.jsxs)(p,{className:"text-white bg-indigo-900",children:[(0,a.jsx)(v,{href:"#",children:(0,a.jsxs)("svg",{className:"w-9 h-9",preserveAspectRatio:"xMidYMid",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 256 153.6",children:[(0,a.jsxs)("linearGradient",{id:"a",x1:"-2.778%",y1:"32%",y2:"67.556%",children:[(0,a.jsx)("stop",{offset:"0",stopColor:"#2298bd"}),(0,a.jsx)("stop",{offset:"1",stopColor:"#0ed7b5"})]}),(0,a.jsx)("path",{d:"M128 0C93.867 0 72.533 17.067 64 51.2 76.8 34.133 91.733 27.733 108.8 32c9.737 2.434 16.697 9.499 24.401 17.318C145.751 62.057 160.275 76.8 192 76.8c34.133 0 55.467-17.067 64-51.2-12.8 17.067-27.733 23.467-44.8 19.2-9.737-2.434-16.697-9.499-24.401-17.318C174.249 14.743 159.725 0 128 0zM64 76.8C29.867 76.8 8.533 93.867 0 128c12.8-17.067 27.733-23.467 44.8-19.2 9.737 2.434 16.697 9.499 24.401 17.318C81.751 138.857 96.275 153.6 128 153.6c34.133 0 55.467-17.067 64-51.2-12.8 17.067-27.733 23.467-44.8 19.2-9.737-2.434-16.697-9.499-24.401-17.318C110.249 91.543 95.725 76.8 64 76.8z",fill:"url(#a)"})]})}),(0,a.jsx)(h,{}),(0,a.jsxs)(b,{children:[(0,a.jsxs)(g,{orientation:"start",children:[(0,a.jsx)(f,{children:(0,a.jsx)(m,{href:"#",children:"Get Started"})}),(0,a.jsx)(f,{children:(0,a.jsx)(m,{href:"#",children:"Core Concepts"})})]}),(0,a.jsxs)(g,{orientation:"end",children:[(0,a.jsx)(f,{children:(0,a.jsx)(m,{href:"#",children:"Base Styles"})}),(0,a.jsx)(f,{children:(0,a.jsx)(m,{href:"#",children:"Customization"})})]})]})]})})},N=function(){return(0,a.jsx)("div",{className:"mb-8",children:(0,a.jsxs)(p,{className:"text-white bg-gray-900",children:[(0,a.jsx)(v,{href:"#",children:(0,a.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",className:"w-9 h-9 bg-white rounded-full",children:(0,a.jsx)("path",{d:"M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"})})}),(0,a.jsx)(h,{}),(0,a.jsxs)(b,{children:[(0,a.jsxs)(g,{orientation:"start",children:[(0,a.jsx)(f,{children:(0,a.jsx)(m,{href:"#",active:!0,activeClass:"text-blue-500",children:"Organisation"})}),(0,a.jsx)(f,{children:(0,a.jsx)(m,{href:"#",children:"Issues"})})]}),(0,a.jsxs)(g,{orientation:"middle",children:[(0,a.jsx)(f,{children:(0,a.jsx)(m,{href:"#",children:"Pull Requests"})}),(0,a.jsx)(f,{children:(0,a.jsx)(m,{href:"#",children:"Issues"})})]}),(0,a.jsxs)(g,{orientation:"end",children:[(0,a.jsx)(f,{children:(0,a.jsx)(m,{href:"#",children:"Market Place"})}),(0,a.jsx)(f,{children:(0,a.jsx)(m,{href:"#",children:"Explore"})})]})]})]})})},y=function(){return(0,a.jsx)("div",{className:"mb-8",children:(0,a.jsxs)(p,{className:"text-gray-600 bg-white",children:[(0,a.jsx)(v,{href:"#",children:(0,a.jsx)("img",{src:"https://seeklogo.com/images/N/next-js-logo-8FCFF51DD2-seeklogo.com.png",alt:"Next.js",className:"w-9 h-9"})}),(0,a.jsx)(h,{}),(0,a.jsxs)(b,{children:[(0,a.jsx)(g,{orientation:"start",children:(0,a.jsx)(f,{children:(0,a.jsx)(m,{href:"#",children:"Documentation"})})}),(0,a.jsxs)(g,{orientation:"end",children:[(0,a.jsx)(f,{children:(0,a.jsx)(m,{href:"#",children:"Deployment"})}),(0,a.jsx)(f,{children:(0,a.jsx)(m,{href:"#",children:"Basic Features"})}),(0,a.jsx)(f,{children:(0,a.jsx)(m,{href:"#",children:"Advanced Features"})})]})]})]})})},w=t(3905);function j(e,n){if(null==e)return{};var t,a,r=function(e,n){if(null==e)return{};var t,a,r={},l=Object.keys(e);for(a=0;a<l.length;a++)t=l[a],n.indexOf(t)>=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(a=0;a<l.length;a++)t=l[a],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var k={};function C(e){var n=e.components,t=j(e,["components"]);return(0,w.kt)("wrapper",Object.assign({},k,t,{components:n,mdxType:"MDXLayout"}),(0,w.kt)("pre",null,(0,w.kt)("code",Object.assign({parentName:"pre"},{className:"language-jsx"}),'import React from \'react\';
1\n\nexport const NavbarPage = () => {\n return (\n <Navbar className="bg-indigo-900 text-white">\n <NavbarBrand href="#">\n <svg\n className="w-9 h-9"\n preserveAspectRatio="xMidYMid"\n xmlns="http://www.w3.org/2000/svg"\n viewBox="0 0 256 153.6"\n >\n <linearGradient id="a" x1="-2.778%" y1="32%" y2="67.556%">\n <stop offset="0" stopColor="#2298bd" />\n <stop offset="1" stopColor="#0ed7b5" />\n </linearGradient>\n <path\n d="M128 0C93.867 0 72.533 17.067 64 51.2 76.8 34.133 91.733 27.733 108.8 32c9.737 2.434 16.697 9.499 24.401 17.318C145.751 62.057 160.275 76.8 192 76.8c34.133 0 55.467-17.067 64-51.2-12.8 17.067-27.733 23.467-44.8 19.2-9.737-2.434-16.697-9.499-24.401-17.318C174.249 14.743 159.725 0 128 0zM64 76.8C29.867 76.8 8.533 93.867 0 128c12.8-17.067 27.733-23.467 44.8-19.2 9.737 2.434 16.697 9.499 24.401 17.318C81.751 138.857 96.275 153.6 128 153.6c34.133 0 55.467-17.067 64-51.2-12.8 17.067-27.733 23.467-44.8 19.2-9.737-2.434-16.697-9.499-24.401-17.318C110.249 91.543 95.725 76.8 64 76.8z"\n fill="url(#a)"\n />\n </svg>\n </NavbarBrand>\n <NavbarToggler />\n <NavbarCollapse>\n <NavbarNav orientation="start">\n <NavbarItem>\n <NavbarLink href="#">Get Started</NavbarLink>\n </NavbarItem>\n <NavbarItem>\n <NavbarLink href="#">Core Concepts</NavbarLink>\n </NavbarItem>\n </NavbarNav>\n <NavbarNav orientation="end">\n <NavbarItem>\n <NavbarLink href="#">Base Styles</NavbarLink>\n </NavbarItem>\n <NavbarItem>\n <NavbarLink href="#">Customization</NavbarLink>\n </NavbarItem>\n </NavbarNav>\n </NavbarCollapse>\n </Navbar>\n );\n};\n\n/* Navbar logic */\n\nconst style = {\n navbar: `fixed px-4 py-2 shadow top-0 w-full lg:flex lg:flex-row lg:items-center lg:justify-start lg:relative`,\n brand: `cursor-pointer font-bold inline-block mr-4 py-1.5 text-2xl whitespace-nowrap hover:text-gray-200`,\n toggler: `block float-right text-4xl lg:hidden focus:outline-none focus:shadow`,\n item: `whitespace-pre cursor-pointer px-4 py-3 hover:text-gray-200`,\n collapse: {\n default: `border-t border-gray-400 fixed left-0 mt-2 shadow py-2 text-center lg:border-none lg:flex lg:flex-grow lg:items-center lg:mt-0 lg:py-0 lg:relative lg:shadow-none`,\n open: `h-auto visible transition-all duration-500 ease-out w-full opacity-100 lg:transition-none`,\n close: `h-auto invisible w-0 transition-all duration-300 ease-in lg:opacity-100 lg:transition-none lg:visible`,\n },\n nav: {\n start: `block mb-0 mr-auto pl-0 lg:flex lg:mb-0 lg:pl-0`,\n middle: `block mb-0 ml-auto pl-0 lg:flex lg:pl-0 lg:mb-0 lg:mx-auto`,\n end: `block pl-0 mb-0 ml-auto lg:flex lg:pl-0 lg:mb-0`,\n },\n};\n\nconst Context = React.createContext({});\n\nconst Navbar = ({ children, className }) => {\n const [open, setOpen] = React.useState(false);\n const navbarRef = React.useRef(null);\n\n const toggle = React.useCallback(() => {\n setOpen((prevState) => !prevState);\n }, []);\n\n // close navbar on click outside when viewport is less than 1024px\n React.useEffect(() => {\n const handleOutsideClick = (event) => {\n if (window.innerWidth < 1024) {\n if (!navbarRef.current?.contains(event.target)) {\n if (!open) return;\n setOpen(false);\n }\n }\n };\n window.addEventListener(\'click\', handleOutsideClick);\n return () => window.removeEventListener(\'click\', handleOutsideClick);\n }, [open, navbarRef]);\n\n return (\n <Context.Provider value={{ open, toggle }}>\n <nav ref={navbarRef} className={`${className} ${style.navbar}`}>\n {children}\n </nav>\n </Context.Provider>\n );\n};\n\nconst useToggle = () => React.useContext(Context);\n\n/* You can wrap the a tag with Link and pass href to Link if you are using either Create-React-App, Next.js or Gatsby */\nconst NavbarBrand = ({ children, href }) => (\n <a href={href} className={style.brand}>\n <strong>{children}</strong>\n </a>\n);\n\nconst NavbarToggler = () => {\n const { toggle } = useToggle();\n return (\n <button\n type="button"\n aria-expanded="false"\n aria-label="Toggle navigation"\n className={style.toggler}\n onClick={toggle}\n >\n ≡\n </button>\n );\n};
1\n\nconst NavbarCollapse = ({ children }) => {\n const { open } = useToggle();\n return (\n <div\n style={{ backgroundColor: \'inherit\' }}\n className={`${style.collapse.default}\n ${open ? style.collapse.open : style.collapse.close}`}\n >\n {children}\n </div>\n );\n};\n\nconst NavbarNav = ({ children, orientation }) => (\n <ul className={style.nav[orientation]}>{children}</ul>\n);\n\nconst NavbarItem = ({ children }) => <li className={style.item}>{children}</li>;\n\n/* You can wrap the a tag with Link and pass href to Link if you are using either Create-React-App, Next.js or Gatsby */\nconst NavbarLink = ({ children, href, active, activeClass }) => (\n <a href={href} className={active ? activeClass : \'\'}>\n {children}\n </a>\n);\n')))}function L(e,n){if(null==e)return{};var t,a,r=function(e,n){if(null==e)return{};var t,a,r={},l=Object.keys(e);for(a=0;a<l.length;a++)t=l[a],n.indexOf(t)>=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(a=0;a<l.length;a++)t=l[a],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}C.isMDXComponent=!0;var O={};function R(e){var n=e.components,t=L(e,["components"]);return(0,w.kt)("wrapper",Object.assign({},O,t,{components:n,mdxType:"MDXLayout"}),(0,w.kt)("pre",null,(0,w.kt)("code",Object.assign({parentName:"pre"},{className:"language-jsx"}),'import React from \'react\';\n\nexport const NavbarPage = () => {\n return (\n <Navbar className="bg-gray-900 text-white">\n <NavbarBrand href="#">\n <svg\n xmlns="http://www.w3.org/2000/svg"\n viewB
1ox="0 0 24 24"\n className="w-9 h-9 bg-white rounded-full"\n >\n <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />\n </svg>\n </NavbarBrand>\n <NavbarToggler />\n <NavbarCollapse>\n <NavbarNav orientation="start">\n <NavbarItem>\n <NavbarLink href="#" active={true} activeClass="text-blue-500">\n Organisation\n </NavbarLink>\n </NavbarItem>\n <NavbarItem>\n <NavbarLink href="#">Issues</NavbarLink>\n </NavbarItem>\n </NavbarNav>\n <NavbarNav orientation="middle">\n <NavbarItem>\n <NavbarLink href="#">Pull Requests</NavbarLink>\n </NavbarItem>\n <NavbarItem>\n <NavbarLink href="#">Issues</NavbarLink>\n </NavbarItem>\n </NavbarNav>\n <NavbarNav orientation="end">\n <NavbarItem>\n <NavbarLink href="#">Market Place</NavbarLink>\n </NavbarItem>\n <NavbarItem>\n <NavbarLink href="#">Explore</NavbarLink>\n </NavbarItem>\n </NavbarNav>\n </NavbarCollapse>\n </Navbar>\n );\n};\n\n/* Navbar logic */\n\nconst style = {\n navbar: `fixed px-4 py-2 shadow top-0 w-full lg:flex lg:flex-row lg:items-center lg:justify-start lg:relative`,\n brand: `cursor-pointer font-bold inline-block mr-4 py-1.5 text-2xl whitespace-nowrap hover:text-gray-200`,\n toggler: `block float-right text-4xl lg:hidden focus:outline-none focus:shadow`,\n item: `whitespace-pre cursor-pointer px-4 py-3 hover:text-gray-200`,\n collapse: {\n default: `border-t border-gray-500 fixed left-0 mt-2 shadow py-2 text-center lg:border-none lg:flex lg:flex-grow lg:items-center lg:mt-0 lg:py-0 lg:relative lg:shadow-none`,\n open: `h-auto visible transition-all duration-500 ease-out w-full opacity-100 lg:transition-none`,\n close: `h-auto invisible w-0 transition-all duration-300 ease-in lg:opacity-100 lg:transition-none lg:visible`,\n },\n nav: {\n start: `block mb-0 mr-auto pl-0 lg:flex lg:mb-0 lg:pl-0`,\n middle: `block mb-0 ml-auto pl-0 lg:flex lg:pl-0 lg:mb-0 lg:mx-auto`,\n end: `block pl-0 mb-0 ml-auto lg:flex lg:pl-0 lg:mb-0`,\n },\n};\n\nconst Context = React.createContext({});\n\nconst Navbar = ({ children, className }) => {\n const [open, setOpen] = React.useState(false);\n const navbarRef = React.useRef(null);\n\n const toggle = React.useCallback(() => {\n setOpen((prevState) => !prevState);\n }, []);\n\n // close navbar on click outside when viewport is less than 1024px\n React.useEffect(() => {\n const handleOutsideClick = (event) => {\n if (window.innerWidth < 1024) {\n if (!navbarRef.current?.contains(event.target)) {\n if (!open) return;\n setOpen(false);\n }\n }\n };\n window.addEventListener(\'click\', handleOutsideClick);\n return () => window.removeEventListener(\'click\', handleOutsideClick);\n }, [open, navbarRef]);\n\n return (\n <Context.Provider value={{ open, toggle }}>\n <nav ref={navbarRef} className={`${className} ${style.navbar}`}>\n {children}\n </nav>\n </Context.Provider>\n );\n};\n\nconst useToggle = () => React.useContext(Context);\n\n/* You can wrap the a tag with Link and pass href to Link if you are using either Create-React-App, Next.js or Gatsby */\nconst NavbarBrand = ({ children, href }) => (\n <a href={href} className={style.brand}>\n <strong>{children}</strong>\n </a>\n);\n\nconst NavbarToggler = () => {\n const { toggle } = useToggle();\n return (\n <button\n type="button"\n aria-expanded="false"\n aria-label="Toggle navigation"\n className={style.toggler}\n onClick={toggle}\n >\n ≡\n </button>\n );\n};
1\n\nconst NavbarCollapse = ({ children }) => {\n const { open } = useToggle();\n return (\n <div\n style={{ backgroundColor: \'inherit\' }}\n className={`${style.collapse.default}\n ${open ? style.collapse.open : style.collapse.close}`}\n >\n {children}\n </div>\n );\n};\n\nconst NavbarNav = ({ children, orientation }) => (\n <ul className={style.nav[orientation]}>{children}</ul>\n);\n\nconst NavbarItem = ({ children }) => <li className={style.item}>{children}</li>;\n\n/* You can wrap the a tag with Link and pass href to Link if you are using either Create-React-App, Next.js or Gatsby */\nconst NavbarLink = ({ children, href, active, activeClass }) => (\n <a href={href} className={active ? activeClass : \'\'}>\n {children}\n </a>\n);\n')))}function I(e,n){if(null==e)return{};var t,a,r=function(e,n){if(null==e)return{};var t,a,r={},l=Object.keys(e);for(a=0;a<l.length;a++)t=l[a],n.indexOf(t)>=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(a=0;a<l.length;a++)t=l[a],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}R.isMDXComponent=!0;var S={};function T(e){var n=e.components,t=I(e,["components"]);return(0,w.kt)("wrapper",Object.assign({},S,t,{components:n,mdxType:"MDXLayout"}),(0,w.kt)("pre",null,(0,w.kt)("code",Object.assign({parentName:"pre"},{className:"language-jsx"}),'import React from \'react\';\n\nexport const NavbarPage = () => {\n return (\n <Navbar className="bg-white text-gray-600">\n <NavbarBrand href="#">\n <img\n src="https://seeklogo.com/images/N/next-js-logo-8FCFF51DD2-seeklogo.com.png"\n alt="Next.js"\n className="w-9 h-9"\n />\n </NavbarBrand>\n <NavbarToggler />\n <NavbarCollapse>\n <NavbarNav orientation="start">\n <NavbarItem>\n <NavbarLink href="#">Documentation</NavbarLink>\n </NavbarItem>\n </NavbarNav>\n <NavbarNav orientation="end">\n <NavbarItem>\n <NavbarLink href="#">Deployment</NavbarLink>\n </NavbarItem>\n <NavbarItem>\n <NavbarLink href="#">Basic Features</NavbarLink>\n </NavbarItem>\n <NavbarItem>\n <NavbarLink href="#">Advanced Features</NavbarLink>\n </NavbarItem>\n </NavbarNav>\n </NavbarCollapse>\n </Navbar>\n );\n};\n\n/* Navbar logic */\n\nconst style = {\n navbar: `fixed px-4 py-2 shadow top-0 w-full lg:flex lg:flex-row lg:items-center lg:justify-start lg:relative`,\n brand: `cursor-pointer font-bold inline-block mr-4 py-1.5 text-2xl whitespace-nowrap hover:text-gray-200`,\n toggler: `block float-right text-4xl lg:hidden focus:outline-none focus:shadow`,\n item: `whitespace-pre cursor-pointer px-4 py-3 hover:text-gray-200`,\n collapse: {\n default: `border-t border-gray-200 fixed left-0 mt-2 shadow py-2 text-center lg:border-none lg:flex lg:flex-grow lg:items-center lg:mt-0 lg:py-0 lg:relative lg:shadow-none`,\n open: `h-auto visible transition-all duration-500 ease-out w-full opacity-100 lg:transition-none`,\n close: `h-auto invisible w-0 transition-all duration-300 ease-in lg:opacity-100 lg:transition-none lg:visible`,\n },\n nav: {\n start: `block mb-0 mr-auto pl-0 lg:flex lg:mb-0 lg:pl-0`,\n middle: `block mb-0 ml-auto pl-0 lg:flex lg:pl-0 lg:mb-0 lg:mx-auto`,\n end: `block pl-0 mb-0 ml-auto lg:flex lg:pl-0 lg:mb-0`,\n },\n};\n\nconst Context = React.createContext({});\n\nconst Navbar = ({ children, className }) => {\n const [open, setOpen] = React.useState(false);\n const navbarRef = React.useRef(null);\n\n const toggle = React.useCallback(() => {\n setOpen((prevState) => !prevState);\n }, []);\n\n // close navbar on click outside when viewport is less than 1024px\n React.useEffect(() => {\n const handleOutsideClick = (event) => {\n if (window.innerWidth < 1024) {\n if (!navbarRef.current?.contains(event.target)) {\n if (!open) return;\n setOpen(false);\n }\n }\n };\n window.addEventListener(\'click\', handleOutsideClick);\n return () => window.removeEventListener(\'click\', handleOutsideClick);\n }, [open, navbarRef]);\n\n return (\n <Context.Provider value={{ open, toggle }}>\n <nav ref={navbarRef} className={`${className} ${style.navbar}`}>\n {children}\n </nav>\n </Context.Provider>\n );\n};\n\nconst useToggle = () => React.useContext(Context);\n\n/* You can wrap the a tag with Link and pass href to Link if you are using either Create-React-App, Next.js or Gatsby */\nconst NavbarBrand = ({ children, href }) => (\n <a href={href} className={style.brand}>\n <strong>{children}</strong>\n </a>\n);\n\nconst NavbarToggler = () => {\n const { toggle } = useToggle();\n return (\n <button\n type="button"\n aria-expanded="false"\n aria-label="Toggle navigation"\n className={style.toggler}\n onClick={toggle}\n >\n ≡\n </button>\n );\n};
1\n\nconst NavbarCollapse = ({ children }) => {\n const { open } = useToggle();\n return (\n <div\n style={{ backgroundColor: \'inherit\' }}\n className={`${style.collapse.default}\n ${open ? style.collapse.open : style.collapse.close}`}\n >\n {children}\n </div>\n );\n};\n\nconst NavbarNav = ({ children, orientation }) => (\n <ul className={style.nav[orientation]}>{children}</ul>\n);\n\nconst NavbarItem = ({ children }) => <li className={style.item}>{children}</li>;\n\n/* You can wrap the a tag with Link and pass href to Link if you are using either Create-React-App, Next.js or Gatsby */\nconst NavbarLink = ({ children, href, active, activeClass }) => (\n <a href={href} className={active ? activeClass : \'\'}>\n {children}\n </a>\n);\n')))}function P(){return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(r.default,{children:[(0,a.jsx)("title",{children:"Navbar"}),(0,a.jsx)("meta",{name:"description",content:"Kimia-ui navbar component is a navigation header that is placed at the top of the page which allows to navigate in different pages"}),(0,a.jsx)("link",{rel:"canonical",href:"https://kimia-ui.vercel.app/components/navbar"})]}),(0,a.jsxs)(l.W,{children:[(0,a.jsx)("h1",{className:"mb-20 mt-12 text-center text-gray-600 text-3xl font-bold md:text-5xl",children:"Navbar"}),(0,a.jsx)("h2",{className:"mb-4 text-gray-700 text-lg font-bold md:text-2xl",children:"Please note"}),(0,a.jsxs)("div",{className:"text-gray-700",children:[(0,a.jsx)("p",{className:"mb-3",children:"The navbar examples will not toggle on this site when the viewport is less than 1024px. This is done intentionally to prevent the navbar-items from displaying, as when the viewport is less than 1024px, the navigation bar will be fixed and positioned at the top (top-0)."}),(0,a.jsx)("p",{className:"mb-12",children:"For this reason, we can't display navbar-items to prevent all navbar examples from being displayed at the same position. But the snippets will work as expected when you use it. The navbar items will be displayed as a sidebar with a smooth transition."})]}),(0,a.jsx)("h2",{className:"mb-12 text-gray-700 text-lg font-bold md:text-2xl",children:"Components Props"}),(0,a.jsx)("h3",{className:"mb-2 pl-2 text-gray-700 text-lg font-bold md:text-lg",children:"Navbar"}),(0,a.jsx)(o.Z,{name:"Navbar"}),(0,a.jsx)("h3",{className:"mb-2 mt-16 pl-2 text-gray-700 text-lg font-bold md:text-lg",children:"NavbarNav"}),(0,a.jsx)(o.Z,{name:"NavbarNav"}),(0,a.jsx)("h3",{className:"mb-2 mt-16 pl-2 text-gray-700 text-lg font-bold md:text-lg",children:"NavbarLink"}),(0,a.jsx)(o.Z,{name:"NavbarLink"}),(0,a.jsx)("div",{className:"mb-16"}),(0,a.jsx)(x,{}),(0,a.jsx)(C,{}),(0,a.jsx)(N,{}),(0,a.jsx)(R,{}),(0,a.jsx)(y,{}),(0,a.jsx)(T,{})]})]})}T.isMDXComponent=!0},2167:function(e,n,t){"use strict";t.d(n,{Z:function(){return l}});var a=t(5893),r=JSON.parse('{"A":[{"id":1,"name":"Prop"},{"id":2,"name":"Type"},{"id":3,"name":"Description"}],"d":{"autocomplete":[{"prop":"disabled","type":"Boolean","description":"it specifies that the autocomplete should be disabled."},{"prop":"*value","type":"String","description":"value of the autocomplete input"},{"prop":"*setValue","type":"function","description":"a function for handling the autocomplete value"},{"prop":"*suggestions","type":"Array[String]","description":"Array of options used to autocomplete input"},{"prop":"notFound","type":"String | React Node","description":"message to display when no suggestion is available"},{"prop":"label","type":"String","description":"label of the field"},{"prop":"name","type":"String","description":"name of the field"}],"field":[{"prop":"disabled","type":"Boolean","description":"it specifies that a field should be disabled."},{"prop":"dot","type":"Boolean","description":"If true, a dot will be displayed on the side of the label to indicate a required field"},{"prop":"error","type":"String","description":"displays an error message (when its value is not null)"},{"prop":"icon","type":"JSX.Element","description":"displays an icon to the left of the field"},{"prop":"label","type":"String","description":"label of the field"},{"prop":"*name","type":"String","description":"name of the field"},{"prop":"ref","type":"any","description":"React ref"}
1,{"prop":"*type","type":"String","description":"type of the field (select, textarea, text, number, checkbox, password etc...)"}],"copyToClipboard":[{"prop":"*ref","type":"any","description":"Should be passed to the element you want to copy"},{"prop":"*onCopy","type":"function","description":"a function for handling copy to clipboard"},{"prop":"*copied","type":"boolean","description":"is true when you trigger onCopy function and false when the copied value is reset"},{"prop":"*duration","type":"number","description":"timeout value (in milliseconds) to reset the copied value. default to 3s"}],"Navbar":[{"prop":"className","type":"string","description":"Sets custom classes"}],"NavbarNav":[{"prop":"orientation","type":"string","description":"The orientation of the nav-items. possibles values (start, middle, end)"}],"NavbarLink":[{"prop":"active","type":"boolean","description":"Sets active state of the NavBarLink"},{"prop":"activeClass","type":"string","description":"Sets custom classes when active is true. this is useful when you want to set additional classes on an active-link"}]}}');function l(e){var n=e.name;return(0,a.jsx)("div",{className:"pr-1 max-w-full overflow-x-auto",children:(0,a.jsxs)("table",{className:"w-full border-collapse",children:[(0,a.jsx)("thead",{children:(0,a.jsx)("tr",{children:r.A.map((function(e){return(0,a.jsx)("th",{className:"p-4 text-left",children:e.name},e.id)}))})}),(0,a.jsx)("tbody",{className:"text-sm",children:r.d[n].map((function(e,n){return(0,a.jsxs)("tr",{children:[(0,a.jsx)("td",{className:"p-4 text-left border border-gray-300",children:e.prop}),(0,a.jsx)("td",{className:"p-4 text-left border border-gray-300",children:e.type}),(0,a.jsx)("td",{className:"p-4 text-left border border-gray-300",children:e.description})]},n)}))})]})})}},2530:function(e,n,t){"use strict";t.d(n,{W:function(){return r}});var a=t(5893),r=function(e){var n=e.children,t=e.className;return(0,a.jsx)("div",{className:"".concat(t," px-3 md:px-0 max-w-full"),children:n})}}},function(e){e.O(0,[774,888,179],(function(){return n=7481,e(e.s=n);var n}));var n=e.O();_N_E=n}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.