Large screen layout UI completed.

Small screen layout pending

src/components/Header/NavBar/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
 
@@ -24,33 +24,30 @@ export default function NavBar() {
   const [hamburgerMenuOpen, setHamburgerMenuOpen] = useState(false);
 
   return (
-    <div className="flex h-20 items-center justify-center gap-60 whitespace-nowrap bg-white px-4 text-starick-black">
+    <nav className="flex h-16  place-content-between items-center whitespace-nowrap bg-white px-4 text-starick-black">
       {/* Left nav container (logo and links) */}
-      {/* Header container */}
-      <div
-        className={`flex flex-row items-center ${
-          windowWidth >= 1200 ? "lg:gap-60" : "md:gap-30"
-        }`}
-      >
-        <Link href="/">
+
+      {/* Header container below */}
+      <div className="flex h-full w-full flex-row place-content-between items-center">
+        <Link href="/" className="flex-none">
           <Image
             src="/placeholder_starick_logo.png"
             alt="Starick Logo"
             width={170}
             height={50}
-            className="font-bold lg:pr-6"
+            className="font-bold lg:pr-6 "
           />
         </Link>
         {/* Primary nav link container */}
-        <div className="items-center text-end">
+        <div className="max-w-[900px] grow h-full items-center text-end">
           <div
             className={`flex items-center justify-center lg:visible lg:static lg:block lg:h-full lg:w-full ${
               hamburgerMenuOpen
                 ? "fixed bottom-0 left-0 right-0 top-0 h-full bg-white"
                 : "hidden"
             }`}
           >
-            <ul className="flex w-full flex-col divide-starick-olive font-semibold lg:ml-0 lg:flex-row lg:divide-x-2">
+            <ul className=" flex relative h-full w-full flex-col divide-starick-olive  font-semibold lg:flex-row after:bg-starick-olive after:absolute after:w-1 after:h-5 after:top-[36%] after:right-  ">
               {primaryNav.map((link) => (
                 <NavItem link={link} key={link.href} />
               ))}
@@ -86,6 +83,6 @@ export default function NavBar() {
           }
         />
       </button>
-    </div>
+    </nav>
   );
 }

src/components/Header/NavBar/nav-item.tsx

@@ -1,50 +1,100 @@
 import React, { useState } from "react";
+import Image from "next/image";
 import Link from "next/link";
+import { BiSolidChevronRightSquare } from "react-icons/bi";
 import { FiChevronDown } from "react-icons/fi";
 
 import { NavBarItem } from "./types";
 
