Feature

.github/workflows/vulnerability_scan.yml

@@ -0,0 +1,36 @@
+name: "Vulnerability Scan"
+on:
+    push:
+      branches: [main, golden, develop]
+    pull_request:
+      types: [opened]
+jobs:
+    scan:
+        runs-on: ubuntu-latest
+        steps:
+            # Github Code Checkout Action
+            - name: Git Checkout
+              uses: actions/checkout@v4
+
+            - name: Dependency Review
+              uses: actions/dependency-review-action@v4
+              with:
+                fail-on-severity: moderate
+                license-check: false
+                comment-summary-in-pr: always
+
+            - name: Report
+              if : ${{ failure() && steps.review.outputs.comment-content }}
+              shell: bash
+              env:
+                COMMENT: ${{ steps.review.outputs.comment-content }}
+              run: |
+                echo "$COMMENT"
+
+            - name: List Vulnerable Dependencies
+              if: ${{ failure() && steps.review.conclusion == 'failure' }}
+              shell: bash
+              env:
+                VULNERABLE_CHANGES: ${{ steps.review.outputs.vulnerable-changes }}
+              run: |
+                echo "$VULNERABLE_CHANGES" | jq '.[].package_url'

app/_common/dropdown/Dropdown.tsx

@@ -0,0 +1,16 @@
+export type DropdownProps = {}
+
+const Dropdown:React.FC<DropdownProps> = ({}) => {
+    return (
+        <>
+            <button className="flex items-center justify-between min-w-[48px] max-w-[220px] ps-6 pe-6 gap-1.5 bg-white rounded-lg">
+                <span className="flex items-center justify-between whitespace-nowrap font-normal text-base">Awards</span>
+                <svg viewBox="0 0 20 20" width={8}>
+                    <path d="M1.6,4.1c-0.4,0-0.9,0.2-1.2,0.5c-0.7,0.7-0.7,1.7,0,2.4l8.4,8.4c0.7,0.7,1.7,0.7,2.4,0L19.5,7 c0.7-0.7,0.7-1.7,0-2.4c-0.7-0.7-1.7-0.7-2.4,0L10,11.8L2.8,4.6C2.5,4.3,2.1,4.1,1.6,4.1z"></path>
+                </svg>
+            </button>
+        </>
+    )
+}
+
+export default Dropdown

app/_components/filters/Filters.tsx

@@ -0,0 +1,21 @@
+import Dropdown from "@/app/_common/dropdown/Dropdown"
+import WithContainer from "../WithContainer"
+
+export type FilterProps = {}
+
+const Filter:React.FC<FilterProps> = ({}) => {
+    return (
+        <div className="w-full mt-[76px] h-[54px]">
+            <WithContainer>
+                <div className="flex items-center justify-between bg-grey min-h-[54px] rounded-lg p-1.5">
+                    <div className="flex items-center gap-3">
+                        <Dropdown />
+                    </div>
+                    <div className="flex items-center gap-3">
+                    </div>
+                </div>
+            </WithContainer>
+        </div>
+    )
+}
+export default Filter

app/_components/header/Header.tsx

@@ -3,26 +3,37 @@ import Link from "next/link"
 import Navigation from "../navigation/Navigation"
 import SearchBar from "../searchbar/SearchBar"
 import Button, { ButtonType } from "@/app/_common/button/Button"
-import { useState } from "react"
+import { useRef, useState } from "react"
 import NavigationDropdown from "../navigationDropdown/NavigationDropdown"
