From cac8a2c680ba1a1cdcd4da8476fe0b7cc61a124e Mon Sep 17 00:00:00 2001
From: Mitchell Magro <mitchell.magro@playnorth.com>
Date: Mon, 30 Jun 2025 09:00:30 +0200
Subject: [PATCH] Added Account in navbar

---
 .../app/components/PageLinks/PageLinks.tsx    | 10 ++-
 payment-iq/app/dashboard/kyc/page.tsx         | 11 ++--
 .../app/features/dashboard/header/Header.scss | 17 +++++
 .../app/features/dashboard/header/Header.tsx  | 30 ++++-----
 .../header/accountMenu/AccountMenu.tsx        | 64 +++++++++++++++++++
 .../dashboard/header/dropDown/DropDown.scss   |  1 -
 .../dashboard/header/dropDown/DropDown.tsx    | 14 ++--
 payment-iq/styles/globals.scss                |  2 +-
 payment-iq/styles/variables.scss              |  2 +-
 9 files changed, 113 insertions(+), 38 deletions(-)
 create mode 100644 payment-iq/app/features/dashboard/header/Header.scss
 create mode 100644 payment-iq/app/features/dashboard/header/accountMenu/AccountMenu.tsx

diff --git a/payment-iq/app/components/PageLinks/PageLinks.tsx b/payment-iq/app/components/PageLinks/PageLinks.tsx
index e9a5db6..a9785d7 100644
--- a/payment-iq/app/components/PageLinks/PageLinks.tsx
+++ b/payment-iq/app/components/PageLinks/PageLinks.tsx
@@ -5,7 +5,15 @@ import { ISidebarLink } from "@/app/features/dashboard/sidebar/SidebarLink.inter
 import clsx from "clsx"; // Utility to merge class names
 import "./PageLinks.scss";
 
