@usace/groundwork 1.0.1 → 1.0.3

package/lib/composite/header/usa-banner/usa-banner.css

@@ -1,220 +0,0 @@
-.header_banner_container,
-.header_banner_container .header_banner_content .banner-contentLeft-text,
-.header_banner_container .header_banner_content .banner-contentRight-text {
-  color: #fff;
-}
-
-.header_banner_container {
-  padding: 0 20px;
-  position: relative;
-  z-index: 10;
-}
-
-.header_banner_container .header_banner_flag {
-  display: block;
-  padding: 6px 0;
-  height: 50px;
-  font-size: 13px;
-  box-sizing: border-box;
-}
-
-@media screen and (min-width: 544px) {
-  .header_banner_container .header_banner_flag {
-    height: 30px;
-  }
-}
-
-.header_banner_container .header_banner_flag:before {
-  background-image: url(/us_flag_small.png);
-  background-size: 20px 12px;
-  content: "";
-  display: inline-block;
-  height: 12px;
-  margin-right: 10px;
-  width: 20px;
-}
-
-.header_banner_flag_img {
-  background-size: 20px 12px;
-  content: "";
-  display: inline-block;
-  height: 12px;
-  margin-right: 10px;
-  width: 20px;
-}
-
-.header_banner_container .header_banner_inner {
-  display: block;
-  line-height: 1.5;
-  margin: 0 auto;
-  max-width: 1400px;
-  font-size: 12px;
-}
-
-.header_banner_container .header_banner_accordion {
-  border: 0;
-  color: #aebfd4;
-  cursor: pointer;
-  font-size: 13px;
-  outline: none;
-  text-align: left;
-  -webkit-transition: all 0.4s ease-out;
-  transition: all 0.4s ease-out;
-  margin: 0 4px 0 10px;
-  display: inline-block;
-}
-
-.header_banner_container .header_banner_accordion:focus-visible {
-  outline: 5px auto -webkit-focus-ring-color;
-}
-
-@media screen and (min-width: 367px) {
-  .header_banner_container .header_banner_accordion {
-    margin: 0 4px 0 0;
-  }
-}
-
-@media screen and (min-width: 518px) {
-  .header_banner_container .header_banner_accordion {
-    margin: 0 4px 0 10px;
-  }
-}
-
-.header_banner_container .header_banner_accordion svg {
-  display: inline-block;
-  position: relative;
-  -webkit-transition: all 0.4s ease-out;
-  transition: all 0.4s ease-out;
-  height: 18px;
-  width: 18px;
-  vertical-align: middle;
-}
-
-.header_banner_container .header_banner_accordion svg .expand-more {
-  fill: #aebfd4;
-}
-
-.header_banner_container .header_banner_panel {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin: 0 auto;
-  max-height: 0;
-  max-width: 1400px;
-  overflow: hidden;
-  -webkit-transition: all 0.2s ease-out;
-  transition: all 0.2s ease-out;
-}
-
-@media screen and (min-width: 768px) {
-  .header_banner_container .header_banner_panel {
-    -webkit-box-orient: horizontal;
-    -webkit-box-direction: normal;
-    -ms-flex-direction: row;
-    flex-direction: row;
-  }
-}
-
-.header_banner_container .header_banner_panel_item {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  width: 100%;
-  height: 100%;
-}
-
-.header_banner_container .header_banner_panel_item:last-child {
-  margin-top: 20px;
-}
-
-@media screen and (min-width: 768px) {
-  .header_banner_container .header_banner_panel_item {
-    width: 50%;
-    margin-right: 50px;
-  }
-
-  .header_banner_container .header_banner_panel_item:last-child {
-    margin-top: 0;
-  }
-}
-
-.header_banner_container .header_banner_content {
-  font-size: 14px;
-  line-height: 26px;
-  max-width: none;
-  width: 100%;
-  margin-bottom: 10px;
-  letter-spacing: 0.5px;
-}
-
-.header_banner_container .header_banner_content .banner-contentLeft-text,
-.header_banner_container .header_banner_content .banner-contentRight-text {
-  margin-bottom: 0;
-  font-size: 18px;
-}
-
-.header_banner_container .header_banner_dotgov:before {
-  background-image: url(/icon-dot-gov.svg);
-  background-size: 50px;
-  content: "";
-  display: inline-block;
-  height: 50px;
-  margin-right: 10px;
-  width: 50px;
-}
-
-.header_banner_container .header_banner_https:before {
-  background-image: url(/icon-https.svg);
-  background-size: 50px;
-  content: "";
-  display: inline-block;
-  height: 50px;
-  margin-right: 10px;
-  width: 50px;
-}
-
-.header_banner_container .header_banner_icon_lock {
-  display: inline-block;
-  height: 15px;
-  position: relative;
-  width: 15px;
-  margin: 0 8px;
-}
-
-.header_banner_container .header_banner_icon_lock svg {
-  height: 15px;
-  width: 15px;
-  fill: black;
-}
-
-body {
-  -webkit-transition: padding-top 200ms ease-out;
-  transition: padding-top 200ms ease-out;
-}
-
-.expand-more-container.active {
-  display: inline-block;
-  -webkit-transform: rotate(180deg);
-  transform: rotate(180deg);
-  vertical-align: text-top;
-}
-
-.header_banner_container {
-  background-color: #15263b;
-  color: #fff;
-}
-.icon_lock {
-  fill: #fff;
-}
-.header_banner_container .header_banner_content .banner-contentLeft-text,
-.header_banner_container .header_banner_content .banner-contentRight-text {
-  color: #fff;
-}