+import useClickOutside from "@/app/_hooks/ClickOutsideHook"
 
 export type HeaderProps = {
 
 }
 
 const Header:React.FC<HeaderProps> = ({}) => {
 
+
+    // Search Ref to set the reference
+    const searchRef = useRef<HTMLElement>(null);
+
     // Use state to save the state of the toggle
     const [active, toggleActive] = useState<boolean>(false);
 
     // Utility function to toggle active state
     const handleToggle = () => {
         toggleActive(!active);
     }
+
+    // Custom hook to handle click outside
+    useClickOutside(searchRef, () => {
+        toggleActive(false)
+    })
+
 
     return (
-        <header className="fixed w-full h-full md:mt-2">
-            <div className={`inner rounded-lg h-fit flex flex-col items-center transition ${active ? 'active' : ''}`}>
+        <header className="fixed w-full h-[54px] top-0 md:mt-2" ref={searchRef}>
+            <div className={`inner rounded-lg flex flex-col items-center transition ${active ? 'active' : ''}`}>
                 <div className="flex h-[54px] w-full bg-transparent items-center ps-1.5 pe-1.5 ">
                     {/* Hamburger menu */}
                     <svg width={16} viewBox="0 0 20 20" className="block xl:hidden mr-3">

app/_components/menu/Menu.tsx

@@ -0,0 +1,72 @@
+import Link from "next/link"
+import WithContainer from "../WithContainer"
+
+export type MenuProps = {}
+
+export const menuData = [
+    {
+        name: "Nominees",
+        routeTo: "/"
+    },
+    {
+        name: "Courses",
+        routeTo: "/"
+    },
+    {
+        name: "Collections",
+        routeTo: "/"
+    },
+    {
+        name: "Directory",
+        routeTo: "/"
+    },
+    {
+        name: "Market",
+        routeTo: "/"
+    }
+]
+
+const Menu:React.FC<MenuProps> = ({}) => {
+    return (
+        <div className="fixed w-screen bottom-8 h-[72px]">
+            <WithContainer>
+                <div className="flex items-center relative justify-center">
+                    <div className="flex relative rounded-lg transition bg-black--opacity-8 max-w-[707px] p-1.5">
+                        <div className="max-h-0 max-w-[707px] overflow-hidden"></div>
+                        <div className="relative flex justify-center w-full">
+                            <div className="flex justify-center items-center relative bg-black aspect-square rounded-lg">
+                                <Link href={"/"}>
+                                    <svg width={30} height={16} viewBox="0 0 30 16" fill="white">
+                                        <path d="m18.4 0-2.803 10.855L12.951 0H9.34L6.693 10.855 3.892 0H0l5.012 15.812h3.425l2.708-10.228 2.709 10.228h3.425L22.29 0h-3.892ZM24.77 13.365c0 1.506 1.12 2.635 2.615 2.635C28.879 16 30 14.87 30 13.365c0-1.506-1.12-2.636-2.615-2.636s-2.615 1.13-2.615 2.636Z"></path>
+                                    </svg>
+                                </Link>
+                            </div>
+                            <div className="flex-1 ml-1.5">
+                                <div className="relative w-full bg-black--v3 rounded-lg">
+                                    <ul className="flex items-center p-1.5 space-x-1.5">
+                                    {
+                                            menuData.map(({name, routeTo}, index) => {
+                                                return (
+                                                    <li className="flex items-center h-full justify-center" key={index}>
+                                                        <Link href={routeTo} className="flex items-center justify-center transition text-sm font-normal whitespace-nowrap border rounded-lg color-grey px-3">{ name }</Link>
+                                                    </li>
+                                                )
+                                            })
+                                        }
+
+
+                                    </ul>
+                                </div>
+                            </div>
+                            <div className="flex">
+                                <Link href={"/"} className="flex items-center justify-center bg-color rounded-lg px-4 font-normal text-base">Visit Sotd.</Link>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </WithContainer>
+        </div>
+    )
+}
+
+export default Menu

app/_components/searchbar/SearchBar.tsx

@@ -1,9 +1,13 @@
+import useClickOutside from "@/app/_hooks/ClickOutsideHook";
+import { useRef, useState } from "react"
+
 export type SearchProps = {
     handleToggle: () => void,
     state: boolean
 }
 
 const SearchBar:React.FC<SearchProps> = ({ handleToggle, state }) => {
+
     return (
         <form action="#" className={`flex flex-1 items-center h-[42px] ml-5 brightness-95 bg-color rounded-lg pl-4 transition ${state ? '!bg-white !brightness-100': ''}`}>
             <button type="submit">

app/_drizzle/schema.ts

@@ -1,8 +1,10 @@
 import { relations } from "drizzle-orm";
-import { integer, pgSchema, pgTable, serial, text, timestamp, varchar } from "drizzle-orm/pg-core";
+import { integer, pgSchema, serial, text, timestamp, varchar } from "drizzle-orm/pg-core";
 
+// Schema
 export const schema = pgSchema("awwwards_dev")
 
+// links table
 export const links = schema.table("links", {
     id: serial("id").primaryKey(),
     name: varchar("name").unique().notNull(),
@@ -13,6 +15,7 @@ export const links = schema.table("links", {
     svgIconName: varchar("svg_icon_name").notNull()
 });
 
+// sublinks table
 export const subLinks = schema.table("sublinks", {
     id: serial("id").primaryKey(),
     name: varchar("name").unique().notNull(),
@@ -23,16 +26,16 @@ export const subLinks = schema.table("sublinks", {
 });
 
 
+// oneToMany relationship between links and sublinks
 export const linkRelations = relations(links, ({ many }) => ({
     sublinks: many(subLinks)
 }));
 
+
+// manyToOne relationship between sublinks and links
 export const subLinkRelations = relations(subLinks, ({ one }) => ({
     links: one(links, {
         fields: [subLinks.linkId],
         references: [links.id]
     })
 }))
-
-export type Links = typeof links.$inferSelect
-export type SubLinks = typeof subLinks.$inferSelect

app/_hooks/ClickOutsideHook.ts

@@ -0,0 +1,26 @@
+import { RefObject, useEffect } from "react";
+
+type Handler = (event: MouseEvent | TouchEvent) => void;
+
+const useClickOutside = <T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: Handler) => {
+
+    useEffect(() => {
+        const listener = (event: MouseEvent | TouchEvent) => {
+            if(!ref.current || ref.current.contains(event.target as Node)) {
+                return;
+            }
+            handler(event)
+        }
+
+        document.addEventListener('mousedown', listener)
+        document.addEventListener('touchstart', listener)
+
+        return () => {
+            document.removeEventListener('mousedown', listener)
+            document.removeEventListener('touchstart', listener)
+        }
+
+    }, [ref, handler])
+}
+
+export default useClickOutside

app/_types/navigation.types.ts

@@ -1,5 +1,3 @@
-import { Links } from "../_drizzle/schema"
-
 export type NavigationData = {
     name: string,
     svgIconName: string,

app/globals.scss

@@ -11,6 +11,10 @@
     --background: 226, 231, 211;
     --black: 34,34,34;
     --black-v1: 56, 56, 56;
+    --black-v3: 62, 62, 62;
+    --border: 78, 78, 78;
+    --grey: 222, 222, 222;
+    --grey-v1: 167, 167, 167;
 }
 
 *, *::before, *::after {
@@ -50,15 +54,34 @@ body {
 
 .bg-black {
     background-color: rgb(var(--black));
+
+    &--opacity-8 {
+        background-color: rgba(var(--black), .8);
+    }
     &--v1 {
         background-color: rgb(var(--black-v1));
     }
+    &--v3 {
+        background-color: rgb(var(--black-v3));
+    }
 }
 
 .bg-grey {
     background-color: rgb(var(--header-active));
 }
 
+.color-grey {
+    color: rgb(var(--grey));
+}
+
+/*********************************** BORDER **********************************/
+
+.border {
+    border: 1px solid rgb(var(--border));
+    &:hover {
+        border-color: rgb(var(--grey-v1));
+    }
+}
 
 /*********************************** TRANISTION ******************************/
 

app/layout.tsx

@@ -3,6 +3,7 @@ import { Inter } from "next/font/google";
 import { Lato } from "next/font/google";
 import "./globals.scss";
 import Header from "./_components/header/Header";
+import Menu from "./_components/menu/Menu";
 
 const lato = Lato({ 
   subsets: ["latin"], 
@@ -22,9 +23,10 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={lato.className}>
+      <body className={`${lato.className} relative`}>
         <Header />
         {children}
+        <Menu />
       </body>
     </html>
   );

app/websites/page.tsx

@@ -0,0 +1,13 @@
+import Filter from "../_components/filters/Filters"
+
+export type WebsiteProps = {}
+
+const Website:React.FC<WebsiteProps> = ({}) => {
+    return (
+        <>
+            <Filter />
+        </>
+    )
+}
+
+export default Website