changed the navbar

UISS-SOLUTIONS · Nov 20, 2024 · 6362400 · 6362400
1 parent fdb8ba2
commit 6362400
Show file tree

Hide file tree

Showing 14 changed files with 1,206 additions and 199 deletions.
diff --git a/app/(pages)/Home/Index.tsx b/app/(pages)/Home/Index.tsx
@@ -10,14 +10,14 @@ import CallToAction from "@/app/components/CallToAction";
 const Index = () => {
   return (
     <>
-      <div className="w-full h-[95vh]">
+      <div className="w-full h-[95vh] relative">
         <img
           src="https://plus.unsplash.com/premium_photo-1681494379901-6dc30090cd1b?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
           alt="coict pic"
           className="w-full h-full object-cover"
         />
         <div className="bg-black/80 absolute w-full h-[95vh] top-0 " />
-        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex flex-col items-center">
+        <div className="text-white absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex flex-col items-center">
           <h1 className="text-7xl font-bold">
             Empowering Futures,
             <span className="flex justify-center text-[#efb631]">

diff --git a/app/(pages)/Home/ItStartsWithYou/ItStartsWithYou.tsx b/app/(pages)/Home/ItStartsWithYou/ItStartsWithYou.tsx
@@ -4,7 +4,7 @@ const ItStartsWithYou = () => {
   return (
     <div className="bg-black flex justify-center items-center">
       <div className="w-[1161px] flex justify-between items-center gap-5 my-20">
-        <div className="w-[50%]">
+        <div className="w-[50%] text-white">
           <span className="flex text-5xl py-4 font-semibold w-fit border-b border-white/15 cursor-pointer">
             It Starts With You
           </span>

diff --git a/app/(pages)/Home/Quote/Quote.tsx b/app/(pages)/Home/Quote/Quote.tsx
@@ -7,15 +7,15 @@ const Quote = () => {
         <div className="w-full mt-8 flex justify-center">
           <div className="flex flex-col items-center w-[65%] rounded-lg z-10">
             <div className="w-[80%]">
-              <p className="text-justify pt-8 text-base">
+              <p className="text-justify pt-8 text-base line-clamp-4">
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius
                 odit ea nulla veniam dolorum doloremque magni nesciunt et ad
                 debitis. Soluta recusandae ducimus provident cupiditate fugiat
                 modi animi obcaecati cum, illo totam praesentium, labore eum ab
                 explicabo laborum exercitationem. Quam deleniti architecto
                 ducimus cumque quod!
               </p>
-              <div className="flex flex-col items-end pb-8 pt-4">
+              <div className="flex flex-col items-end pb-8 pt-8">
                 <span className="text-black font-semibold">Moody A Mshana</span>
                 <span className="text-black font-semibold">
                   Website Technical Lead UISS
@@ -24,7 +24,7 @@ const Quote = () => {
             </div>
           </div>
         </div>
-      <div className="absolute top-[7%] left-[17%]">
+      <div className="absolute top-[5%] left-[17%]">
         <img src="./quoteBg.svg" alt="" />
       </div>
       </div>

diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
@@ -12,7 +12,7 @@ const Footer = () => {
               className="h-full w-full object-contain"
             />
           </div>
-          <p className="py-5 opacity-60">
+          <p className="py-5 text-white/60">
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste
             assumenda obcaecati voluptatem veritatis odio vero. Consequuntur
             quae molestias dolorum non!

diff --git a/app/components/NavBar.tsx b/app/components/NavBar.tsx
@@ -13,22 +13,86 @@ const NavBar = () => {
     },
     {
       id: 20,
-      name: "Events",
+      name: "Explore",
+      children: [
+        {
+          id: 191,
+          name: "Welcome Note",
+        },
+        {
+          id: 192,
+          name: "Vision and Mission",
+        },
+        { id: 193, name: "Core Values" },
+        { id: 194, name: "Awards and Achievements" },
+        { id: 195, name: "Constitution" },
+        { id: 196, name: "Governance / team" },
+        { id: 197, name: "Collaboration and Networks" },
+      ],
     },
     {
       id: 21,
-      name: "About",
+      name: "Programmes",
+      children: [
+        {
+          id: 211,
+          name: "Podcast",
+        },
+        {
+          id: 212,
+          name: "Clubs",
+          children: [
+            {
+              id: 2121,
+              name: "Software Development Club",
+            },
+            {
+              id: 2122,
+              name: "UI / UX Designing",
+            },{
+              id: 2123,
+              name: "Cybersecurity Club",
+            },{
+              id: 2124,
+              name: "Artificial Intelligence Club",
+            },{
+              id: 2125,
+              name: "Networking Club",
+            },{
+              id: 2126,
+              name: "Data Science Club",
+            },
+          ],
+        },
+        { id: 213, name: "Initiatives" },
+      ],
     },
     {
       id: 22,
-      name: "Podcast",
+      name: "Events",
+      children: [
+        { id: 221, name: "Annual Timetable" },
+        { id: 222, name: "Upcoming Events" },
+        { id: 223, name: "Annual Highlights" },
+      ],
     },
     {
       id: 23,
-      name: "Programmes",
+      name: "News",
+      children: [
+        { id: 231, name: "Gallery" },
+        { id: 232, name: "Updates" },
+      ],
     },
     {
       id: 24,
+      name: "Membership",
+      children: [
+        {id: 241, name: "Benefits"}
+      ]
+    },
+    {
+      id: 25,
       name: "Support Us",
     },
   ];
@@ -37,7 +101,13 @@ const NavBar = () => {
       <div className="container flex justify-between items-center">
         <div className="grid grid-cols-2 divide-x-2 gap-x-4">
           <Image src={UissLogo} height={80} width={85} alt="Uiss Logo" />
-          <Image src={UdsmLogo} height={70} width={90} alt="Udsm Logo" className="pl-4"/>
+          <Image
+            src={UdsmLogo}
+            height={70}
+            width={90}
+            alt="Udsm Logo"
+            className="pl-4"
+          />
         </div>
         <div>
           <ul className="list-none flex gap-x-6">

diff --git a/app/components/NavDropDown.tsx b/app/components/NavDropDown.tsx
@@ -1,35 +1,91 @@
 import React from "react";
 import { INavDropDown } from "./types";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 
 interface props {
   className?: string;
   NavDetail: INavDropDown;
 }
 
-const NavDropDown:React.FC<props> = ({NavDetail, className}) => {
+const NavDropDown: React.FC<props> = ({ NavDetail, className }) => {
   return (
-    <li className={`flex justify-center items-center gap-x-1 group cursor-pointer ${className}`}>
-      <span className={`text-lg font-bold group-hover:text-[#efb631] ${NavDetail.name == 'Support Us' ? 'text-white group-hover:text-black':''}`}>
-        {NavDetail.name}
-      </span>
-      {
-        NavDetail.dropDown &&
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          strokeWidth={1.5}
-          stroke="currentColor"
-          className="size-5 group-hover:stroke-[#efb631]"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            d="m19.5 8.25-7.5 7.5-7.5-7.5"
-          />
-        </svg>
-      }
-    </li>
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger className="focus:outline-none focus:ring-0">
+          <li
+            className={`text-white flex justify-center items-center gap-x-1 group cursor-pointer ${className}`}
+          >
+            <span
+              className={`text-lg font-bold group-hover:text-[#efb631] ${
+                NavDetail.name == "Support Us"
+                  ? "text-white group-hover:text-black"
+                  : ""
+              }`}
+            >
+              {NavDetail.name}
+            </span>
+            {NavDetail.dropDown && (
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke="currentColor"
+                className="size-5 group-hover:stroke-[#efb631]"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="m19.5 8.25-7.5 7.5-7.5-7.5"
+                />
+              </svg>
+            )}
+          </li>
+        </DropdownMenuTrigger>
+        {NavDetail.children != undefined ? (
+          <DropdownMenuContent className=" font-bold">
+            {NavDetail.children.map((children, index) => {
+              if (children.children != undefined) {
+                return (
+                  <DropdownMenuSub>
+                    <DropdownMenuSubTrigger>
+                      {children.name}
+                    </DropdownMenuSubTrigger>
+                    <DropdownMenuPortal>
+                      <DropdownMenuSubContent>
+                        {children.children.map((children) => {
+                          return (
+                            <DropdownMenuItem key={children.id}>
+                              {children.name}
+                            </DropdownMenuItem>
+                          );
+                        })}
+                      </DropdownMenuSubContent>
+                    </DropdownMenuPortal>
+                  </DropdownMenuSub>
+                );
+              }
+              return (
+                <DropdownMenuItem key={children.id}>
+                  {children.name}
+                </DropdownMenuItem>
+              );
+            })}
+          </DropdownMenuContent>
+        ) : (
+          ""
+        )}
+      </DropdownMenu>
+    </>
   );
 };
 

diff --git a/app/components/types.ts b/app/components/types.ts
@@ -1,5 +1,6 @@
 export interface INavDropDown {
-    id: number;
-    name: string;
-    dropDown?: boolean;
-}
+  id: number;
+  name: string;
+  dropDown?: boolean;
+  children?: INavDropDown[]
+}
diff --git a/app/globals.css b/app/globals.css
@@ -2,20 +2,12 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
+body {
+  font-family: Arial, Helvetica, sans-serif;
 }
 
-@media (prefers-color-scheme: dark) {
+@layer base {
   :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+    --radius: 0.5rem;
   }
 }
-
-body {
-  color: var(--foreground);
-  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
-}
diff --git a/components.json b/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": false,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}