package/lib/composite/site-wrapper/index.jsx

@@ -1,52 +0,0 @@
-import USABanner from "../header/usa-banner/USABanner";
-import Header from "../header";
-import Footer from "../footer";
-
-function SiteWrapper({
-  children,
-  headerLinks,
-  usaBanner = true,
-  msgBanner: MsgBanner = false,
-  title = "US Army Corps of Engineers",
-  subtitle = "",
-  missionText = "",
-  aboutText = "",
-  facebookUrl = "",
-  twitterUrl = "",
-  youtubeUrl = "",
-  flickrUrl = "",
-  usaceLinks = [],
-  externalLinks = [],
-  armyLogo = true,
-  usaceLogo = true,
-  rsgisLogo = false,
-  cwbiLogo = false,
-}) {
-  return (
-    <div className="grid min-h-[100vh] grid-rows-1fr-auto">
-      <div>
-        {usaBanner && <USABanner />}
-        {MsgBanner && <MsgBanner />}
-        <Header links={headerLinks} title={title} subtitle={subtitle} />
-        {children}
-      </div>
-      <Footer
-        missionText={missionText}
-        aboutText={aboutText}
-        facebookUrl={facebookUrl}
-        twitterUrl={twitterUrl}
-        youtubeUrl={youtubeUrl}
-        flickrUrl={flickrUrl}
-        usaceLinks={usaceLinks}
-        externalLinks={externalLinks}
-        armyLogo={armyLogo}
-        usaceLogo={usaceLogo}
-        rsgisLogo={rsgisLogo}
-        cwbiLogo={cwbiLogo}
-      />
-    </div>
-  );
-}
-
-export default SiteWrapper;
-export { SiteWrapper };

package/lib/index.jsx

@@ -1,19 +0,0 @@
-// layout components
-export { Container } from "./components/layout/container";
-export { UsaceBox } from "./components/layout/usace-box";
-
-// display components
-export * from "./components/display/text";
-export * from "./components/display/headings";
-
-// composite components
-export { Header } from "./composite/header";
-export { Footer } from "./composite/footer";
-export { USABanner } from "./composite/header/usa-banner/USABanner";
-export { SiteWrapper } from "./composite/site-wrapper";
-
-// standard components
-export * from "./components/button";
-export { Hero } from "./components/hero";
-export { Breadcrumbs, BreadcrumbItem } from "./components/breadcrumbs";
-export * from "./components/table";

package/postcss.config.js

@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}

package/public/Magnifying_glass_icon.svg

@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="490" height="490">
-<path fill="none" stroke="#000" stroke-width="36" stroke-linecap="round"
-d="m280,278a153,153 0 1,0-2,2l170,170m-91-117 110,110-26,26-110-110"/>
-</svg> 

package/public/armystar-logo-rb.svg

