Make VuiAppSideNav collapsible

src/docs/pages/app/App.tsx

@@ -8,8 +8,11 @@ import {
   VuiButtonSecondary,
   VuiFlexContainer,
   VuiFlexItem,
+  VuiHorizontalRule,
   VuiSelect,
   VuiSpacer,
+  VuiText,
+  VuiTextColor,
   VuiTitle
 } from "../../../lib";
 import "./appExample.scss";
@@ -58,6 +61,18 @@ export const App = () => {
               { name: "Page 3", path: "/" },
               { name: "Page 4", path: "/" }
             ]}
+            navContent={
+              <>
+                <VuiSpacer size="l" />
+                <VuiHorizontalRule />
+                <VuiSpacer size="l" />
+                <VuiText>
+                  <p>
+                    <VuiTextColor color="subdued">Made with love on Terra</VuiTextColor>
+                  </p>
+                </VuiText>
+              </>
+            }
           >
             <VuiAppContent className="appExampleContent" fullWidth={isFullWidth} padding={padding}>
               <VuiButtonSecondary color="primary" onClick={() => setIsFullWidth(!isFullWidth)}>

src/lib/components/app/AppLayout.tsx

@@ -3,13 +3,15 @@ import { VuiAppSideNav, Props as VuiAppSideNavProps } from "./AppSideNav";
 type Props = {
   children: React.ReactNode;
   navItems?: VuiAppSideNavProps["items"];
-  nav?: React.ReactNode;
+  navContent?: React.ReactNode;
 };
 
-export const VuiAppLayout = ({ children, navItems, nav }: Props) => {
+export const VuiAppLayout = ({ children, navItems, navContent }: Props) => {
   return (
     <div className="vuiAppLayout">
-      <div className="vuiAppLayout__sideNav">{navItems ? <VuiAppSideNav items={navItems} /> : nav}</div>
+      <div className="vuiAppLayout__sideNav">
+        <VuiAppSideNav items={navItems} content={navContent} />
+      </div>
 
       <div className="vuiAppLayout__content">{children}</div>
     </div>

src/lib/components/app/AppSideNav.tsx

@@ -1,5 +1,9 @@
 import classNames from "classnames";
+import { useState } from "react";
 import { Link, useLocation } from "react-router-dom";
+import { VuiIconButton } from "../button/IconButton";
+import { VuiIcon } from "../icon/Icon";
+import { BiChevronRight } from "react-icons/bi";
 
 export type TreeItem = {
   name: string;
@@ -8,7 +12,8 @@ export type TreeItem = {
 };
 
 export type Props = {
-  items: Array<TreeItem>;
+  items?: Array<TreeItem>;
+  content?: React.ReactNode;
 };
 
 const buildItems = (items: Array<TreeItem>, currentPath: string) => {
@@ -36,7 +41,40 @@ const buildItems = (items: Array<TreeItem>, currentPath: string) => {
   });
 };
 
-export const VuiAppSideNav = ({ items }: Props) => {
+export const VuiAppSideNav = ({ items = [], content }: Props) => {
+  const [isCollapsed, setIsCollapsed] = useState(false);
   const location = useLocation();
-  return <div className="appSideNav">{buildItems(items, location.pathname)}</div>;
+
+  const classes = classNames("appSideNav", {
+    "appSideNav-isCollapsed": isCollapsed
+  });
+
+  return (
+    <div className={classes}>
+      <div className="appSideNav__inner">
+        {isCollapsed ? (
+          <VuiIconButton
+            onClick={() => setIsCollapsed(false)}
+            className="appSideNavExpandButton"
+            color="normal"
+            icon={
+              <VuiIcon>
+                <BiChevronRight />
+              </VuiIcon>
+            }
+          />
+        ) : (
+          <>
+            <button className="appSideNavCollapseButton" onClick={() => setIsCollapsed(true)}>
+              Collapse nav
+            </button>
+
+            {buildItems(items, location.pathname)}
+
+            {content}
+          </>
+        )}
+      </div>
+    </div>
+  );
 };

src/lib/components/app/appLayout.scss

@@ -6,7 +6,6 @@
 }
 
 .vuiAppLayout__sideNav {
-  padding: 0 $sizeM 0;
   border-right: 1px solid $colorMediumShade;
   flex-shrink: 0;
   overflow-y: auto;

src/lib/components/app/appSideNav.scss

@@ -1,6 +1,43 @@
+$appSideNavWidth: 200px;
+
 .appSideNav {
-  padding: $sizeXl $sizeM;
+  width: $appSideNavWidth;
+  overflow-x: hidden;
+  transition: all $transitionSpeed;
+}
+
+.appSideNav__inner {
+  width: $appSideNavWidth;
+  padding: $sizeL $sizeM * 2 $sizeXl;
   margin-bottom: $sizeXxl * 4;
+  transition: all $transitionSpeed;
+}
+
+.appSideNav-isCollapsed {
+  width: 60px;
+
+  .appSideNav__inner {
+    padding-left: $sizeM;
+  }
+}
+
+.appSideNavCollapseButton {
+  display: block;
+  color: $colorSubdued;
+  font-size: $fontSizeXs;
+  text-decoration: none;
+  padding: 0 $sizeM;
+  margin-left: -$sizeM;
+  margin-bottom: $sizeM;
+
+  &:hover {
+    color: $colorPrimary;
+    text-decoration: underline;
+  }
+}
+
+.appSideNavExpandButton {
+  margin-top: -$sizeXxs;
 }
 
 .appSideNavSection + .appSideNavSection {