+import AboriginalFlag from "~/images/aboriginal_flags/aboriginal-flag-150x150.png";
+
 type Props = {
   link: NavBarItem;
 };
 
 const NavItem = ({ link }: Props) => {
   // handles a nav item state (hovered/clicked)
-  const [activated, setActivated] = useState(false);
+  const [activated, setActivated] = useState<boolean>(false);
+  const [timeId, setTimeId] = useState<number>(0);
+  const enterHandler = () => {
+    window.clearTimeout(timeId);
+    const id: number = window.setTimeout(() => {
+      setActivated(true);
+    }, 150);
+    setTimeId(id);
+  };
+  const leaveHandler = () => {
+    window.clearTimeout(timeId);
+    const id: number = window.setTimeout(() => {
+      setActivated(false);
+    }, 150);
+    setTimeId(id);
+  };
 
   return (
     // root div handles mouse in and out events
-    <li
-      onMouseEnter={() => setActivated(true)}
-      onMouseLeave={() => setActivated(false)}
-    >
-      {/* button handles click action */}
-      <button className="mx-2 my-2 w-max border-t-4 border-white hover:brightness-90 hover:filter lg:my-0 lg:px-2 hover:lg:border-starick-green">
-        <Link href={link.href}>
-          {link.label}
-          {link.submenu && <FiChevronDown className="inline" />}
+    <>
+      <li
+        onMouseEnter={() => enterHandler()}
+        onMouseLeave={() => leaveHandler()}
+        className={`relative lg:flex lg:grow items-center justify-center before:h-1  hover:before:block lg:h-full 
+        lg:before:absolute lg:before:right-0 lg:before:top-3 lg:before:hidden lg:before:w-full lg:before:bg-starick-green lg:before:content-[''] `}
+      >
+        {/* button handles click action */}
+
+        <Link
+          href={link.href}
+          className=" relative flex h-full before:absolute before:-left-5 before:top-[36%] before:h-5 before:w-1 before:bg-starick-olive  before:content-['']"
+        >
+          <button className="h-full items-center justify-center">
+            {link.label}
+            {link.submenu && <FiChevronDown className="inline" />}
+          </button>
         </Link>
-      </button>
-      {/* handles added submenu links if they exist */}
+
+        {/* handles added submenu links if they exist */}
+      </li>
       {link.submenu && (
         <ul
+          onMouseEnter={() => enterHandler()}
+          onMouseLeave={() => leaveHandler()}
           className={`${
             activated ? "" : "hidden"
-          } w-max border-l-2 border-starick-olive bg-white lg:absolute lg:shadow-md`}
+          } w-screen border-t-2 border-starick-olive bg-white  lg:absolute  lg:-right-4 lg:top-16 lg:shadow-md 
+          lg:before:absolute lg:before:left-0 lg:before:top-0 lg:before:w-full lg:before:content-[''] 
+          
+          `}
         >
-          {link.submenu.map((sublink) => (
-            <li key={sublink.href}>
-              <Link
-                href={sublink.href}
-                className="block px-2 py-0.5 hover:bg-starick-olive lg:py-0.5 lg:text-center"
+          <div
+            className={`lg:grid lg:grid-cols-${
+              link.submenu.length > 3 ? "3" : "2"
+            } gap-3 lg:py-4 lg:ml-8 lg:px-12`}
+          >
+            {link.submenu.map((sublink) => (
+              <li
+                className="lg:relative lg:transition-colors lg:p-2 lg:before:absolute lg:before:-left-0 before:top-4 before:h-16 before:w-0.5 lg:before:bg-starick-olive before:content-[''] hover:bg-starick-olive before:hover:hidden "
+                key={sublink.href}
               >
-                {sublink.label}
-              </Link>
-            </li>
-          ))}
+                <Link
+                  href={sublink.href}
+                  className="relative  lg:h-20  lg:pl-3.5  text-starick-black  lg:flex lg:items-center lg:py-0.5"
+                >
+                  <Image
+                    src={AboriginalFlag}
+                    alt="Aboriginal Flag"
+                    width={40}
+                    height={40}
+                    className="lg:mx-3 hidden lg:block "
+                  />
+                  <span className="text-sm ">{sublink.label}</span>
+                  <BiSolidChevronRightSquare className=" hidden lg:block ml-4 shrink-0 text-2xl text-starick-green" />
+                </Link>
+              </li>
+            ))}
+          </div>
         </ul>
       )}
-    </li>
+    </>
   );
 };
 

src/pages/index.tsx

@@ -3,8 +3,9 @@ import Link from "next/link";
 
 import Carousel from "@/components/Home/carousel/carousel";
 import carousel_list from "@/components/Home/carousel/carousel_list.json";
-import FacebookFeed from "@/components/social-media-feed";
 import PageHeader from "@/components/page-header";
+import PageHeaderBigCircle from "@/components/page-header-bigcircle";
+import FacebookFeed from "@/components/social-media-feed";
 
 import CrisisAlert from "~/icons/crisis_alert.svg";
 import Staricklogo from "~/icons/starick-logo.svg";
@@ -13,7 +14,6 @@ import Afterdidyouknow from "~/images/home/_MG_9261.jpg";
 import Gridpic2 from "~/images/home/_MG_9460.jpg";
 import Gridpic1 from "~/images/home/Starick-Op-Shop-Volunteers.jpg";
 import HomeTitle from "~/images/Parents-with-kids-graphic.png";
-import PageHeaderBigCircle from "@/components/page-header-bigcircle";
 export default function Home() {
   return (
     <>

src/pages/services.tsx

@@ -1,6 +1,6 @@
+import Button from "@/components/button";
 import PageHeader from "@/components/page-header";
 import PageSummary from "@/components/page-summary";
-import Button from "@/components/button";
 
 export default function OurServices() {
   const servicesSummaries = [