@@ -1,4 +0,0 @@
-<svg width="73" height="90" viewBox="0 0 73 90" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.4603 78.0566H8.9683V87.1841C8.9683 88.6848 7.91987 89.5893 6.37807 89.5893H3.2328C1.67044 89.5893 0.642578 88.6848 0.642578 87.1841V78.0566H3.19169V86.8346C3.19169 87.0402 3.35615 87.2252 3.58228 87.2252H6.09027C6.29584 87.2252 6.48086 87.0607 6.48086 86.8346V78.0566H6.4603ZM9.99616 87.0402H12.5042V89.5893H9.99616V87.0402ZM13.5526 80.174C13.5526 78.9612 14.4365 78.0566 15.8139 78.0566H19.4525C20.8299 78.0566 21.7138 78.9612 21.7138 80.174V81.8597H19.2675V80.6674C19.2675 80.4618 19.1031 80.2768 18.8769 80.2768H16.3895C16.1634 80.2768 15.9989 80.4413 15.9989 80.6674V81.7364C15.9989 81.9009 16.0811 82.0653 16.3484 82.1475L20.1104 83.2576C21.3849 83.6277 21.7138 84.2033 21.7138 85.5395V87.4719C21.7138 88.6642 20.8299 89.5893 19.4731 89.5893H15.7728C14.416 89.5893 13.532 88.6642 13.532 87.4719V85.6012H15.9578V86.9785C15.9578 87.1841 16.1222 87.3691 16.3484 87.3691H18.8564C19.0825 87.3691 19.247 87.2047 19.247 86.9785V85.7862C19.247 85.6217 19.1236 85.4573 18.8975 85.3956L15.1355 84.2855C13.8609 83.9155 13.532 83.3399 13.532 82.0036L13.5526 80.174ZM22.7417 87.0402H25.2497V89.5893H22.7417V87.0402ZM35.7545 87.6569H31.7047L31.1702 89.5893H28.5594L32.0131 78.0566H35.6517L38.9614 89.5893H36.3095L35.7545 87.6569ZM35.1378 85.4367L33.7399 80.3179L32.3214 85.4367H35.1378ZM47.5339 84.82L46.9171 85.3339L48.9523 89.5893H46.1565L44.3475 85.6423H42.6823V89.5893H40.1332V78.0566H45.9715C47.4105 78.0566 48.4178 78.9406 48.4178 80.2563V82.5176C48.4384 83.6688 48.315 84.1622 47.5339 84.82ZM45.9098 83.0521V80.7702C45.9098 80.5646 45.7454 80.3796 45.5192 80.3796H42.7029V83.4221H45.5192C45.7454 83.4221 45.9098 83.2576 45.9098 83.0521ZM57.5453 78.0566H60.8139V89.5893H58.3881V82.3942L55.9007 89.5893H55.1812L52.6937 82.3942V89.5893H50.3502V78.0566H53.6188L55.5923 84.3061L57.5453 78.0566ZM72.1204 78.0566L68.2351 85.1695V89.5687H65.686V85.19L61.9034 78.0566H64.8637L67.0633 82.5176L69.2424 78.0566H72.1204Z" fill="white"/>
-<path d="M71.0913 25.6761H44.5312L36.3289 0.411133L28.1265 25.6761H1.56641L23.0488 41.2791L14.8464 66.5441L36.3289 50.9411L57.8113 66.5441L49.6089 41.2791L71.0913 25.6761ZM36.3289 43.1704L26.7697 50.1188L30.4289 38.8739L20.8697 31.9255H32.6902L36.3494 20.6807L40.0086 31.9255H51.8291L42.2699 38.8739L45.9291 50.1188L36.3289 43.1704Z" fill="#FFCC01"/>
-</svg>

package/public/icon-dot-gov.svg

@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><title>icon-dot-gov</title><path fill="#2378C3" fill-rule="evenodd" d="M32 0c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32C14.327 64 0 49.673 0 32 0 14.327 14.327 0 32 0zm0 1.208C14.994 1.208 1.208 14.994 1.208 32S14.994 62.792 32 62.792 62.792 49.006 62.792 32 49.006 1.208 32 1.208zm10.59 38.858a.857.857 0 0 1 .882.822v1.642H18.886v-1.642a.857.857 0 0 1 .882-.822H42.59zM25.443 27.774v9.829h1.642v-9.83h3.273v9.83H32v-9.83h3.272v9.83h1.643v-9.83h3.272v9.83h.76a.857.857 0 0 1 .882.821v.821h-21.3v-.809a.857.857 0 0 1 .88-.82h.762v-9.842h3.272zm5.736-8.188l12.293 4.915v1.642h-1.63a.857.857 0 0 1-.882.822H21.41a.857.857 0 0 1-.882-.822h-1.642v-1.642l12.293-4.915z"/></svg>

package/public/icon-https.svg

