Added Account in navbar

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")}>

payment-iq/app/dashboard/kyc/page.tsx

@@ -1,13 +1,12 @@
-// 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>

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;
+  }
+}

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>
   );

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>
+    </>
+  );
+}

payment-iq/app/features/dashboard/header/dropDown/DropDown.scss

@@ -1,4 +1,3 @@
-/* DropDown.scss */
 .dropdown-container {
   .link-container {
     color: var(--text-secondary);

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>

payment-iq/styles/globals.scss

@@ -1,4 +1,4 @@
-@import "./variables";
+@use "./variables" as *;
 
 :root {
   --background: #0a0a0a;

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);