Add new 3 components for top navigation bar

components/navbar/index.ts

@@ -0,0 +1,9 @@
+import TopNavBar1 from "./topnavbar-1";
+import TopNavBar2 from "./topnavbar-2";
+import TopNavBar3 from "./topnavbar-3";
+
+export {
+  TopNavBar1,
+  TopNavBar2,
+  TopNavBar3
+}

components/navbar/topnavbar-1.tsx

@@ -0,0 +1,39 @@
+import { Drawer } from "antd";
+import Link from "next/link";
+import { useState } from "react";
+
+const Menu = ({ label, href }: any) => (
+  <div className={`mb-5 md:mb-0 md:ml-10`}><Link href={href}>{label}</Link></div>
+)
+
+const TopNavBar1 = () => {
+  const [isShowDrawer, setIsShowDrawer] = useState<boolean>(false)
+
+  return (
+    <div className={`w-full border-b`}>
+      <div className={`container mx-auto flex justify-between items-center p-5 md:px-0 py-5`}>
+        <div>Logo</div>
+        <div className={`hidden md:block md:flex md:justify-end md:items-center`}>
+          <Menu label={`Home`} href={`/`} />
+          <Menu label={`About`} href={`/`} />
+          <Menu label={`Pricing`} href={`/`} />
+          <Menu label={`Dummy Menu`} href={`/`} />
+        </div>
+        <div className={`block md:hidden`}>
+          <i className={`fa fa-bars cursor-pointer`} onClick={e => setIsShowDrawer(true)} />
+        </div>
+      </div>
+
+      <Drawer visible={isShowDrawer} onClose={e => setIsShowDrawer(false)}>
+        <div className={`flex flex-col`}>
+          <Menu label={`Home`} href={`/`} />
+          <Menu label={`About`} href={`/`} />
+          <Menu label={`Pricing`} href={`/`} />
+          <Menu label={`Dummy Menu`} href={`/`} />
+        </div>
+      </Drawer>
+    </div>
+  )
+}
+
+export default TopNavBar1

components/navbar/topnavbar-2.tsx

@@ -0,0 +1,44 @@
+import { Button, Drawer, Input } from "antd";
+import Link from "next/link";
+import { useState } from "react";
+
+const Menu = ({ label, href }: any) => (
+  <div className={`mb-5 md:mb-0 md:ml-10`}><Link href={href}>{label}</Link></div>
+)
+
+const TopNavBar2 = () => {
+  const [isShowDrawer, setIsShowDrawer] = useState<boolean>(false)
+
+  return (
+    <div className={`w-full border-b`}>
+      <div className={`container mx-auto flex justify-between items-center p-5 md:px-0 py-5`}>
+        <div>Logo</div>
+        <div className={`hidden md:block md:flex md:items-center`}>
+          <Menu label={`Home`} href={`/`} />
+          <Menu label={`About`} href={`/`} />
+          <Menu label={`Pricing`} href={`/`} />
+          <Menu label={`Dummy Menu`} href={`/`} />
+        </div>
+        <div className={`hidden md:block md:flex md:justify-end md:items-center`}>
+          <div className={`mr-3`}><Input placeholder={`Search ...`} /></div>
+          <div className={`mr-3`}><Button type={`primary`}>Sign In</Button></div>
+          <div><Button>Register</Button></div>
+        </div>
+        <div className={`block md:hidden`}>
+          <i className={`fa fa-bars cursor-pointer`} onClick={e => setIsShowDrawer(true)} />
+        </div>
+      </div>
+
+      <Drawer visible={isShowDrawer} onClose={e => setIsShowDrawer(false)}>
+        <div className={`flex flex-col`}>
+          <Menu label={`Home`} href={`/`} />
+          <Menu label={`About`} href={`/`} />
+          <Menu label={`Pricing`} href={`/`} />
+          <Menu label={`Dummy Menu`} href={`/`} />
+        </div>
+      </Drawer>
+    </div>
+  )
+}
+
+export default TopNavBar2

components/navbar/topnavbar-3.tsx

@@ -0,0 +1,47 @@
+import { Drawer, Input } from "antd";
+import Link from "next/link";
+import { useState } from "react";
+
+const MenuPrimary = ({ label, href }: any) => (
+  <div className={`mb-5 md:mb-0 md:ml-10`}><Link href={href}>{label}</Link></div>
+)
+
+const MenuSecondary = ({ label, href }: any) => (
+  <div className={`mb-5 md:mb-0 md:mr-10`}><Link href={href}>{label}</Link></div>
+)
+
+const TopNavBar3 = () => {
+  const [isShowDrawer, setIsShowDrawer] = useState<boolean>(false)
+
+  return (
+    <div className={`w-full border-b`}>
+      <div className={`container mx-auto flex justify-between items-center p-5 md:px-0 md:pt-5 md:pb-2`}>
+        <div>Logo</div>
+        <div className={`hidden md:block md:flex md:justify-end md:items-center`}>
+          <div><Input placeholder={`Search ...`} /></div>
+          <MenuPrimary label={`Sign In`} href={`/`} />
+          <MenuPrimary label={`Register`} href={`/`} />
+        </div>
+        <div className={`block md:hidden`}>
+          <i className={`fa fa-bars cursor-pointer`} onClick={e => setIsShowDrawer(true)} />
+        </div>
+      </div>
+      <div className={`hidden md:block md:container md:mx-auto md:flex md:justify-start md:pb-5`}>
+        <MenuSecondary label={`Dashboard`} href={`/`} />
+        <MenuSecondary label={`Form`} href={`/`} />
+        <MenuSecondary label={`Settings`} href={`/`} />
+      </div>
+
+      <Drawer visible={isShowDrawer} onClose={e => setIsShowDrawer(false)}>
+        <div className={`flex flex-col`}>
+          <MenuPrimary label={`Home`} href={`/`} />
+          <MenuPrimary label={`About`} href={`/`} />
+          <MenuPrimary label={`Pricing`} href={`/`} />
+          <MenuPrimary label={`Dummy Menu`} href={`/`} />
+        </div>
+      </Drawer>
+    </div>
+  )
+}
+
+export default TopNavBar3

tsconfig.json

@@ -12,7 +12,8 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "baseUrl": "."
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]