-export default function PageLinks({ title, path, icon: Icon }: ISidebarLink) {
+interface IPageLinksProps extends ISidebarLink {
+  isShowIcon?: boolean;
+}
+
+export default function PageLinks({
+  title,
+  path,
+  icon: Icon,
+}: IPageLinksProps) {
   return (
     <Link href={path} passHref legacyBehavior>
       <a className={clsx("link-container")}>
diff --git a/payment-iq/app/dashboard/kyc/page.tsx b/payment-iq/app/dashboard/kyc/page.tsx
index 367259b..e1e1102 100644
--- a/payment-iq/app/dashboard/kyc/page.tsx
+++ b/payment-iq/app/dashboard/kyc/page.tsx
@@ -1,15 +1,14 @@
-// This ensures this component is rendered only on the client side
 // 'use client';
 
-import Typography from '@mui/material/Typography';
-import React from 'react';
+import Typography from "@mui/material/Typography";
+import React from "react";
 
 export default function KycPage() {
   return (
-   <div>
-    <Typography variant="h4" gutterBottom>
+    <div>
+      <Typography variant="h4" gutterBottom>
         KYC Overview
       </Typography>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/payment-iq/app/features/dashboard/header/Header.scss b/payment-iq/app/features/dashboard/header/Header.scss
new file mode 100644
index 0000000..68bc362
--- /dev/null
+++ b/payment-iq/app/features/dashboard/header/Header.scss
@@ -0,0 +1,17 @@
+.header-toolbar {
+  display: flex;
+  align-items: center;
+
+  .left-group {
+    width: 100px;
+    display: flex;
+    align-items: center;
+    gap: 12px; // optional spacing between menu and dropdown
+  }
+
+  .right-group {
+    margin-left: auto; // pushes it to the far right
+    display: flex;
+    align-items: center;
+  }
+}
diff --git a/payment-iq/app/features/dashboard/header/Header.tsx b/payment-iq/app/features/dashboard/header/Header.tsx
index 6c40362..6c2778f 100644
--- a/payment-iq/app/features/dashboard/header/Header.tsx
+++ b/payment-iq/app/features/dashboard/header/Header.tsx
@@ -2,6 +2,8 @@ import React, { useState } from "react";
 import { AppBar, Toolbar, IconButton, Menu, MenuItem } from "@mui/material";
 import MenuIcon from "@mui/icons-material/Menu";
 import Dropdown from "./dropDown/DropDown";
+import AccountMenu from "./accountMenu/AccountMenu";
+import "./Header.scss";
 
 const Header = () => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
@@ -25,25 +27,17 @@ const Header = () => {
       elevation={0}
       sx={{ borderBottom: "1px solid #22242626" }}
     >
-      <Toolbar>
-        {/* Burger Menu */}
-        <IconButton edge="start" color="inherit" aria-label="menu">
-          <MenuIcon />
-        </IconButton>
+      <Toolbar className="header-toolbar">
+        <div className="left-group">
+          <IconButton edge="start" color="inherit" aria-label="menu">
+            <MenuIcon />
+          </IconButton>
+          <Dropdown onChange={handleChange} />
+        </div>
 
-        {/* Dropdown Button */}
-        <Dropdown onChange={handleChange} />
-
-        {/* Dropdown Menu */}
-        <Menu
-          anchorEl={anchorEl}
-          open={Boolean(anchorEl)}
-          onClose={handleMenuClose}
-        >
-          <MenuItem onClick={handleMenuClose}>Option 1</MenuItem>
-          <MenuItem onClick={handleMenuClose}>Option 2</MenuItem>
-          <MenuItem onClick={handleMenuClose}>Option 3</MenuItem>
-        </Menu>
+        <div className="right-group">
+          <AccountMenu />
+        </div>
       </Toolbar>
     </AppBar>
   );
diff --git a/payment-iq/app/features/dashboard/header/accountMenu/AccountMenu.tsx b/payment-iq/app/features/dashboard/header/accountMenu/AccountMenu.tsx
new file mode 100644
index 0000000..7287199
--- /dev/null
+++ b/payment-iq/app/features/dashboard/header/accountMenu/AccountMenu.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import React from "react";
+import {
+  Menu,
+  MenuItem,
+  IconButton,
+  ListItemIcon,
+  Typography,
+} from "@mui/material";
+import AccountCircleIcon from "@mui/icons-material/AccountCircle";
+import SettingsIcon from "@mui/icons-material/Settings";
+import LogoutIcon from "@mui/icons-material/Logout";
+
+export default function AccountMenu() {
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <>
+      <IconButton onClick={handleClick} color="inherit">
+        <AccountCircleIcon />
+      </IconButton>
+
+      <Menu
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        onClick={handleClose}
+        transformOrigin={{ horizontal: "right", vertical: "top" }}
+        anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
+      >
+        <MenuItem>
+          <ListItemIcon>
+            <AccountCircleIcon fontSize="small" />
+          </ListItemIcon>
+          <Typography variant="inherit">Account</Typography>
+        </MenuItem>
+
+        <MenuItem>
+          <ListItemIcon>
+            <SettingsIcon fontSize="small" />
+          </ListItemIcon>
+          <Typography variant="inherit">Settings</Typography>
+        </MenuItem>
+
+        <MenuItem>
+          <ListItemIcon>
+            <LogoutIcon fontSize="small" />
+          </ListItemIcon>
+          <Typography variant="inherit">Sign out</Typography>
+        </MenuItem>
+      </Menu>
+    </>
+  );
+}
diff --git a/payment-iq/app/features/dashboard/header/dropDown/DropDown.scss b/payment-iq/app/features/dashboard/header/dropDown/DropDown.scss
index dedc3ff..e5f6908 100644
--- a/payment-iq/app/features/dashboard/header/dropDown/DropDown.scss
+++ b/payment-iq/app/features/dashboard/header/dropDown/DropDown.scss
@@ -1,4 +1,3 @@
-/* DropDown.scss */
 .dropdown-container {
   .link-container {
     color: var(--text-secondary);
diff --git a/payment-iq/app/features/dashboard/header/dropDown/DropDown.tsx b/payment-iq/app/features/dashboard/header/dropDown/DropDown.tsx
index 6b037bd..b4babda 100644
--- a/payment-iq/app/features/dashboard/header/dropDown/DropDown.tsx
+++ b/payment-iq/app/features/dashboard/header/dropDown/DropDown.tsx
@@ -6,12 +6,10 @@ import {
   MenuItem,
   SelectChangeEvent,
 } from "@mui/material";
-import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import { SIDEBAR_LINKS } from "@/app/features/dashboard/sidebar/SidebarLink.constants";
 import { ISidebarLink } from "@/app/features/dashboard/sidebar/SidebarLink.interfaces";
-import { Em } from "./Em"; // If you still want to create a component for the <em> tag
 import PageLinks from "../../../../components/PageLinks/PageLinks";
-import "./DropDown.scss"; // Import the SCSS file
+import "./DropDown.scss";
 
 interface Props {
   onChange?: (event: SelectChangeEvent<string>) => void;
@@ -26,7 +24,7 @@ export default function SidebarDropdown({ onChange }: Props) {
   };
 
   return (
-    <FormControl fullWidth variant="outlined" sx={{ maxWidth: 200 }}>
+    <FormControl fullWidth variant="outlined" sx={{ minWidth: 200 }}>
       <InputLabel id="sidebar-dropdown-label">Navigate To</InputLabel>
       <Select
         labelId="sidebar-dropdown-label"
@@ -41,15 +39,11 @@ export default function SidebarDropdown({ onChange }: Props) {
           },
         }}
       >
+        <em className="em">Select a page</em>
         <MenuItem value="" disabled></MenuItem>
         <div className="dropdown-container">
           {SIDEBAR_LINKS.map((link: ISidebarLink) => (
-            <PageLinks
-              key={link.path}
-              title={link.title}
-              path={link.path}
-              icon={link.icon}
-            />
+            <PageLinks key={link.path} title={link.title} path={link.path} />
           ))}
         </div>
       </Select>
diff --git a/payment-iq/styles/globals.scss b/payment-iq/styles/globals.scss
index e75b9c3..366294f 100644
--- a/payment-iq/styles/globals.scss
+++ b/payment-iq/styles/globals.scss
@@ -1,4 +1,4 @@
-@import "./variables";
+@use "./variables" as *;
 
 :root {
   --background: #0a0a0a;
diff --git a/payment-iq/styles/variables.scss b/payment-iq/styles/variables.scss
index 148e55f..d8311d9 100644
--- a/payment-iq/styles/variables.scss
+++ b/payment-iq/styles/variables.scss
@@ -1,4 +1,4 @@
-// Declare SCSS variables
+// These Variable match thee MUI theme variables. For now they have to be updated manually. But can be done automatically also
 $primary-color: #1976d2;
 $secondary-color: #d32f2f;
 $background-primary: rgb(69, 190, 171);