Merge pull request #115 from SSWConsulting/108-icons-next-to-sidebar-…

…titles

108 icons next to sidebar titles

lib/components/MegaIcon/MegaIcon.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { AvailableIcons, iconMap } from "../../types/icon";
+import { ICON_IMAGE_SIZES, IconSizes } from "../../util/constants";
 import { CustomImage } from "../CustomImage";
 
 const MegaIconMapper = ({
@@ -22,12 +23,14 @@ export interface MegaIconProps {
   // TODO: implement below intended solution extends React.ComponentPropsWithoutRef<"span"> {
   iconImg?: string;
   icon?: AvailableIcons;
+  imgSize?: IconSizes;
   className?: string;
 }
 
 export const MegaIcon: React.FC<MegaIconProps> = ({
   icon,
   iconImg,
+  imgSize = "small",
   className,
 }) => {
   //if icon is an SVGElement, just return it with props spread into it
@@ -47,7 +50,7 @@ export const MegaIcon: React.FC<MegaIconProps> = ({
   return (
     <div>
       <CustomImage
-        className="h-5 w-5"
+        className={ICON_IMAGE_SIZES[imgSize]}
         src={iconImg}
         alt={iconImg}
         width={20}

lib/components/SubMenuGroup/SubMenuGroup.tsx

@@ -1,4 +1,5 @@
 "use client";
+import clsx from "clsx";
 import React, { useContext } from "react";
 import { useLinkComponent } from "../../hooks/useLinkComponent";
 import { AvailableIcons } from "../../types/icon";
@@ -9,6 +10,7 @@ import {
   Sidebar,
   ViewAll,
 } from "../../types/megamenu";
+import { ICON_IMAGE_SIZES } from "../../util/constants";
 import { cx } from "../../util/cx";
 import { ClosePopoverContext } from "../DesktopMenu/DesktopMenu";
 import { MegaIcon } from "../MegaIcon";
@@ -51,8 +53,22 @@ export const SubMenuGroup: React.FC<SubMenuGroupProps> = ({
           <div className="flex flex-col gap-y-2 px-8 py-4">
             {sidebarItems?.map((sideBarItem, i) => (
               <div key={i}>
-                <Heading className={i > 0 ? "pt-6" : ""}>
+                <Heading
+                  className={clsx(
+                    i > 0 && "flex pt-6",
+                    "flex items-center gap-3",
+                  )}
+                >
                   {sideBarItem.name}
+
+                  {(sideBarItem.iconImg || sideBarItem.icon) && (
+                    <MegaIcon
+                      imgSize="medium"
+                      iconImg={sideBarItem.iconImg}
+                      className={ICON_IMAGE_SIZES.medium}
+                      icon={sideBarItem.icon}
+                    />
+                  )}
                 </Heading>
                 <div className="flex flex-col gap-y-4">
                   {sideBarItem.items?.map((item, i) => (

lib/types/megamenu.ts

@@ -35,6 +35,8 @@ export interface NavMenuColumnGroupItem {
 
 export interface Sidebar {
   name: string;
+  icon?: AvailableIcons | string;
+  iconImg: string;
   items?: SidebarItem[];
 }
 

lib/util/constants.ts

@@ -1 +1,6 @@
 export const DEFAULT_URL = "https://www.ssw.com.au";
+export const ICON_IMAGE_SIZES: { [key in IconSizes]: string } = {
+  small: "h-5 w-5",
+  medium: "h-8 w-8",
+};
+export type IconSizes = "small" | "medium";

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ssw.megamenu",
-  "version": "4.8.0",
+  "version": "4.9.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",