@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><title>icon-https</title><path fill="#719F2A" fill-rule="evenodd" d="M32 0c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32C14.327 64 0 49.673 0 32 0 14.327 14.327 0 32 0zm0 1.208C14.994 1.208 1.208 14.994 1.208 32S14.994 62.792 32 62.792 62.792 49.006 62.792 32 49.006 1.208 32 1.208zm0 18.886a7.245 7.245 0 0 1 7.245 7.245v3.103h.52c.86 0 1.557.698 1.557 1.558v9.322c0 .86-.697 1.558-1.557 1.558h-15.53c-.86 0-1.557-.697-1.557-1.558V32c0-.86.697-1.558 1.557-1.558h.52V27.34A7.245 7.245 0 0 1 32 20.094zm0 3.103a4.142 4.142 0 0 0-4.142 4.142v3.103h8.284V27.34A4.142 4.142 0 0 0 32 23.197z"/></svg>

package/public/usace-logo-color.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105.52 80.94"><defs><style>.cls-1{fill:#DE1E2E;}.cls-2{fill:#fff;}</style></defs><title>usace-logo</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><rect class="cls-1" width="105.52" height="80.94" rx="10.67" ry="10.67"/><path class="cls-2" d="M95.07,74.83H11A4.9,4.9,0,0,1,6.1,69.94V11A4.9,4.9,0,0,1,11,6.1H95.07A4.9,4.9,0,0,1,100,11v59A4.89,4.89,0,0,1,95.07,74.83ZM11,8.1A2.9,2.9,0,0,0,8.1,11v59A2.9,2.9,0,0,0,11,72.83H95.07A2.9,2.9,0,0,0,98,69.94V11A2.9,2.9,0,0,0,95.07,8.1Z"/><path class="cls-2" d="M84.5,52V26.42l4.12-4.12V16.42H83.69v4.33L80,20.68V16.42c0-.05-4.53,0-4.53,0v4.33H71.81V16.42c0-.06-4.87,0-4.87,0V22.3L71,26.42s.06,12.83.06,12.7-10.92,0-10.94,0,0-5.07,0-5.07l2.77-2.77V24.06c0-.14-4.12.06-4.39,0-.09,0,0,4.25,0,4.25H55.06V24.12H50.6a40.46,40.46,0,0,0,.07,4.12H46.82V24.12H42.49c-.13,0,0,7,0,7l3.11,3.11.07,4.86h-11V26.42l3.92-3.92V16.42H33.71v4.33l-3.78-.07V16.42H25.68s0,4.34,0,4.33-3.45-.07-3.78-.07V16.42s-4.93-.06-4.93,0v6.22l3.78,3.71V52.83s-3.92,3.85-3.92,4,.07,6.42.07,6.42H89V56.48ZM29.19,56.41h-3V45.74h3Zm.07-17.29h-3V28.45h3ZM41.08,53.23h-3V45.67h3ZM60.8,60.66H45.74V50.06s2.89-7.51,7.16-7.57l.13,0,.14-.15.17.17c4.65.38,7.46,7.53,7.46,7.53Zm7.29-7.36h-3V45.74h3Zm11.75,3.11h-3V45.74h3ZM80,37.9H77V27.23h3Z"/></g></g></svg>

package/src/App.jsx

@@ -1,38 +0,0 @@
-import { SiteWrapper } from "../lib";
-import { getNavHelper } from "internal-nav-helper";
-import { useConnect } from "redux-bundler-hook";
-
-const links = [{ id: "docs", label: "Documentation", link: "/docs" }];
-
-function App() {
-  const {
-    route: Route,
-    hash,
-    doUpdateHash,
-  } = useConnect("selectRoute", "selectHash", "doUpdateHash");
-
-  console.log("trying to render");
-  if (hash === "") {
-    console.log("redirecting to home");
-    window.setTimeout(() => {
-      doUpdateHash("/");
-    }, 100);
-    return null;
-  }
-
-  return (
-    <div onClick={getNavHelper((url) => doUpdateHash(url))}>
-      <SiteWrapper
-        headerLinks={links}
-        usaBanner={true}
-        subtitle="Groundwork React Components"
-        missionText="We strive to provide the best React components for the USACE."
-        aboutText="This is the about text for the footer."
-      >
-        <Route />
-      </SiteWrapper>
-    </div>
-  );
-}
-
-export default App;

package/src/app-bundles/index.js

