Added then navbar

Katleho-codes · Apr 23, 2023 · ec19f8e · ec19f8e
1 parent 016aea7
commit ec19f8e
Show file tree

Hide file tree

Showing 10 changed files with 265 additions and 77 deletions.
diff --git a/components/Flyoutmenu.txt b/components/Flyoutmenu.txt
@@ -0,0 +1,76 @@
+import { Fragment } from 'react'
+import { Popover, Transition } from '@headlessui/react'
+import { ChevronDownIcon, PhoneIcon, PlayCircleIcon } from '@heroicons/react/20/solid'
+import {
+  ArrowPathIcon,
+  ChartPieIcon,
+  CursorArrowRaysIcon,
+  FingerPrintIcon,
+  SquaresPlusIcon,
+} from '@heroicons/react/24/outline'
+
+const solutions = [
+  { name: 'Analytics', description: 'Get a better understanding of your traffic', href: '#', icon: ChartPieIcon },
+  { name: 'Engagement', description: 'Speak directly to your customers', href: '#', icon: CursorArrowRaysIcon },
+  { name: 'Security', description: "Your customers' data will be safe and secure", href: '#', icon: FingerPrintIcon },
+  { name: 'Integrations', description: 'Connect with third-party tools', href: '#', icon: SquaresPlusIcon },
+  { name: 'Automations', description: 'Build strategic funnels that will convert', href: '#', icon: ArrowPathIcon },
+]
+const callsToAction = [
+  { name: 'Watch demo', href: '#', icon: PlayCircleIcon },
+  { name: 'Contact sales', href: '#', icon: PhoneIcon },
+]
+
+export default function Example() {
+  return (
+    <Popover className="relative">
+      <Popover.Button className="inline-flex items-center gap-x-1 text-sm font-semibold leading-6 text-gray-900">
+        <span>Solutions</span>
+        <ChevronDownIcon className="h-5 w-5" aria-hidden="true" />
+      </Popover.Button>
+
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-200"
+        enterFrom="opacity-0 translate-y-1"
+        enterTo="opacity-100 translate-y-0"
+        leave="transition ease-in duration-150"
+        leaveFrom="opacity-100 translate-y-0"
+        leaveTo="opacity-0 translate-y-1"
+      >
+        <Popover.Panel className="absolute left-1/2 z-10 mt-5 flex w-screen max-w-max -translate-x-1/2 px-4">
+          <div className="w-screen max-w-md flex-auto overflow-hidden rounded-3xl bg-white text-sm leading-6 shadow-lg ring-1 ring-gray-900/5">
+            <div className="p-4">
+              {solutions.map((item) => (
+                <div key={item.name} className="group relative flex gap-x-6 rounded-lg p-4 hover:bg-gray-50">
+                  <div className="mt-1 flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
+                    <item.icon className="h-6 w-6 text-gray-600 group-hover:text-indigo-600" aria-hidden="true" />
+                  </div>
+                  <div>
+                    <a href={item.href} className="font-semibold text-gray-900">
+                      {item.name}
+                      <span className="absolute inset-0" />
+                    </a>
+                    <p className="mt-1 text-gray-600">{item.description}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+            <div className="grid grid-cols-2 divide-x divide-gray-900/5 bg-gray-50">
+              {callsToAction.map((item) => (
+                <a
+                  key={item.name}
+                  href={item.href}
+                  className="flex items-center justify-center gap-x-2.5 p-3 font-semibold text-gray-900 hover:bg-gray-100"
+                >
+                  <item.icon className="h-5 w-5 flex-none text-gray-400" aria-hidden="true" />
+                  {item.name}
+                </a>
+              ))}
+            </div>
+          </div>
+        </Popover.Panel>
+      </Transition>
+    </Popover>
+  )
+}
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -1,68 +1,85 @@
+import { useState } from 'react'
+import { Dialog } from '@headlessui/react'
+import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
+import { navitems } from '../public/_data/navbar'
+import Link from 'next/link'
 
-import { navitems } from "../public/_data/navbar";
-import Image from "next/image";
-import Link from "next/link";
-import { useState } from "react";
-import logo from "../public/logo.svg";
-
-type Props = {
-    children?: React.ReactNode;
-}
-
-export default function Navbar(props: Props) {
-    const [isOpen, setIsopen] = useState(false);
-    const ToggleSidebar = () => {
-        isOpen === true ? setIsopen(false) : setIsopen(true);
-    };
+export default function Navbar() {
+    const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
     return (
         <>
-            <nav className="navbar">
-                <Link href="/">
-                    <svg id="logo-15" width="49" height="48" viewBox="0 0 49 48" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M24.5 12.75C24.5 18.9632 19.4632 24 13.25 24H2V12.75C2 6.53679 7.03679 1.5 13.25 1.5C19.4632 1.5 24.5 6.53679 24.5 12.75Z" class="ccustom" fill="#17CF97"></path> <path d="M24.5 35.25C24.5 29.0368 29.5368 24 35.75 24H47V35.25C47 41.4632 41.9632 46.5 35.75 46.5C29.5368 46.5 24.5 41.4632 24.5 35.25Z" className="ccustom" fill="#17CF97"></path> <path d="M2 35.25C2 41.4632 7.03679 46.5 13.25 46.5H24.5V35.25C24.5 29.0368 19.4632 24 13.25 24C7.03679 24 2 29.0368 2 35.25Z" class="ccustom" fill="#17CF97"></path> <path d="M47 12.75C47 6.53679 41.9632 1.5 35.75 1.5H24.5V12.75C24.5 18.9632 29.5368 24 35.75 24C41.9632 24 47 18.9632 47 12.75Z" class="ccustom" fill="#17CF97"></path> </svg>
-                </Link>
-                <ul className="nav_links">
-                    {navitems.map((link) => (
-                        <li key={link.id}>
-                            <Link href={link.item} className={"sd-link text-slate-900"}>
-                                {link.item}
-                            </Link>
-                        </li>
+            <nav className="flex items-center justify-between p-6 lg:px-8" aria-label="Global">
+                <div className="flex lg:flex-1">
+                    <a href="#" className="-m-1.5 p-1.5">
+                        <span className="sr-only">Logo</span>
+                        <svg id="logo-15" width="49" height="48" viewBox="0 0 49 48" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M24.5 12.75C24.5 18.9632 19.4632 24 13.25 24H2V12.75C2 6.53679 7.03679 1.5 13.25 1.5C19.4632 1.5 24.5 6.53679 24.5 12.75Z" class="ccustom" fill="#17CF97"></path> <path d="M24.5 35.25C24.5 29.0368 29.5368 24 35.75 24H47V35.25C47 41.4632 41.9632 46.5 35.75 46.5C29.5368 46.5 24.5 41.4632 24.5 35.25Z" class="ccustom" fill="#17CF97"></path> <path d="M2 35.25C2 41.4632 7.03679 46.5 13.25 46.5H24.5V35.25C24.5 29.0368 19.4632 24 13.25 24C7.03679 24 2 29.0368 2 35.25Z" class="ccustom" fill="#17CF97"></path> <path d="M47 12.75C47 6.53679 41.9632 1.5 35.75 1.5H24.5V12.75C24.5 18.9632 29.5368 24 35.75 24C41.9632 24 47 18.9632 47 12.75Z" className="ccustom" fill="#17CF97"></path> </svg>
+                    </a>
+                </div>
+                <div className="flex lg:hidden">
+                    <button
+                        type="button"
+                        className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
+                        onClick={() => setMobileMenuOpen(true)}
+                    >
+                        <span className="sr-only">Open main menu</span>
+                        <Bars3Icon className="h-6 w-6" aria-hidden="true" />
+                    </button>
+                </div>
+                <div className="hidden lg:flex lg:gap-x-12">
+                    {navitems.map((item) => (
+                        <Link key={item.id} href={item.pageRoute} className="text-base font-semibold leading-6 text-gray-900">
+                            {item.item}
+                        </Link>
                     ))}
-                </ul>
-                <button className="hamburger" onClick={ToggleSidebar}>
-                    <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24"><path d="M12 2A10.13 10.13 0 0 0 2 12a10 10 0 0 0 4 7.92V20h.1a9.7 9.7 0 0 0 11.8 0h.1v-.08A10 10 0 0 0 22 12 10.13 10.13 0 0 0 12 2zM8.07 18.93A3 3 0 0 1 11 16.57h2a3 3 0 0 1 2.93 2.36 7.75 7.75 0 0 1-7.86 0zm9.54-1.29A5 5 0 0 0 13 14.57h-2a5 5 0 0 0-4.61 3.07A8 8 0 0 1 4 12a8.1 8.1 0 0 1 8-8 8.1 8.1 0 0 1 8 8 8 8 0 0 1-2.39 5.64z" /><path d="M12 6a3.91 3.91 0 0 0-4 4 3.91 3.91 0 0 0 4 4 3.91 3.91 0 0 0 4-4 3.91 3.91 0 0 0-4-4zm0 6a1.91 1.91 0 0 1-2-2 1.91 1.91 0 0 1 2-2 1.91 1.91 0 0 1 2 2 1.91 1.91 0 0 1-2 2z" /></svg>
-                </button>
+                </div>
+                <div className="hidden lg:flex lg:flex-1 lg:justify-end">
+                    <a href="#" className="text-base font-semibold leading-6 flex items-center text-gray-900">
+                        Log in <span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10.707 17.707 16.414 12l-5.707-5.707-1.414 1.414L13.586 12l-4.293 4.293z" /></svg></span>
+                    </a>
+                </div>
             </nav>
-            <aside className={`sidebar bg-white ${isOpen === true ? "active" : ""}`}>
-                <div className="sd-header flex items-center justify-between p-3 h-16">
-                    <Link href="/">
-                        <svg id="logo-15" width="49" height="48" viewBox="0 0 49 48" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M24.5 12.75C24.5 18.9632 19.4632 24 13.25 24H2V12.75C2 6.53679 7.03679 1.5 13.25 1.5C19.4632 1.5 24.5 6.53679 24.5 12.75Z" class="ccustom" fill="#17CF97"></path> <path d="M24.5 35.25C24.5 29.0368 29.5368 24 35.75 24H47V35.25C47 41.4632 41.9632 46.5 35.75 46.5C29.5368 46.5 24.5 41.4632 24.5 35.25Z" className="ccustom" fill="#17CF97"></path> <path d="M2 35.25C2 41.4632 7.03679 46.5 13.25 46.5H24.5V35.25C24.5 29.0368 19.4632 24 13.25 24C7.03679 24 2 29.0368 2 35.25Z" class="ccustom" fill="#17CF97"></path> <path d="M47 12.75C47 6.53679 41.9632 1.5 35.75 1.5H24.5V12.75C24.5 18.9632 29.5368 24 35.75 24C41.9632 24 47 18.9632 47 12.75Z" class="ccustom" fill="#17CF97"></path> </svg>
-                    </Link>
-                    <button className="btn close_button" onClick={ToggleSidebar}>
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            width="24"
-                            height="24"
-                            viewBox="0 0 24 24"
+            <Dialog as="div" className="lg:hidden" open={mobileMenuOpen} onClose={setMobileMenuOpen}>
+                <div className="fixed inset-0 z-50" />
+                <Dialog.Panel className="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
+                    <div className="flex items-center justify-between">
+                        <Link href="/" className="-m-1.5 p-1.5">
+                            <span className="sr-only">Your Company</span>
+                            <svg id="logo-15" width="49" height="48" viewBox="0 0 49 48" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M24.5 12.75C24.5 18.9632 19.4632 24 13.25 24H2V12.75C2 6.53679 7.03679 1.5 13.25 1.5C19.4632 1.5 24.5 6.53679 24.5 12.75Z" class="ccustom" fill="#17CF97"></path> <path d="M24.5 35.25C24.5 29.0368 29.5368 24 35.75 24H47V35.25C47 41.4632 41.9632 46.5 35.75 46.5C29.5368 46.5 24.5 41.4632 24.5 35.25Z" class="ccustom" fill="#17CF97"></path> <path d="M2 35.25C2 41.4632 7.03679 46.5 13.25 46.5H24.5V35.25C24.5 29.0368 19.4632 24 13.25 24C7.03679 24 2 29.0368 2 35.25Z" class="ccustom" fill="#17CF97"></path> <path d="M47 12.75C47 6.53679 41.9632 1.5 35.75 1.5H24.5V12.75C24.5 18.9632 29.5368 24 35.75 24C41.9632 24 47 18.9632 47 12.75Z" className="ccustom" fill="#17CF97"></path> </svg>
+                        </Link>
+                        <button
+                            type="button"
+                            className="-m-2.5 rounded-md p-2.5 text-gray-700"
+                            onClick={() => setMobileMenuOpen(false)}
                         >
-                            <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
-                            <path d="M0 0h24v24H0z" fill="none" />
-                        </svg>
-                    </button>
-                </div>
-                <div className="sidebar_body">
-                    <ul>
-                        {navitems.map((link) => (
-                            <li key={link.id}>
-                                <Link href={link.item} className={"sd-link text-slate-900"}>
-                                    {link.item}
+                            <span className="sr-only">Close menu</span>
+                            <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+                        </button>
+                    </div>
+                    <div className="mt-6 flow-root">
+                        <div className="-my-6 divide-y divide-gray-500/10">
+                            <div className="space-y-2 py-6">
+                                {navitems.map((item) => (
+                                    <Link
+                                        key={item.id}
+                                        href={item.pageRoute}
+                                        className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                                    >
+                                        {item.item}
+                                    </Link>
+                                ))}
+                            </div>
+                            <div className="py-6">
+                                <Link
+                                    href="/login"
+                                    className="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                                >
+                                    Log in
                                 </Link>
-                            </li>
-                        ))}
-                    </ul>
-                </div>
-            </aside>
-
+                            </div>
+                        </div>
+                    </div>
+                </Dialog.Panel>
+            </Dialog>
         </>
-    );
-}
+    )
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,6 +11,8 @@
   "dependencies": {
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
+    "@headlessui/react": "^1.7.14",
+    "@heroicons/react": "^2.0.17",
     "@mui/material": "^5.12.1",
     "@types/node": "18.15.13",
     "@types/react": "18.0.38",

diff --git a/public/_data/navbar.ts b/public/_data/navbar.ts
@@ -1,6 +1,6 @@
 export const navitems = [
-  { id: 1, item: "Jobs", pageRoute: "jobs" },
+  { id: 1, item: "Jobs", pageRoute: "/jobs" },
   { id: 2, item: "Dashboard", pageRoute: "dashboard" },
   { id: 3, item: "Orders", pageRoute: "orders" },
-  { id: 3, item: "Notifications", pageRoute: "notifications" },
+  { id: 4, item: "Notifications", pageRoute: "notifications" },
 ];
diff --git a/public/icons/bx-chevron-down.svg b/public/icons/bx-chevron-down.svg
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -7,12 +7,12 @@ import Navbar from '../../components/Navbar'
 export default function Home() {
   return (
     <>
-      <header>
+      <header className="bg-white absolute inset-x-0 top-0 z-50">
         <Navbar />
       </header>
 
       <main>
-        <h1 className="text-4xl">The ultimate teams app</h1>
+        <h1 className="text-4xl text-green-500">The ultimate teams app</h1>
       </main>
     </>
   )

diff --git a/src/pages/jobs/index.tsx b/src/pages/jobs/index.tsx
@@ -1,9 +1,70 @@
-import React from 'react'
+import React, { useState } from 'react'
+import Link from "next/link"
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+
+
 
 export default function Jobs() {
   return (
     <>
-
+      <TabButtons />
     </>
   )
 }
+
+
+
+function TabButtons() {
+  const [tabIndex, setTabIndex] = useState(0);
+  const handleTabChange = (event: any, newTabIndex: number) => {
+    setTabIndex(newTabIndex);
+  }
+  return (
+    <>
+
+      <Box>
+        <Box>
+          <Tabs
+            value={tabIndex}
+            onChange={handleTabChange}
+            variant="scrollable"
+            scrollButtons="auto"
+          >
+            <Tab label="All jobs" />
+            <Tab label="My jobs" />
+            <Tab label="Videos" />
+            <Tab label="Links" />
+          </Tabs>
+        </Box>
+        <Box sx={{ padding: 2 }}>
+          {tabIndex === 0 && (
+            <Box>
+
+              <Typography>The first tab</Typography>
+            </Box>
+          )}
+          {tabIndex === 1 && (
+            <Box>
+
+              <Typography>The second tab</Typography>
+
+            </Box>
+          )}
+          {tabIndex === 2 && (
+            <Box>
+              <Typography>The third tab</Typography>
+            </Box>
+          )}
+          {tabIndex === 3 && (
+            <Box>
+              <Typography>The fourth tab</Typography>
+            </Box>
+          )}
+        </Box>
+      </Box>
+    </>
+  )
+}
diff --git a/src/pages/projects/index.tsx b/src/pages/projects/index.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function Projects() {
+  return (
+    <>
+
+    </>
+  )
+}