From 967a9d9c3e1acc76912547f003b01f30baa5f18b Mon Sep 17 00:00:00 2001
From: Son-OfAnton <admasterefe00@gmail.com>
Date: Sat, 2 Sep 2023 23:35:52 +0300
Subject: [PATCH] feat(AAiT.web.g1): Added toast and glass navbar

---
 aait/web/group-1/app/layout.tsx               |  2 +-
 aait/web/group-1/app/profile/account/page.tsx |  5 ++-
 aait/web/group-1/components/layout/NavBar.tsx | 40 ++++++++++++++-----
 3 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/aait/web/group-1/app/layout.tsx b/aait/web/group-1/app/layout.tsx
index a323fe906..951509eda 100644
--- a/aait/web/group-1/app/layout.tsx
+++ b/aait/web/group-1/app/layout.tsx
@@ -3,7 +3,7 @@ import type { Metadata } from "next";
 import { Poppins } from "next/font/google";
 import { NavBar } from "@/components/layout/NavBar";
 
-import { ToastContainer } from 'react-toastify'
+import { ToastContainer } from "react-toastify";
 import 'react-toastify/dist/ReactToastify.css'
 
 const inter = Poppins({
diff --git a/aait/web/group-1/app/profile/account/page.tsx b/aait/web/group-1/app/profile/account/page.tsx
index d351bf4fe..3613d9d8b 100644
--- a/aait/web/group-1/app/profile/account/page.tsx
+++ b/aait/web/group-1/app/profile/account/page.tsx
@@ -3,7 +3,7 @@
 import React, { useState } from 'react';
 import Image from 'next/image';
 import { useChangePasswordMutation } from '@/store/features/user/userApi';
-
+import { toast } from 'react-toastify';
 
 export default function Page() {
   const [changePassword] = useChangePasswordMutation()
@@ -13,10 +13,11 @@ export default function Page() {
 
   const handleSaveChanges = () => {
     if(newPassword !== confirmPass) {
-      window.alert("Password don't match")
+      toast.error('Passwords are not matching')
       return
     }
     changePassword({"oldPassword": oldPassword, "newPassword": newPassword})
+    toast.success("Password changed successfuly")
 
   }
 
diff --git a/aait/web/group-1/components/layout/NavBar.tsx b/aait/web/group-1/components/layout/NavBar.tsx
index 10ec976fb..089d579f2 100644
--- a/aait/web/group-1/components/layout/NavBar.tsx
+++ b/aait/web/group-1/components/layout/NavBar.tsx
@@ -15,6 +15,8 @@ interface NavItems {
 export const NavBar = () => {
   const router = useRouter()
   const [isMenuToggled, setIsMenuToggled] = useState<boolean>(false);
+  const userData = localStorage.getItem('user');
+  const currUser = userData ? JSON.parse(userData) : null;
 
   const navItems: NavItems[] = [
     {
@@ -61,13 +63,19 @@ export const NavBar = () => {
 
         {/* login signup section */}
         <div className="flex gap-2">
-          <Link href={'/signin'} className="btn">Login</Link>
-          <button 
-            className="btn bg-blue-800 text-white"
-            onClick={() => router.push('/profile')}
-            >
-              Profile
-          </button>
+          <Link href="/signin" className="btn">Login</Link>
+          <Link href="/profile">
+            <div className="relative rounded-full w-10 h-10">
+              <Image
+                src={currUser ? currUser.userProfile: "https://res.cloudinary.com/djtkzulun/image/upload/v1684307248/Portfolio/dgxjqlgpys1imwnw2bhq"}
+                alt="User Avatar"
+                layout="fill"
+                objectFit="cover"
+                className="rounded-full"
+              />
+            </div>
+          </Link>
+          
         </div>
       </div>
 
@@ -80,17 +88,27 @@ export const NavBar = () => {
 
         <div className="flex flex-col items-end relative">
           <button onClick={() => setIsMenuToggled(!isMenuToggled)}>
-            <Image src={"./images/burger.svg"} alt="" width={40} height={40} />
+            <img src="./images/burger.svg" className="w-10 h-10" />
           </button>
 
           {/* Navigation section */}
           {isMenuToggled && (
-            <div className="flex flex-col w-36 items-center space-y-1 absolute top-10 right-0 bg-blue-100 shadow-lg">
+            <div className="flex flex-col w-36 items-center space-y-1 absolute top-10 right-0 bg-opacity-30 backdrop-blur-sm bg-white border border-opacity-20 border-gray-200 rounded-lg shadow-lg">
+              <Link href="/profile">
+                <div className="relative rounded-full w-10 h-10">
+                  <Image
+                    src={currUser ? currUser.userProfile: "https://res.cloudinary.com/djtkzulun/image/upload/v1684307248/Portfolio/dgxjqlgpys1imwnw2bhq"}
+                    alt="User Avatar"
+                    layout="fill"
+                    objectFit="cover"
+                    className="rounded-full"
+                  />
+                </div>
+              </Link>
               {navItems.map((nav: NavItems) => (
                 <LinkItems key={nav.name} name={nav.name} link={nav.link} />
               ))}
-              <button className="btn">Login</button>
-              <button className="btn">Donate</button>
+              <Link className="btn" href="/signin">Login</Link>
             </div>
           )}
         </div>