@@ -1,4 +0,0 @@
-import { composeBundles, createUrlBundle } from "redux-bundler";
-import routeBundle from "./route-bundle";
-
-export default composeBundles(createUrlBundle(), routeBundle);

package/src/app-bundles/route-bundle.js

@@ -1,36 +0,0 @@
-import { createRouteBundle } from "redux-bundler";
-import Home from "../app-pages/home";
-import Docs from "../app-pages/documentation";
-import Navigation from "../app-pages/documentation/navigation";
-import Breadcrumbs from "../app-pages/documentation/navigation/breadcrumbs";
-import AppShell from "../app-pages/documentation/app-shell";
-import Layout from "../app-pages/documentation/layout";
-import SiteWrapperDocs from "../app-pages/documentation/app-shell/site-wrapper";
-import Types from "../app-pages/documentation/types";
-import LinkDocs from "../app-pages/documentation/types/link";
-import ContainerDocs from "../app-pages/documentation/layout/container";
-import USACEBoxDocs from "../app-pages/documentation/layout/usace-box";
-import ButtonsDocs from "../app-pages/documentation/buttons";
-
-export default createRouteBundle(
-  {
-    "/": Home,
-    "/docs": Docs,
-    "/docs/app-shell": AppShell,
-    "/docs/app-shell/site-wrapper": SiteWrapperDocs,
-    "/docs/layout": Layout,
-    "/docs/layout/container": ContainerDocs,
-    "/docs/layout/usace-box": USACEBoxDocs,
-    "/docs/navigation": Navigation,
-    "/docs/navigation/breadcrumbs": Breadcrumbs,
-    "/docs/buttons": ButtonsDocs,
-    "/docs/types": Types,
-    "/docs/types/link": LinkDocs,
-    "/about": "about",
-    "/contact": "contact",
-    "/404": () => "notFound",
-  },
-  {
-    routeInfoSelector: "selectHash",
-  }
-);

package/src/app-components/code-example.jsx

@@ -1,17 +0,0 @@
-import { Code } from "../../lib";
-import CopyButton from "./copy-button";
-
-// render a code block for the example
-function CodeExample({ code }) {
-  return (
-    <Code className="block relative p-4 px-2 whitespace-pre-wrap">
-      {code}
-      <div className="absolute top-2 right-2">
-        <CopyButton />
-      </div>
-    </Code>
-  );
-}
-
-export default CodeExample;
-export { CodeExample };

package/src/app-components/copy-button.jsx

@@ -1,32 +0,0 @@
-import { Button } from "../../lib";
-import { BsCopy } from "react-icons/bs";
-import { GoThumbsup } from "react-icons/go";
-import { useState } from "react";
-import clsx from "clsx";
-
-function CopyButton({ className, text }) {
-  const [copying, setCopying] = useState(false);
-  const handleCopy = () => {
-    navigator.clipboard.writeText(text);
-  };
-  const btnClass = clsx("", className);
-  return (
-    <Button
-      className={btnClass}
-      outline={!copying}
-      color={copying ? "green" : undefined}
-      onClick={() => {
-        handleCopy();
-        setCopying(true);
-        setTimeout(() => {
-          setCopying(false);
-        }, 1000);
-      }}
-    >
-      {copying ? <GoThumbsup /> : <BsCopy />}
-    </Button>
-  );
-}
-
-export default CopyButton;
-export { CopyButton };

package/src/app-components/props-table.jsx

