Allow appSideNavLink iconAfter to be positioned at the end (right) (#326)

Allow appSideNavLink to be positioned at the end

Author: aamirkhan-91

src/docs/pages/app/Layout.tsx

@@ -1,5 +1,16 @@
 import { useState } from "react";
-import { BiBook, BiCreditCard, BiData, BiKey, BiLineChart, BiLogOut, BiRightArrowAlt, BiUser } from "react-icons/bi";
+import {
+  BiBook,
+  BiCreditCard,
+  BiData,
+  BiError,
+  BiHeart,
+  BiKey,
+  BiLineChart,
+  BiLogOut,
+  BiRightArrowAlt,
+  BiUser
+} from "react-icons/bi";
 import {
   VuiAppSideNav,
   VuiAppSideNavLink,
@@ -63,9 +74,9 @@ const AccountButton = () => {
 
 export const Layout = ({ children }: { children: React.ReactNode }) => {
   const [isOpen, setIsOpen] = useState(false);
-  const [activeItem, setActiveItem] = useState<"corpora" | "apiKeys" | "team" | "usage" | "billing" | "docs">(
-    "corpora"
-  );
+  const [activeItem, setActiveItem] = useState<
+    "corpora" | "apiKeys" | "team" | "usage" | "billing" | "health" | "docs"
+  >("corpora");
 
   const navContent = (
     <>
@@ -109,6 +120,16 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
         isSelected={activeItem === "billing"}
       />
 
+      <VuiAppSideNavLink
+        name="Health"
+        iconBefore={<BiHeart />}
+        data-testid="navHealth"
+        iconAfterAlignEnd
+        iconAfter={<BiError />}
+        onClick={() => setActiveItem("health")}
+        isSelected={activeItem === "health"}
+      />
+
       <VuiPopover
         anchorSide="rightUp"
         isOpen={isOpen}

src/lib/components/app/appSideNav/AppSideNavLink.tsx

@@ -8,10 +8,11 @@ import { forwardRef } from "react";
 
 type Props = Pick<TreeItem, "name" | "path" | "iconBefore" | "iconAfter" | "isSelected" | "className"> & {
   onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+  iconAfterAlignEnd?: boolean;
 };
 
 export const VuiAppSideNavLink = forwardRef<HTMLAnchorElement | null, Props>(
-  ({ path, onClick, name, iconBefore, iconAfter, isSelected, className, ...rest }: Props, ref) => {
+  ({ path, onClick, name, iconBefore, iconAfter, isSelected, className, iconAfterAlignEnd, ...rest }: Props, ref) => {
     const { createLink, getPath } = useVuiContext();
 
     const classes = classNames(
@@ -36,7 +37,11 @@ export const VuiAppSideNavLink = forwardRef<HTMLAnchorElement | null, Props>(
           </VuiFlexItem>
 
           {iconAfter && (
-            <VuiFlexItem grow={false} shrink={false}>
+            <VuiFlexItem
+              grow={false}
+              shrink={false}
+              className={iconAfterAlignEnd ? "vuiAppSideNavLink__iconAfter--alignEnd" : undefined}
+            >
               <VuiIcon size="s">{iconAfter}</VuiIcon>
             </VuiFlexItem>
           )}

src/lib/components/app/appSideNav/appSideNav.scss

@@ -74,6 +74,10 @@
   background-color: var(--vui-color-light-shade);
 }
 
+.vuiAppSideNavLink__iconAfter--alignEnd {
+  margin-left: auto;
+}
+
 .vuiAppSideNav--m {
   .vuiAppSideNav__inner {
     padding: 28px 32px 32px 33px;