Dropdown partially completed

IMISSHER99 · Jun 15, 2024 · 4801334 · 4801334
1 parent 42aa163
commit 4801334
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 2 deletions.
diff --git a/app/_common/dropdown/Dropdown.tsx b/app/_common/dropdown/Dropdown.tsx
@@ -1,14 +1,32 @@
+'use client'
+import Link from "next/link"
+import { useState } from "react"
+
 export type DropdownProps = {}
 
 const Dropdown:React.FC<DropdownProps> = ({}) => {
+
+    const [visibility, toggleVisibility] = useState<boolean>(false);
+
     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>
+            <button className="relative flex items-center justify-between min-w-[48px] max-w-[220px] ps-6 pe-6 gap-1.5 bg-white rounded-lg" onClick={() => toggleVisibility(!visibility)}>
+                <span className="flex items-center justify-between whitespace-nowrap font-normal text-sm">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>
+                <div className={`absolute ${visibility ? 'visible opacity-1': 'invisible opacity-0' } transition top-[54px] left-0 w-[280px] h-[500px] rounded-lg bg-white p-2 box-shadow overflow-hidden`}>
+                    <ul>
+                        <li className="h-fit">
+                            <Link href={"/"} className="flex items-center h-[40px] px-[30px] py-2 relative transition radio rounded-lg">
+                                <span className="text-sm">Sites of the Day</span>
+                            </Link>
+                        </li>
+
+                    </ul>
+                </div>
             </button>
+
         </>
     )
 }

diff --git a/app/globals.scss b/app/globals.scss
@@ -40,6 +40,13 @@ body {
     }
 }
 
+/********************************** BOX SHADOW ********************************/
+
+.box-shadow {
+    box-shadow: 0 0 6px 0px rgba(0,0,0,0.2);
+}
+
+
 /*********************************** HEIGHT **********************************/
 .h-fill {
     height: -webkit-fill-available;
@@ -74,6 +81,42 @@ body {
     color: rgb(var(--grey));
 }
 
+/********************************** RADIO ************************************/
+
+.radio {
+    &::before {
+        content: "";
+        position: absolute;
+        left: 10px;
+        top: 12px;
+        width: 12px;
+        height: 12px;
+        border: 1px solid #a7a7a7;
+        border-radius: 50%;
+    }
+
+    &::after {
+        content: "";
+        position: absolute;
+        left: 12px;
+        top: 14px;
+        width: 8px;
+        height: 8px;
+        background: currentColor;
+        border-radius: 50%;
+        opacity: 0;
+        transition: all .3s;
+    }
+
+    &:hover {
+        background-color: rgb(var(--header-active));
+
+        &:after {
+            opacity: 1;
+        }
+    }
+}
+
 /*********************************** BORDER **********************************/
 
 .border {