@@ -1,43 +0,0 @@
-import {
-  Table,
-  TableBody,
-  TableRow,
-  TableHead,
-  TableHeader,
-  TableCell,
-  Code,
-} from "../../lib";
-
-function PropsTable({ propsList }) {
-  return (
-    <Table striped dense>
-      <TableHead>
-        <TableRow>
-          <TableHeader>Prop</TableHeader>
-          <TableHeader>Type</TableHeader>
-          <TableHeader>Default</TableHeader>
-          <TableHeader>Description</TableHeader>
-        </TableRow>
-      </TableHead>
-      <TableBody>
-        {propsList.map((prop) => (
-          <TableRow key={prop.name}>
-            <TableCell>
-              <Code>{prop.name}</Code>
-            </TableCell>
-            <TableCell>
-              <Code>{prop.type}</Code>
-            </TableCell>
-            <TableCell>
-              <Code>{prop.default}</Code>
-            </TableCell>
-            <TableCell className="text-wrap">{prop.desc}</TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  );
-}
-
-export default PropsTable;
-export { PropsTable };

package/src/app-components/sub-site-banner.jsx

@@ -1,15 +0,0 @@
-function SubSiteBanner({ title }) {
-  return (
-    <div className="bg-emerald-600 text-white text-sm px-4 py-[2px] text-wrap">
-      <span>
-        You are viewing the {title} site, click here to return to the national{" "}
-        <a className="underline" href="https://water.usace.army.mil">
-          Access to Water Site
-        </a>
-      </span>
-    </div>
-  );
-}
-
-export default SubSiteBanner;
-export { SubSiteBanner };

package/src/app-pages/documentation/_docs-page.jsx

@@ -1,31 +0,0 @@
-import { Breadcrumbs, BreadcrumbItem, Container } from "../../../lib";
-import { DocsSidebar } from "./_docs-sidebar";
-
-function DocsPage({ breadcrumbs = [], children }) {
-  return (
-    <div>
-      <Container fluid>
-        <Breadcrumbs>
-          {breadcrumbs.map((breadcrumb) => {
-            return (
-              <BreadcrumbItem
-                key={breadcrumb.href}
-                href={breadcrumb.href}
-                text={breadcrumb.text}
-              />
-            );
-          })}
-        </Breadcrumbs>
-        <div className="grid grid-cols-12 gap-6">
-          <div className="col-span-2">
-            <DocsSidebar />
-          </div>
-          <div className="col-span-10">{children}</div>
-        </div>
-      </Container>
-    </div>
-  );
-}
-
-export default DocsPage;
-export { DocsPage };

package/src/app-pages/documentation/_docs-sidebar.jsx

@@ -1,111 +0,0 @@
-import { useConnect } from "redux-bundler-hook";
-import { UsaceBox } from "../../../lib";
-import { VscChevronRight } from "react-icons/vsc";
-
-const sidebarLinks = [
-  {
-    title: "Getting Started",
-    href: "/docs",
-  },
-  {
-    title: "Application Shell",
-    href: "/docs/app-shell",
-    children: [
-      {
-        title: "Site Wrapper",
-        href: "/docs/app-shell/site-wrapper",
-      },
-    ],
-  },
-  {
-    title: "Layout",
-    href: "/docs/layout",
-    children: [
-      {
-        title: "Container",
-        href: "/docs/layout/container",
-      },
-      {
-        title: "UsaceBox",
-        href: "/docs/layout/usace-box",
-      },
-    ],
-  },
-  {
-    title: "Navigation",
-    href: "/docs/navigation",
-    children: [
-      {
-        title: "Breadcrumbs",
-        href: "/docs/navigation/breadcrumbs",
-      },
-    ],
-  },
-  {
-    title: "Buttons",
-    href: "/docs/buttons",
-    children: [],
-  },
-  {
-    title: "Types",
-    href: "/docs/types",
-    children: [
-      {
-        title: "Link",
-        href: "/docs/types/link",
-      },
-    ],
-  },
-];
-
-function DocsSidebar() {
-  const { hash } = useConnect("selectHash");
-  return (
-    <UsaceBox title="Contents">
-      {sidebarLinks.map((link) => {
-        return (
-          <div key={link.href}>
-            <a href={link.href}>
-              <div
-                className={`text-lg font-bold pl-1 py-1 flex justify-between items-center cursor-pointer hover:bg-gray-100 ${
-                  hash === link.href ? "bg-gray-50 rounded" : ""
-                }`}
-              >
-                {link.title}
-                <VscChevronRight
-                  size={18}
-                  aria-hidden="true"
-                  color="rgb(156 163 175)"
-                />
-              </div>
-            </a>
-            <ul>
-              {link.children &&
-                link.children.map((child) => {
-                  return (
-                    <a href={child.href} key={child.href}>
-                      <li
-                        className={`pl-3 py-1 flex justify-between items-center cursor-pointer hover:bg-gray-100 ${
-                          hash === child.href ? "bg-gray-50 rounded" : ""
-                        }`}
-                      >
-                        {child.title}
-                        <VscChevronRight
-                          size={18}
-                          aria-hidden="true"
-                          color="rgb(156 163 175)"
-                        />
-                      </li>
-                    </a>
-                  );
-                })}
-            </ul>
-          </div>
-        );
-      })}
-    </UsaceBox>
-  );
-}
-
-export default DocsSidebar;
-export { DocsSidebar };