Polish VuiAppSideNav. Support icons.

src/docs/pages/app/App.tsx

@@ -16,7 +16,7 @@ import {
   VuiTitle
 } from "../../../lib";
 import "./appExample.scss";
-import { BiRightArrowAlt } from "react-icons/bi";
+import { BiCreditCard, BiGroup, BiHome, BiKey, BiLayer, BiRightArrowAlt } from "react-icons/bi";
 
 const paddingOptions = [
   { text: "none", value: "none" },
@@ -57,24 +57,30 @@ export const App = () => {
 
           <VuiAppLayout
             navItems={[
-              { name: "Overview", path: "/" },
               {
+                iconBefore: <BiHome />,
+                name: "Overview",
+                path: "/"
+              },
+              {
+                iconBefore: <BiLayer />,
                 name: "Corpora",
                 path: "/app",
                 pages: [
-                  { name: "Recent corpora" },
+                  { name: "Recently used" },
                   { name: "Corpus 1", path: "/" },
                   { name: "Corpus 2", path: "/" },
                   { name: "Corpus 3", path: "/" },
                   { name: "Corpus 4 with a really long name", path: "/" },
                   { name: "Corpus 5", path: "/" },
                   { name: "Corpus 6", path: "/" },
                   { name: "Corpus 7", path: "/" },
-                  { name: "See all", path: "/", iconAfter: <BiRightArrowAlt /> }
+                  { name: "View all", path: "/", iconBefore: <BiRightArrowAlt /> }
                 ]
               },
-              { name: "API keys", path: "/" },
-              { name: "Team", path: "/" }
+              { iconBefore: <BiKey />, name: "API keys", path: "/" },
+              { iconBefore: <BiGroup />, name: "Authentication", path: "/" },
+              { iconBefore: <BiCreditCard />, name: "Team", path: "/" }
             ]}
             navContent={
               <>

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

@@ -6,29 +6,38 @@ import { VuiFlexItem } from "../../flex/FlexItem";
 import { VuiIcon } from "../../icon/Icon";
 import { SideNavContext } from "./AppSideNav";
 
-type Props = { path: string; name: string; iconAfter?: React.ReactNode };
+type Props = { path: string; name: string; iconBefore?: React.ReactNode; iconAfter?: React.ReactNode };
 
-export const VuiAppSideNavLink = ({ path, name, iconAfter }: Props) => {
+export const VuiAppSideNavLink = ({ path, name, iconBefore, iconAfter }: Props) => {
   const { isCollapsed } = useContext(SideNavContext);
   const location = useLocation();
 
   const classes = classNames("vuiAppSideNavLink", {
     "vuiAppSideNavLink--active": path === location.pathname
   });
 
-  const content = iconAfter ? (
-    <VuiFlexContainer alignItems="center" spacing="xxs">
-      <VuiFlexItem grow={false} shrink={false}>
-        {name}
-      </VuiFlexItem>
+  const content =
+    iconBefore || iconAfter ? (
+      <VuiFlexContainer alignItems="center" spacing="xxs">
+        {iconBefore && (
+          <VuiFlexItem grow={false} shrink={false}>
+            <VuiIcon size="s">{iconBefore}</VuiIcon>
+          </VuiFlexItem>
+        )}
 
-      <VuiFlexItem grow={false} shrink={false}>
-        <VuiIcon size="s">{iconAfter}</VuiIcon>
-      </VuiFlexItem>
-    </VuiFlexContainer>
-  ) : (
-    name
-  );
+        <VuiFlexItem grow={false} shrink={false}>
+          {name}
+        </VuiFlexItem>
+
+        {iconAfter && (
+          <VuiFlexItem grow={false} shrink={false}>
+            <VuiIcon size="s">{iconAfter}</VuiIcon>
+          </VuiFlexItem>
+        )}
+      </VuiFlexContainer>
+    ) : (
+      name
+    );
 
   return (
     <Link className={classes} to={path} key={name} tabIndex={isCollapsed ? -1 : undefined}>

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

@@ -11,23 +11,24 @@ export type TreeItem = {
   name: string;
   path?: string;
   pages?: Tree;
+  iconBefore?: React.ReactNode;
   iconAfter?: React.ReactNode;
 };
 
 export const buildTree = (items: Tree) => {
-  return items.map(({ name, pages, path, iconAfter }) => {
+  return items.map(({ name, pages, path, iconBefore, iconAfter }) => {
     if (path) {
       if (pages) {
         const childPages = buildTree(pages);
 
         return (
-          <AppSideNavTreeSection key={name} path={path} name={name}>
+          <AppSideNavTreeSection key={name} path={path} name={name} iconBefore={iconBefore} iconAfter={iconAfter}>
             {childPages}
           </AppSideNavTreeSection>
         );
       }
 
-      return <VuiAppSideNavLink key={name} path={path} name={name} iconAfter={iconAfter} />;
+      return <VuiAppSideNavLink key={name} path={path} name={name} iconBefore={iconBefore} iconAfter={iconAfter} />;
     }
 
     return (
@@ -42,15 +43,17 @@ type Props = {
   name: string;
   path: string;
   children: React.ReactNode;
+  iconBefore?: React.ReactNode;
+  iconAfter?: React.ReactNode;
 };
 
-const AppSideNavTreeSection = ({ name, path, children }: Props) => {
+const AppSideNavTreeSection = ({ name, path, children, iconBefore, iconAfter }: Props) => {
   const { isCollapsed } = useContext(SideNavContext);
   const [isOpen, setIsOpen] = useState(true);
 
   return (
     <div className="vuiAppSideNavTreeSection">
-      <VuiAppSideNavLink path={path} name={name} />
+      <VuiAppSideNavLink path={path} name={name} iconBefore={iconBefore} iconAfter={iconAfter} />
 
       <VuiIconButton
         className="vuiAppSideNavTreeToggleButton"

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

@@ -1,4 +1,4 @@
-$appSideNavWidth: 200px;
+$appSideNavWidth: 240px;
 $appSideNavWidthCollapsed: 60px;
 $appSideNavLinkSpacing: $sizeXxs + 1px;
 

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

@@ -13,11 +13,13 @@
 }
 
 .vuiAppSideNavTreeChildren {
-  margin-left: $sizeM;
+  // Sized to match the width of the icons.
+  margin-left: 20px;
 }
 
 .vuiAppSideNavTreeSection__subTitle {
   @include appSideNavItem;
-  font-weight: $fontWeightBold;
   font-size: $fontSizeXxs;
+  font-weight: $fontWeightBold;
+  color: $colorDarkShade;
 }