chore(voucher): updated nav-menu

apps/voucher/app/globals.css

@@ -2,6 +2,15 @@
 @tailwind components;
 @tailwind utilities;
 
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+html {
+  box-sizing: border-box;
+}
+
 :root {
   --gradient-orange: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
     linear-gradient(45deg, #f6a139 0%, #fb5607 100%);

apps/voucher/components/nav-bar/navigation.tsx

@@ -1,7 +1,7 @@
 "use client"
 import React from "react"
 import { signOut, useSession } from "next-auth/react"
-import { useRouter } from "next/navigation"
+import { useRouter, usePathname } from "next/navigation"
 import Image from "next/image"
 import Link from "next/link"
 
@@ -24,8 +24,6 @@ import {
   SelectValue,
 } from "../select"
 
-import { Separator } from "@/components/separator"
-
 import { useCurrency } from "@/context/currency-context"
 
 const Navigation: React.FC = () => {
@@ -67,53 +65,70 @@ export default Navigation
 
 const NavMenu = ({ username }: { username: string }) => {
   const menuItems = [
-    { path: "/create", label: "Create Link" },
-    { path: "/user/links", label: "My Links" },
-    { path: "/redeem", label: "Redeem" },
+    { path: "/create", label: "Create Link", icon: "/create-voucher-outline.svg" },
+    { path: "/user/links", label: "My Links", icon: "/links-outline.svg" },
+    { path: "/redeem", label: "Redeem", icon: "/redeem-outline.svg" },
   ]
 
+  const pathname = usePathname()
+
   return (
     <Sheet>
       <SheetTrigger>
         <Image src="menu-outline.svg" alt="menu" height={40} priority={true} width={40} />
       </SheetTrigger>
       <SheetContent className="m-0 p-0">
         {username ? (
-          <>
-            <SheetHeader className="flex flex-col pl-5 text-left mt-6 justify-center align-middle w-full">
-              <SheetTitle>{username}</SheetTitle>
-            </SheetHeader>
-            <Separator className="mt-5" />
-          </>
+          <SheetHeader className="flex flex-col pl-5 text-left mt-6 justify-center align-middle w-full">
+            <SheetTitle>{username}</SheetTitle>
+          </SheetHeader>
         ) : null}
-        <div
-          className={`flex flex-col text-left ${
-            username ? "mt-5" : "mt-20"
-          } justify-center align-middle w-11/12 border-2 border-secondary m-auto rounded-lg`}
-        >
-          {menuItems.map((item, index) => (
-            <React.Fragment key={item.path}>
+        <div className="mt-14">
+          <CurrencySwitcher />
+        </div>
+        <div className="flex flex-col align-center gap-1 w-full mt-4">
+          {menuItems.map((item) => (
+            <div
+              className={`flex w-11/12 m-auto justify-center align-middle rounded-md p-2 cursor-pointer ${
+                pathname === item.path ? "bg-secondary" : "hover:bg-secondary"
+              }`}
+              key={item.path}
+            >
               <SheetClose asChild>
-                <Link className="w-full" href={item.path}>
-                  <div className="w-full hover:bg-secondary p-3 pl-5">{item.label}</div>
+                <Link
+                  className="w-full flex justify-center align-middle"
+                  href={item.path}
+                >
+                  <Image
+                    width={25}
+                    height={25}
+                    alt={item.label}
+                    priority={true}
+                    src={item.icon}
+                  ></Image>
+                  <div className="w-full pl-5">{item.label}</div>
                 </Link>
               </SheetClose>
-              {index < menuItems.length - 1 && <Separator />}
-            </React.Fragment>
+            </div>
           ))}
-          <Separator />
           <SheetClose asChild>
-            <div
-              className="w-full hover:bg-secondary p-3 pl-5"
-              onClick={() => signOut({ callbackUrl: "/" })}
-            >
-              Log Out
+            <div className="flex w-11/12 m-auto justify-center hover:bg-secondary p-2 align-middle rounded-md cursor-pointer">
+              <Image
+                width={26}
+                height={26}
+                alt="logout"
+                priority={true}
+                src="/log-out-outline-red.svg"
+              ></Image>
+              <div
+                className="w-full text-error pl-5"
+                onClick={() => signOut({ callbackUrl: "/" })}
+              >
+                Log Out
+              </div>
             </div>
           </SheetClose>
         </div>
-        <div className="mt-4">
-          <CurrencySwitcher />
-        </div>
       </SheetContent>
     </Sheet>
   )
@@ -123,7 +138,8 @@ export const CurrencySwitcher = () => {
   const { currency: selectedCurrency, changeCurrency, currencyList } = useCurrency()
 
   return (
-    <div className="w-11/12 m-auto">
+    <div className="w-11/12 m-auto flex gap-1 flex-col">
+      <div className="text-md font-semibold">Currency</div>
       <Select onValueChange={(value) => changeCurrency(value)}>
         <SelectTrigger className="text-md">
           <SelectValue placeholder={selectedCurrency} />

apps/voucher/tailwind.config.ts

@@ -21,6 +21,7 @@ const config: Config = {
         "secondary": "#e6ebef",
         "white": "#ffffff",
         "black": "#000000",
+        "error": "#dc2626",
       },
     },
   },