@xyd-js/storybook 0.0.0-build

package/src/docs/themes/themes.stories.tsx

@@ -0,0 +1,269 @@
+import React, {useState} from 'react';
+import type {Meta} from '@storybook/react';
+import {MemoryRouter} from "react-router";
+
+import {
+    LayoutPrimary
+} from '@xyd-js/components/layouts';
+
+import {ReactContent} from "@xyd-js/components/content";
+
+const reactContent = new ReactContent()
+const getContentComponents = reactContent.components
+
+import {
+    Breadcrumbs,
+    NavLinks
+} from "@xyd-js/components/writer"
+import {
+    Nav,
+    Toc,
+    SubNav,
+    UISidebar
+} from "@xyd-js/ui"
+
+import {LiveSessionPlatformLogo} from "./logo";
+import Content from "../../__fixtures__/hello-world.mdx";
+
+export default {
+    title: 'Themes/Default',
+    decorators: [
+        (Story) => <MemoryRouter>
+            <Story/>
+        </MemoryRouter>
+    ]
+} as Meta;
+
+export const Default = () => {
+    return <LayoutPrimary
+        header={<$DemoNavbar/>}
+        subheader={<$DemoSubNav/>}
+        aside={<$DemoSidebar/>}
+        content={<$DemoContent/>}
+        contentNav={<$DemoTOC/>}
+    />
+}
+
+function $DemoNavbar() {
+    return <>
+        <Nav
+            onChange={() => {}}
+            value="api-reference"
+            logo={<LiveSessionPlatformLogo/>}
+            kind="middle"
+        >
+            <Nav.Item value="docs" href="/docs">
+                Docs
+            </Nav.Item>
+            <Nav.Item value="api-reference" href="/api">
+                API Reference
+            </Nav.Item>
+            <Nav.Item value="graphql" href="/graphql">
+                GraphQL
+            </Nav.Item>
+        </Nav>
+    </>
+}
+
+function $DemoSubNav() {
+    return <SubNav onChange={() => {}} title="Apps" value="build">
+        <SubNav.Item value="build" href="/build">
+            Build
+        </SubNav.Item>
+        <SubNav.Item value="design" href="/design">
+            Design
+        </SubNav.Item>
+        <SubNav.Item value="launch" href="/launch">
+            Launch
+        </SubNav.Item>
+    </SubNav>
+}
+
+function $DemoSidebar() {
+    const [isOpen, setIsOpen] = useState(false)
+
+    function onClick() {
+        setIsOpen(!isOpen)
+    }
+
+    const items = new Array(40).fill(0).map((_, i) => <UISidebar.Item key={i} href="#">
+            {`Item ${i}`}
+        </UISidebar.Item>
+    )
+
+    return <UISidebar footerItems={<$DemoSidebarFooter/>}>
+        <UISidebar.ItemHeader>
+            GET STARTED
+        </UISidebar.ItemHeader>
+        <UISidebar.Item
+            button
+            active={isOpen}
+            activeTheme="secondary"
+            onClick={onClick}
+        >
+            Root nested
+            <UISidebar.SubTree isOpen={isOpen}>
+                <UISidebar.Item href="#">
+                    Nested A
+                </UISidebar.Item>
+                <UISidebar.Item href="#">
+                    Nested B
+                </UISidebar.Item>
+                <UISidebar.Item button active>
+                    Nested root C
+                    <UISidebar.SubTree>
+                        <UISidebar.Item href="#">
+                            Nested C.A
+                        </UISidebar.Item>
+                        <UISidebar.Item href="#">
+                            Nested C.B
+                        </UISidebar.Item>
+                    </UISidebar.SubTree>
+                </UISidebar.Item>
+            </UISidebar.SubTree>
+        </UISidebar.Item>
+
+        <UISidebar.ItemHeader>
+            APIS
+        </UISidebar.ItemHeader>
+        <UISidebar.Item href="#">
+            Authentication
+        </UISidebar.Item>
+
+        <UISidebar.Item href="#">
+            Making requests
+        </UISidebar.Item>
+
+        {items}
+    </UISidebar>
+}
+
+function $DemoSidebarFooter() {
+    return <>
+        <UISidebar.FooterItem
+            href="#"
+            icon={
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                >
+                    <path
+                        fillRule="evenodd"
+                        d="M14.447 7.106a1 1 0 0 1 .447 1.341l-4 8a1 1 0 1 1-1.788-.894l4-8a1 1 0 0 1 1.341-.447ZM6.6 7.2a1 1 0 0 1 .2 1.4L4.25 12l2.55 3.4a1 1 0 0 1-1.6 1.2l-3-4a1 1 0 0 1 0-1.2l3-4a1 1 0 0 1 1.4-.2Zm10.8 0a1 1 0 0 1 1.4.2l3 4a1 1 0 0 1 0 1.2l-3 4a1 1 0 0 1-1.6-1.2l2.55-3.4-2.55-3.4a1 1 0 0 1 .2-1.4Z"
+                        clipRule="evenodd"
+                    />
+                </svg>
+            }
+        >
+            Cookbook
+        </UISidebar.FooterItem>
+        <UISidebar.FooterItem
+            href="#"
+            icon={
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="currentColor"
+                    viewBox="0 0 24 24"
+                >
+                    <path
+                        fillRule="evenodd"
+                        d="M10.5 8.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM12 5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7ZM3 9.5a1 1 0 1 1 2 0 1 1 0 0 1-2 0Zm1-3a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm16 2a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm-3 1a3 3 0 1 1 6 0 3 3 0 0 1-6 0ZM8 18c0-.974.438-1.684 1.142-2.185C9.876 15.293 10.911 15 12 15c1.09 0 2.124.293 2.858.815.704.5 1.142 1.21 1.142 2.185a1 1 0 1 0 2 0c0-1.692-.812-2.982-1.983-3.815C14.876 13.373 13.411 13 12 13c-1.41 0-2.876.373-4.017 1.185C6.812 15.018 6 16.308 6 18a1 1 0 1 0 2 0Zm-3.016-3.675a1 1 0 0 1-.809 1.16C2.79 15.732 2 16.486 2 17.5a1 1 0 1 1-2 0c0-2.41 1.978-3.655 3.825-3.985a1 1 0 0 1 1.16.81Zm14.84 1.16a1 1 0 1 1 .351-1.97C22.022 13.845 24 15.09 24 17.5a1 1 0 1 1-2 0c0-1.014-.79-1.768-2.175-2.015Z"
+                        clipRule="evenodd"
+                    />
+                </svg>
+            }
+        >
+            Community
+        </UISidebar.FooterItem>
+        <UISidebar.FooterItem
+            href="#"
+            icon={
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+                     fill="none">
+                    <path fill-rule="evenodd" clip-rule="evenodd"
+                          d="M3.78163 3.28449C3.8768 2.96725 4.16879 2.75 4.5 2.75H19.5C19.8312 2.75 20.1232 2.96725 20.2184 3.28449L21.7184 8.28449C21.7393 8.3544 21.75 8.42701 21.75 8.5C21.75 10.5711 20.0711 12.25 18 12.25C16.7733 12.25 15.6842 11.661 15 10.7504C14.3158 11.661 13.2267 12.25 12 12.25C10.7733 12.25 9.68417 11.661 9 10.7504C8.31583 11.661 7.2267 12.25 6 12.25C3.92893 12.25 2.25 10.5711 2.25 8.5C2.25 8.42701 2.26066 8.3544 2.28163 8.28449L3.78163 3.28449ZM9.75 8.5C9.75 9.74264 10.7574 10.75 12 10.75C13.2426 10.75 14.25 9.74264 14.25 8.5C14.25 8.08579 14.5858 7.75 15 7.75C15.4142 7.75 15.75 8.08579 15.75 8.5C15.75 9.74264 16.7574 10.75 18 10.75C19.2083 10.75 20.1942 9.79754 20.2477 8.60244L18.942 4.25H5.05802L3.75229 8.60244C3.80584 9.79753 4.79169 10.75 6 10.75C7.24264 10.75 8.25 9.74264 8.25 8.5C8.25 8.08579 8.58579 7.75 9 7.75C9.41421 7.75 9.75 8.08579 9.75 8.5Z"
+                    />
+                    <path fill-rule="evenodd" clip-rule="evenodd"
+                          d="M4 10.25C4.41421 10.25 4.75 10.5858 4.75 11V19.75H6.5C6.91421 19.75 7.25 20.0858 7.25 20.5C7.25 20.9142 6.91421 21.25 6.5 21.25H4C3.58579 21.25 3.25 20.9142 3.25 20.5V11C3.25 10.5858 3.58579 10.25 4 10.25ZM20 10.25C20.4142 10.25 20.75 10.5858 20.75 11V20.5C20.75 20.9142 20.4142 21.25 20 21.25H10.5C10.0858 21.25 9.75 20.9142 9.75 20.5C9.75 20.0858 10.0858 19.75 10.5 19.75H19.25V11C19.25 10.5858 19.5858 10.25 20 10.25Z"
+                    />
+                    <path
+                        d="M12.003 19C11.31 18.9996 10.6384 18.7598 10.102 18.3213C9.56564 17.8829 9.19745 17.2726 9.05983 16.594C8.92222 15.9154 9.02364 15.2101 9.34693 14.5976C9.67022 13.9852 10.1955 13.5032 10.8337 13.2333C11.5673 12.9262 12.393 12.9221 13.1296 13.2222C13.8661 13.5222 14.4536 14.1018 14.7631 14.8338C15.0727 15.5659 15.0791 16.3907 14.7808 17.1274C14.4827 17.8642 13.9042 18.4527 13.1724 18.7641C12.8025 18.9205 12.4047 19.0007 12.003 19ZM11.1458 14.7215C11.1124 14.7215 11.0803 14.7348 11.0567 14.7584C11.0331 14.782 11.0198 14.8141 11.0198 14.8475V17.1923C11.0198 17.2258 11.0331 17.2578 11.0567 17.2814C11.0803 17.305 11.1124 17.3183 11.1458 17.3183C11.1671 17.3183 11.188 17.3128 11.2065 17.3024L13.3399 16.13C13.3597 16.1192 13.3761 16.1032 13.3876 16.0838C13.3991 16.0644 13.4052 16.0423 13.4052 16.0197C13.4052 15.9972 13.3991 15.9751 13.3876 15.9557C13.3761 15.9362 13.3597 15.9203 13.3399 15.9094L11.2063 14.7373C11.1879 14.727 11.1671 14.7215 11.1458 14.7215Z"
+                    />
+                </svg>
+            }
+        >
+            Marketplace
+        </UISidebar.FooterItem>
+        <UISidebar.FooterItem
+            href="#"
+            icon={
+                <svg
+                    viewBox="0 0 15 15"
+                    xmlns="http://www.w3.org/2000/svg"
+                >
+                    <path
+                        d="M7.28856 0.796908C7.42258 0.734364 7.57742 0.734364 7.71144 0.796908L13.7114 3.59691C13.8875 3.67906 14 3.85574 14 4.05V10.95C14 11.1443 13.8875 11.3209 13.7114 11.4031L7.71144 14.2031C7.57742 14.2656 7.42258 14.2656 7.28856 14.2031L1.28856 11.4031C1.11252 11.3209 1 11.1443 1 10.95V4.05C1 3.85574 1.11252 3.67906 1.28856 3.59691L7.28856 0.796908ZM2 4.80578L7 6.93078V12.9649L2 10.6316V4.80578ZM8 12.9649L13 10.6316V4.80578L8 6.93078V12.9649ZM7.5 6.05672L12.2719 4.02866L7.5 1.80176L2.72809 4.02866L7.5 6.05672Z"
+                        fill="currentColor"
+                        fillRule="evenodd"
+                        clipRule="evenodd"
+                    />
+                </svg>
+            }
+        >
+            SDKs
+        </UISidebar.FooterItem>
+    </>
+}
+
+
+function $DemoContent() {
+    return <>
+        <Breadcrumbs
+            items={[
+                {
+                    title: "APIs",
+                    href: "/apis"
+                },
+                {
+                    title: "GraphQL API",
+                    href: "/apis/graphql"
+                }
+            ]}
+        />
+
+        <div style={{
+            display: "flex",
+            flexDirection: "column",
+            gap: "24px"
+        }}>
+            <Content components={getContentComponents()}/>
+        </div>
+
+        <NavLinks
+            prev={{
+                title: "Prev",
+                href: "/prev"
+            }}
+            next={{
+                title: "Next",
+                href: "/next"
+            }}
+        />
+    </>
+}
+
+function $DemoTOC() {
+    return <Toc defaultValue="quickstart">
+        <Toc.Item value="quickstart">
+            Quickstart
+        </Toc.Item>
+        <Toc.Item value="api-features">
+            API Features
+        </Toc.Item>
+        <Toc.Item value="example-use-cases">
+            Example Use Cases
+        </Toc.Item>
+    </Toc>
+}
+
+

package/src/docs/ui/Nav.stories.tsx

@@ -0,0 +1,58 @@
+import React, {} from 'react';
+import type {Meta} from '@storybook/react';
+
+import {Nav} from '@xyd-js/ui';
+
+export default {
+    title: 'UI/Nav',
+} as Meta;
+
+const logo = <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={180}
+    viewBox="0 0 999 94"
+    fill="none"
+>
+    <g clipPath="url(#clip0_2_37)">
+        <path
+            d="M12.275 91.3459H0V12.5089L12.275 9.66888V91.3459ZM39.436 91.3459H27.158V35.6369L39.433 32.8029L39.436 91.3459ZM25.588 15.4919C25.5774 14.4791 25.7744 13.4748 26.1669 12.5411C26.5594 11.6074 27.139 10.764 27.87 10.0629C28.596 9.32127 29.4661 8.73621 30.4268 8.34374C31.3875 7.95127 32.4184 7.75971 33.456 7.78088C34.4688 7.77023 35.4731 7.96724 36.4068 8.35972C37.3405 8.7522 38.1839 9.33183 38.885 10.0629C39.616 10.764 40.1956 11.6074 40.5881 12.5411C40.9806 13.4748 41.1776 14.4791 41.167 15.4919C41.1883 16.5296 40.9968 17.5607 40.6043 18.5216C40.2119 19.4825 39.6267 20.3528 38.885 21.0789C38.1839 21.8099 37.3405 22.3896 36.4068 22.7821C35.4731 23.1745 34.4688 23.3715 33.456 23.3609C32.4224 23.3846 31.3958 23.1861 30.4455 22.7787C29.4953 22.3714 28.6436 21.7648 27.948 20.9999C27.1833 20.3042 26.5769 19.4524 26.1698 18.5022C25.7626 17.552 25.5642 16.5254 25.588 15.4919ZM69.745 91.3459L47.288 35.5459L59.044 32.7979L76.826 77.0269L94.766 32.8049L106.45 35.5529L83.908 91.3529L69.745 91.3459ZM168.665 67.4249H122.714C122.848 69.4592 123.442 71.4366 124.45 73.2083C125.459 74.9801 126.856 76.5001 128.537 77.6539C132.14 80.2884 136.506 81.6702 140.969 81.5879C148.418 81.5879 153.978 79.2799 157.65 74.6639L164.731 82.3749C158.436 88.9849 150.201 92.2899 140.025 92.2899C136.129 92.3923 132.253 91.7063 128.63 90.2729C125.006 88.8395 121.709 86.6884 118.938 83.9489C113.271 78.3882 110.438 71.0442 110.438 61.9169C110.438 52.9989 113.323 45.7595 119.093 40.1989C121.851 37.4854 125.123 35.35 128.717 33.9177C132.311 32.4854 136.155 31.7851 140.023 31.8579C148.206 31.8579 155.025 34.3246 160.481 39.2579C165.937 44.1912 168.665 50.7485 168.664 58.9299L168.665 67.4249ZM156.39 57.6679C156.39 52.9466 154.895 49.2219 151.905 46.4939C148.719 43.694 144.577 42.2286 140.339 42.4019C135.85 42.3223 131.476 43.8267 127.986 46.6509C126.303 47.9436 124.949 49.6147 124.033 51.5286C123.117 53.4426 122.665 55.5456 122.714 57.6669L156.39 57.6679ZM199.445 92.2899C190.189 92.3543 181.192 89.2437 173.952 83.4769L179.932 73.8769C186.646 79.0175 193.255 81.5879 199.76 81.5879C202.099 81.7094 204.408 81.014 206.291 79.6209C207.058 79.0443 207.679 78.295 208.103 77.4338C208.526 76.5726 208.741 75.6236 208.73 74.6639C208.73 71.7266 204.848 69.1035 197.085 66.7949C196.875 66.6902 196.639 66.5852 196.377 66.4799C196.203 66.3985 196.017 66.3455 195.826 66.3229C183.657 63.0702 177.572 57.5622 177.572 49.7989C177.489 47.2834 178.011 44.7848 179.092 42.5123C180.174 40.2397 181.784 38.2593 183.788 36.7369C187.932 33.4842 193.414 31.8579 200.233 31.8579C207.085 31.8993 213.769 33.9812 219.433 37.8379L214.869 46.9659C210.271 43.8561 204.84 42.2103 199.29 42.2449C192.681 42.2449 189.376 44.3432 189.376 48.5399C189.317 49.3014 189.47 50.0644 189.817 50.7448C190.164 51.4252 190.692 51.9966 191.343 52.3959C193.404 53.4551 195.602 54.223 197.874 54.6779C201.823 55.7188 205.711 56.9798 209.519 58.4549C211.434 59.299 213.276 60.299 215.027 61.4449C219.014 64.1729 221.007 68.3172 221.007 73.8779C221.08 76.4103 220.572 78.9259 219.522 81.2314C218.471 83.537 216.907 85.5712 214.948 87.1779C210.907 90.5859 205.74 92.2899 199.445 92.2899ZM286.405 67.4249H240.458C240.592 69.4592 241.186 71.4366 242.194 73.2083C243.203 74.98 244.6 76.5 246.281 77.6539C249.884 80.2884 254.25 81.6702 258.713 81.5879C266.162 81.5879 271.722 79.2799 275.394 74.6639L282.475 82.3749C276.18 88.9849 267.945 92.2899 257.769 92.2899C253.873 92.3923 249.997 91.7063 246.374 90.2729C242.75 88.8395 239.453 86.6884 236.682 83.9489C231.015 78.3882 228.182 71.0442 228.182 61.9169C228.182 52.9989 231.067 45.7595 236.837 40.1989C239.595 37.4854 242.867 35.35 246.461 33.9177C250.055 32.4854 253.899 31.7851 257.767 31.8579C265.95 31.8579 272.769 34.3246 278.225 39.2579C283.681 44.1912 286.409 50.7485 286.408 58.9299L286.405 67.4249ZM274.13 57.6679C274.13 52.9466 272.635 49.2219 269.645 46.4939C266.459 43.694 262.317 42.2286 258.079 42.4019C253.59 42.3223 249.216 43.8267 245.726 46.6509C244.043 47.9436 242.689 49.6147 241.773 51.5286C240.857 53.4426 240.405 55.5456 240.454 57.6669L274.13 57.6679ZM317.185 92.2899C307.929 92.3543 298.932 89.2437 291.692 83.4769L297.672 73.8769C304.386 79.0175 310.995 81.5879 317.5 81.5879C319.839 81.7094 322.148 81.014 324.031 79.6209C324.798 79.0443 325.419 78.295 325.843 77.4338C326.266 76.5726 326.481 75.6236 326.47 74.6639C326.47 71.7266 322.588 69.1035 314.825 66.7949C314.615 66.6902 314.379 66.5852 314.117 66.4799C313.943 66.3985 313.757 66.3455 313.566 66.3229C301.397 63.0702 295.312 57.5622 295.312 49.7989C295.229 47.2834 295.751 44.7848 296.832 42.5123C297.914 40.2397 299.524 38.2593 301.528 36.7369C305.672 33.4842 311.154 31.8579 317.973 31.8579C324.825 31.8993 331.509 33.9812 337.173 37.8379L332.609 46.9659C328.011 43.8561 322.58 42.2103 317.03 42.2449C310.421 42.2449 307.116 44.3432 307.116 48.5399C307.057 49.3014 307.21 50.0644 307.557 50.7448C307.904 51.4252 308.432 51.9966 309.083 52.3959C311.144 53.4551 313.342 54.223 315.614 54.6779C319.563 55.7188 323.45 56.9798 327.258 58.4549C329.173 59.299 331.015 60.299 332.766 61.4449C336.753 64.1729 338.746 68.3172 338.746 73.8779C338.819 76.4103 338.311 78.9259 337.261 81.2314C336.211 83.537 334.646 85.5712 332.687 87.1779C328.648 90.5859 323.481 92.2899 317.186 92.2899H317.185ZM369.84 92.2899C360.585 92.3542 351.587 89.2437 344.347 83.4769L350.327 73.8769C357.041 79.0175 363.65 81.5879 370.155 81.5879C372.494 81.7094 374.803 81.014 376.686 79.6209C377.453 79.0443 378.074 78.295 378.498 77.4338C378.921 76.5726 379.136 75.6236 379.125 74.6639C379.125 71.7266 375.243 69.1035 367.48 66.7949C367.27 66.6902 367.034 66.5852 366.772 66.4799C366.598 66.3985 366.412 66.3455 366.221 66.3229C354.052 63.0702 347.967 57.5622 347.967 49.7989C347.884 47.2834 348.406 44.7848 349.487 42.5123C350.569 40.2397 352.179 38.2593 354.183 36.7369C358.327 33.4842 363.809 31.8579 370.628 31.8579C377.48 31.8993 384.164 33.9812 389.828 37.8379L385.258 46.9669C380.66 43.8571 375.229 42.2113 369.679 42.2459C363.07 42.2459 359.765 44.3442 359.765 48.5409C359.706 49.3024 359.859 50.0654 360.206 50.7458C360.553 51.4262 361.081 51.9976 361.732 52.3969C363.793 53.4561 365.991 54.2241 368.263 54.6789C372.212 55.7198 376.1 56.9808 379.908 58.4559C381.823 59.3 383.665 60.3 385.416 61.4459C389.403 64.1739 391.396 68.3182 391.396 73.8789C391.469 76.4113 390.961 78.9269 389.911 81.2324C388.861 83.5379 387.296 85.5722 385.337 87.1789C381.301 90.5862 376.136 92.2899 369.841 92.2899H369.84ZM414.626 91.3459H402.353V35.7709L414.627 32.8029L414.626 91.3459ZM400.778 15.4919C400.767 14.4791 400.964 13.4748 401.357 12.5411C401.749 11.6074 402.329 10.764 403.06 10.0629C403.786 9.32127 404.656 8.73621 405.617 8.34374C406.578 7.95127 407.608 7.75971 408.646 7.78088C409.659 7.77029 410.663 7.96732 411.597 8.3598C412.53 8.75227 413.374 9.33188 414.075 10.0629C414.806 10.764 415.386 11.6074 415.778 12.5411C416.171 13.4748 416.368 14.4791 416.357 15.4919C416.378 16.5296 416.187 17.5607 415.794 18.5216C415.402 19.4825 414.817 20.3528 414.075 21.0789C413.374 21.8099 412.53 22.3895 411.597 22.782C410.663 23.1744 409.659 23.3715 408.646 23.3609C407.612 23.3846 406.586 23.1861 405.635 22.7787C404.685 22.3714 403.834 21.7648 403.138 20.9999C402.374 20.3041 401.767 19.4523 401.36 18.5021C400.953 17.5518 400.755 16.5253 400.779 15.4919H400.778ZM456.422 81.2739C458.888 81.3474 461.343 80.91 463.632 79.9891C465.92 79.0682 467.994 77.6838 469.722 75.9229C473.237 72.3555 474.994 67.7392 474.994 62.0739C474.994 56.4085 473.236 51.7929 469.721 48.2269C467.993 46.4659 465.919 45.0815 463.631 44.1606C461.342 43.2398 458.887 42.8023 456.421 42.8759C453.966 42.7979 451.523 43.2336 449.246 44.155C446.97 45.0765 444.911 46.4634 443.202 48.2269C439.74 51.7942 438.009 56.4105 438.009 62.0759C438.009 67.7412 439.74 72.3052 443.202 75.7679C444.888 77.5725 446.939 78.997 449.219 79.9464C451.499 80.8959 453.955 81.3484 456.423 81.2739H456.422ZM456.422 92.2899C447.609 92.2899 440.266 89.3785 434.391 83.5559C431.525 80.773 429.263 77.4291 427.747 73.733C426.231 70.0369 425.493 66.0679 425.579 62.0739C425.493 58.0799 426.231 54.1111 427.747 50.4152C429.264 46.7192 431.526 43.3756 434.392 40.5929C440.267 34.7702 447.611 31.8589 456.423 31.8589C465.235 31.8589 472.579 34.7702 478.454 40.5929C481.32 43.3757 483.582 46.7194 485.098 50.4153C486.614 54.1112 487.352 58.08 487.266 62.0739C487.297 66.0481 486.534 69.9885 485.02 73.6635C483.507 77.3385 481.275 80.6739 478.454 83.4739C472.579 89.3512 465.236 92.2899 456.423 92.2899H456.422ZM510.493 91.3459H498.22V35.6269L510.494 32.8029V43.3469C512.429 39.839 515.287 36.9273 518.758 34.9269C522.164 32.9102 526.052 31.85 530.01 31.8579C536.829 31.8579 542.232 33.9039 546.219 37.9959C550.206 42.0879 552.199 47.9105 552.199 55.4639V91.3449H539.764V59.2449C539.764 48.4389 535.305 43.0359 526.388 43.0359C524.308 42.9771 522.236 43.329 520.292 44.0717C518.348 44.8143 516.569 45.9331 515.058 47.3639C512.015 50.2492 510.494 54.3159 510.494 59.5639L510.493 91.3459Z"
+            fill="#061631"
+        />
+        <path
+            d="M577.897 35.3336C574.402 35.3334 570.987 34.2971 568.082 32.3558C565.177 30.4146 562.912 27.6554 561.575 24.4273C560.238 21.1992 559.888 17.6471 560.57 14.2202C561.252 10.7932 562.934 7.64533 565.405 5.17456C568.718 1.86135 573.211 0 577.897 0C582.583 0 587.076 1.86135 590.39 5.17456C593.703 8.48778 595.564 12.9815 595.564 17.6671C595.564 22.3527 593.703 26.8463 590.39 30.1596C588.753 31.8052 586.806 33.1098 584.661 33.9979C582.517 34.886 580.218 35.34 577.897 35.3336ZM573.114 10.3266C572.848 10.3266 572.594 10.4319 572.406 10.6195C572.219 10.807 572.114 11.0613 572.114 11.3266V24.2556C572.114 24.5208 572.219 24.7751 572.406 24.9627C572.594 25.1502 572.848 25.2556 573.114 25.2556C573.282 25.2553 573.448 25.212 573.595 25.1296L585.347 18.6666C585.503 18.5802 585.634 18.4534 585.725 18.2993C585.816 18.1452 585.864 17.9695 585.864 17.7906C585.864 17.6116 585.816 17.4359 585.725 17.2818C585.634 17.1277 585.503 17.0009 585.347 16.9146L573.595 10.4526C573.448 10.3702 573.282 10.3268 573.114 10.3266Z"
+            fill="#9747FF"
+        />
+    </g>
+    <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M997.186 55.8691V91.5141H992.352V56.0651C992.359 54.7474 992.265 53.4312 992.07 52.1281C991.857 50.7641 991.524 49.5401 991.07 48.4561C990.584 47.257 989.875 46.1608 988.982 45.2251C986.736 42.9137 983.774 41.7581 980.096 41.7581C978.442 41.7444 976.793 41.9277 975.182 42.3041C972.547 42.8991 970.142 44.2442 968.255 46.1771C965.406 49.1231 963.982 53.7534 963.982 60.0681V91.5141H959.1V56.0651C959.104 54.9569 959.038 53.8497 958.901 52.7501C958.755 51.6187 958.529 50.5804 958.223 49.6351C958.042 49.0695 957.821 48.5175 957.562 47.9831C957.083 46.9847 956.465 46.06 955.724 45.2371C955.022 44.4636 954.2 43.8082 953.289 43.2961C952.076 42.6239 950.755 42.1706 949.385 41.9571C948.545 41.8217 947.695 41.7552 946.844 41.7581C945.41 41.7494 943.98 41.8936 942.577 42.1881C941.079 42.5029 939.637 43.0409 938.299 43.7841C936.352 44.8867 934.73 46.4816 933.594 48.4091C933.277 48.9342 932.989 49.4767 932.732 50.0341C932.139 51.3436 931.694 52.7155 931.406 54.1241C931.125 55.4454 930.939 56.8764 930.847 58.4171C930.801 59.1945 930.778 59.9732 930.779 60.7521V91.5141H925.848V38.4381H929.852L930.584 47.1291H930.877C931.698 45.5303 932.746 44.0585 933.988 42.7591C934.121 42.6189 934.256 42.4805 934.393 42.3441C935.463 41.2843 936.677 40.3819 938.001 39.6641C938.597 39.3374 939.21 39.042 939.837 38.7791C941.938 37.8944 944.4 37.4391 947.222 37.4131C947.308 37.4123 947.393 37.412 947.479 37.4121C951.287 37.4121 954.518 38.2667 957.171 39.9761C959.824 41.6847 961.671 44.2154 962.713 47.5681H963.055C964.434 44.438 966.767 41.8236 969.72 40.0981C971.583 39.0065 973.622 38.2475 975.746 37.8551C977.357 37.5518 978.994 37.4034 980.633 37.4121C985.744 37.4121 989.78 38.8934 992.742 41.8561C994.119 43.2686 995.17 44.9667 995.818 46.8301C996.331 48.2287 996.699 49.7941 996.924 51.5261C997.104 52.9666 997.192 54.4173 997.186 55.8691ZM747.82 55.9181V91.5141H744.012L743.133 82.2361H742.84C741.701 84.2221 740.317 85.9881 738.689 87.5341C737.452 88.6986 736.043 89.6656 734.511 90.4011C733.923 90.6872 733.321 90.9445 732.708 91.1721C730.348 92.0507 727.475 92.4901 724.09 92.4901C722.778 92.4957 721.468 92.4014 720.17 92.2081C718.38 91.9334 716.765 91.4577 715.325 90.7811C713.671 90.0235 712.195 88.9268 710.992 87.5621C710.515 87.0132 710.086 86.424 709.71 85.8011C708.391 83.6197 707.732 80.9667 707.732 77.8421C707.707 75.9644 708.032 74.0985 708.691 72.3401C709.641 69.8894 711.297 67.8467 713.66 66.2121C713.862 66.0724 714.067 65.937 714.275 65.8061C716.059 64.707 717.976 63.8378 719.978 63.2191C723.597 62.0591 727.961 61.3671 733.07 61.1431C733.071 61.1431 733.073 61.1431 733.074 61.1431L742.938 60.6541V56.7971C742.938 51.3611 741.864 47.4874 739.715 45.1761C738.441 43.8278 736.824 42.8507 735.038 42.3491C733.969 42.0291 732.794 41.8291 731.511 41.7491C731.072 41.722 730.633 41.7087 730.193 41.7091C727.529 41.6998 724.877 42.053 722.308 42.7591C720.429 43.2857 718.59 43.9461 716.805 44.7351C716.067 45.0591 715.338 45.4015 714.617 45.7621L713.055 41.6601C715.594 40.4561 718.32 39.4634 721.233 38.6821C724.123 37.9161 727.1 37.5225 730.09 37.5111C730.19 37.5103 730.289 37.51 730.389 37.5101C734.285 37.5101 737.526 38.1651 740.112 39.4751C741.357 40.0973 742.493 40.9177 743.475 41.9041C745.623 44.0767 746.975 47.2071 747.53 51.2951C747.73 52.8278 747.827 54.3723 747.82 55.9181ZM818.035 38.4381V42.5391H805.535V91.5141H800.604V42.5391H790.74V39.6091L800.604 38.3401V32.4811C800.598 31.1052 800.677 29.7303 800.84 28.3641C801.012 26.9727 801.277 25.6914 801.636 24.5201C801.82 23.9146 802.037 23.32 802.288 22.7391C803.411 20.1511 805.12 18.2144 807.415 16.9291C809.386 15.8244 811.808 15.1941 814.679 15.0381C815.163 15.0123 815.647 14.9996 816.131 15.0001C816.999 14.9984 817.866 15.0331 818.731 15.1041C819.513 15.1678 820.291 15.2716 821.062 15.4151C822.033 15.5969 822.995 15.8221 823.945 16.0901C824.354 16.2058 824.761 16.3309 825.164 16.4651L824.041 20.6151C823.371 20.3868 822.691 20.1876 822.003 20.0181C821.425 19.875 820.843 19.7486 820.257 19.6391C818.923 19.3843 817.569 19.2534 816.211 19.2481C816.201 19.2481 816.19 19.2481 816.18 19.2481C815.178 19.2409 814.178 19.3276 813.192 19.5071C812.079 19.7191 811.094 20.0604 810.239 20.5311C809.398 20.9887 808.654 21.6063 808.05 22.3491C806.373 24.4157 805.535 27.7767 805.535 32.4321V38.4381H818.035ZM786.932 87.0221V91.1231C786.447 91.2887 785.957 91.4378 785.462 91.5701C784.956 91.7061 784.418 91.8347 783.849 91.9561C783.656 91.9972 783.463 92.0369 783.27 92.0751C781.87 92.3517 780.324 92.4901 778.631 92.4901C777.574 92.4951 776.519 92.4158 775.475 92.2531C774.3 92.0644 773.226 91.7621 772.254 91.3461C771.88 91.1863 771.514 91.0061 771.16 90.8061C769.439 89.8255 768.037 88.3693 767.123 86.6121C766.959 86.3072 766.807 85.996 766.668 85.6791C765.883 83.8951 765.404 81.7324 765.229 79.1911C765.178 78.4331 765.153 77.6737 765.154 76.9141V42.5391H757.244V39.6091L765.105 38.0961L766.814 25.5961H770.086V38.4381H786.639V42.5391H770.086V76.6211C770.081 77.6736 770.144 78.7254 770.273 79.7701C770.411 80.8407 770.625 81.8124 770.916 82.6851C771.213 83.6131 771.65 84.4908 772.21 85.2881C773.093 86.5025 774.36 87.3842 775.805 87.7911C776.788 88.0917 777.909 88.2421 779.168 88.2421C780.063 88.2438 780.957 88.2015 781.847 88.1151C782.38 88.0626 782.912 87.9909 783.44 87.9001C784.028 87.7996 784.612 87.6785 785.192 87.5371C785.738 87.4031 786.25 87.2547 786.729 87.0921C786.797 87.0692 786.865 87.0459 786.932 87.0221ZM632 20.1271H649.529C651.756 20.1173 653.981 20.2463 656.192 20.5131C661.321 21.1571 665.397 22.6051 668.419 24.8571C668.487 24.9075 668.554 24.9585 668.621 25.0101C671.361 27.1385 673.307 30.1244 674.149 33.4901C674.696 35.4921 674.969 37.7271 674.969 40.1951C674.976 41.8378 674.84 43.4781 674.561 45.0971C674.298 46.6219 673.869 48.1137 673.284 49.5461C672.195 52.2171 670.458 54.5748 668.23 56.4061C666.834 57.5462 665.291 58.4946 663.644 59.2261C662.402 59.782 661.12 60.2433 659.808 60.6061C656.774 61.4561 653.285 61.9231 649.341 62.0071C648.899 62.0168 648.458 62.0218 648.016 62.0221H637.029V91.5141H632V20.1271ZM915.496 38.4381L914.715 42.9791C913.64 42.6857 912.547 42.4652 911.443 42.3191C910.723 42.2253 909.999 42.1626 909.273 42.1311C908.809 42.1102 908.344 42.0998 907.879 42.1001C906.612 42.0929 905.349 42.2267 904.112 42.4991C903.095 42.7261 902.106 43.0672 901.165 43.5161C899.196 44.4601 897.527 45.8107 896.16 47.5681C894.793 49.3261 893.751 51.4421 893.035 53.9161C892.319 56.3901 891.961 59.1571 891.961 62.2171V91.5141H886.98V38.4381H891.229L891.717 48.4471H892.01C892.823 46.3964 893.971 44.5491 895.452 42.9051C896.96 41.2429 898.791 39.9071 900.835 38.9801C900.839 38.9784 900.844 38.9767 900.848 38.9751C902.289 38.319 903.821 37.8835 905.392 37.6831C906.281 37.5658 907.177 37.508 908.074 37.5101C909.474 37.5101 910.792 37.5914 912.029 37.7541C912.829 37.8579 913.624 37.9967 914.412 38.1701C914.775 38.2507 915.137 38.3401 915.496 38.4381ZM871.879 71.3031C872.188 69.1835 872.339 67.044 872.332 64.9021C872.339 62.727 872.185 60.5543 871.871 58.4021C871.487 55.7222 870.773 53.1002 869.744 50.5961C868.019 46.4621 865.439 43.2311 862.005 40.9031C861.941 40.8596 861.877 40.8166 861.812 40.7741C859.805 39.4521 857.511 38.5197 854.932 37.9771C853.026 37.5891 851.084 37.3997 849.139 37.4121C844.158 37.4121 839.886 38.5107 836.321 40.7081C832.757 42.9054 830.023 46.0631 828.118 50.1811C828.017 50.4003 827.918 50.621 827.823 50.8431C826.116 54.8217 825.262 59.5081 825.262 64.9021C825.262 69.0367 825.783 72.7884 826.824 76.1571C827.078 76.9828 827.369 77.7969 827.695 78.5971C828.605 80.8625 829.851 82.9782 831.39 84.8731C833.369 87.2972 835.885 89.228 838.738 90.5131C840.226 91.1848 841.787 91.6825 843.389 91.9961C845.122 92.3332 846.884 92.4987 848.65 92.4901C850.22 92.4962 851.787 92.3772 853.338 92.1341C855.267 91.8367 857.147 91.2832 858.929 90.4881C861.805 89.2068 864.339 87.2665 866.326 84.8241C868.312 82.3827 869.809 79.4774 870.818 76.1081C871.286 74.5338 871.64 72.928 871.879 71.3031ZM694.256 15.5371V91.5141H689.275V15.5371H694.256ZM830.34 64.9021C830.333 66.8333 830.461 68.7627 830.723 70.6761C831.021 72.7874 831.492 74.7467 832.136 76.5541C832.203 76.7399 832.271 76.9249 832.342 77.1091C832.982 78.8181 833.863 80.427 834.958 81.8871C835.937 83.1795 837.104 84.3179 838.421 85.2641C841.139 87.2167 844.581 88.1931 848.748 88.1931C853.013 88.1931 856.512 87.2167 859.246 85.2641C861.981 83.3107 863.999 80.5764 865.301 77.0611C866.038 75.0385 866.558 72.9434 866.853 70.8111C867.127 68.8534 867.261 66.8788 867.254 64.9021C867.262 62.817 867.111 60.7343 866.804 58.6721C866.516 56.7372 866.045 54.834 865.398 52.9881C864.161 49.5054 862.208 46.7631 859.539 44.7611C857.988 43.6173 856.221 42.7983 854.346 42.3531C853.004 42.0184 851.547 41.8247 849.975 41.7721C849.68 41.7625 849.385 41.7578 849.09 41.7581C847.169 41.7399 845.254 41.9732 843.394 42.4521C840.095 43.287 837.173 45.2099 835.101 47.9101C833.528 49.9847 832.356 52.3345 831.644 54.8391C830.775 57.7651 830.34 61.1194 830.34 64.9021ZM648.992 24.5701H637.029V57.5781H647.527C649.301 57.5833 651.074 57.4958 652.839 57.3161C655.269 57.0614 657.47 56.6197 659.441 55.9911C660.915 55.5345 662.317 54.873 663.606 54.0261C664.97 53.1221 666.156 51.9762 667.107 50.6451C667.968 49.4145 668.613 48.0458 669.013 46.5981C669.354 45.4141 669.584 44.1161 669.701 42.7041C669.764 41.9347 669.794 41.163 669.793 40.3911C669.793 34.8897 668.1 30.8777 664.715 28.3551C663.383 27.3889 661.909 26.6358 660.346 26.1231C657.323 25.0877 653.538 24.5701 648.992 24.5701ZM742.889 69.7361V64.5121L733.611 64.9021C726.873 65.2281 721.746 66.4327 718.23 68.5161C715.047 70.4021 713.305 73.1424 713.004 76.7371C712.972 77.1209 712.957 77.5059 712.957 77.8911C712.948 78.9569 713.071 80.0198 713.325 81.0551C713.747 82.8283 714.721 84.4218 716.106 85.6061C717.247 86.56 718.578 87.2605 720.01 87.6611C721.036 87.9631 722.162 88.1564 723.387 88.2411C723.881 88.2748 724.376 88.2915 724.871 88.2911C729.505 88.2911 733.269 87.2411 736.163 85.1411C736.909 84.6001 737.6 83.9872 738.226 83.3111C740.141 81.2122 741.492 78.6621 742.154 75.8991C742.594 74.1751 742.836 72.2947 742.881 70.2581C742.885 70.0841 742.888 69.9101 742.889 69.7361Z"
+        fill="#061631"
+        stroke="#061631"
+        strokeWidth={2.26772}
+        strokeLinecap="round"
+    />
+    <defs>
+        <clipPath id="clip0_2_37">
+            <rect width={595.563} height={92.29} fill="white"/>
+        </clipPath>
+    </defs>
+</svg>
+
+export const Default = () => {
+    return <Nav
+        logo={logo}
+        value="design"
+    >
+        <Nav.Item value="build" href="/build">
+            Build
+        </Nav.Item>
+        <Nav.Item value="design" href="/design">
+            Design
+        </Nav.Item>
+        <Nav.Item value="launch" href="/launch">
+            Launch
+        </Nav.Item>
+    </Nav>
+}
+

package/src/docs/ui/Sidebar.stories.tsx

@@ -0,0 +1,167 @@
+import React, {useState} from 'react';
+import type {Meta} from '@storybook/react';
+import {MemoryRouter} from "react-router";
+
+import {UISidebar} from '@xyd-js/ui';
+import {LayoutPrimary} from "@xyd-js/components/layouts";
+
+export default {
+    title: 'UI/Sidebar',
+    decorators: [
+        (Story) => <MemoryRouter>
+            <Story />
+        </MemoryRouter>,
+    ],
+} as Meta;
+
+export const Default = () => {
+    return <div style={{
+        padding: "100px",
+        paddingTop: "0px",
+        margin: "0 auto",
+    }}>
+        <LayoutPrimary
+            header={<></>}
+            aside={<DemoSidebar/>}
+            content={<></>}
+            contentNav={<></>}
+        />
+    </div>
+}
+
+
+function DemoSidebar() {
+    const [isOpen, setIsOpen] = useState(false)
+
+    function onClick() {
+        setIsOpen(!isOpen)
+    }
+
+    const items = new Array(40).fill(0).map((_, i) => <UISidebar.Item key={i} href="#">
+            {`Item ${i}`}
+        </UISidebar.Item>
+    )
+
+    return <UISidebar footerItems={<DemoSidebarFooter/>}>
+        <UISidebar.ItemHeader>
+            GET STARTED
+        </UISidebar.ItemHeader>
+        <UISidebar.Item
+            button
+            active={isOpen}
+            activeTheme="secondary"
+            onClick={onClick}
+        >
+            Root nested
+            <UISidebar.SubTree isOpen={isOpen}>
+                <UISidebar.Item href="#">
+                    Nested A
+                </UISidebar.Item>
+                <UISidebar.Item href="#">
+                    Nested B
+                </UISidebar.Item>
+                <UISidebar.Item button active>
+                    Nested root C
+                    <UISidebar.SubTree>
+                        <UISidebar.Item href="#">
+                            Nested C.A
+                        </UISidebar.Item>
+                        <UISidebar.Item href="#">
+                            Nested C.B
+                        </UISidebar.Item>
+                    </UISidebar.SubTree>
+                </UISidebar.Item>
+            </UISidebar.SubTree>
+        </UISidebar.Item>
+
+        <UISidebar.ItemHeader>
+            APIS
+        </UISidebar.ItemHeader>
+        <UISidebar.Item href="#">
+            Authentication
+        </UISidebar.Item>
+
+        <UISidebar.Item href="#">
+            Making requests
+        </UISidebar.Item>
+
+        {items}
+    </UISidebar>
+}
+
+function DemoSidebarFooter() {
+    return <>
+        <UISidebar.FooterItem
+            href="#"
+            icon={
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                >
+                    <path
+                        fillRule="evenodd"
+                        d="M14.447 7.106a1 1 0 0 1 .447 1.341l-4 8a1 1 0 1 1-1.788-.894l4-8a1 1 0 0 1 1.341-.447ZM6.6 7.2a1 1 0 0 1 .2 1.4L4.25 12l2.55 3.4a1 1 0 0 1-1.6 1.2l-3-4a1 1 0 0 1 0-1.2l3-4a1 1 0 0 1 1.4-.2Zm10.8 0a1 1 0 0 1 1.4.2l3 4a1 1 0 0 1 0 1.2l-3 4a1 1 0 0 1-1.6-1.2l2.55-3.4-2.55-3.4a1 1 0 0 1 .2-1.4Z"
+                        clipRule="evenodd"
+                    />
+                </svg>
+            }
+        >
+            Cookbook
+        </UISidebar.FooterItem>
+        <UISidebar.FooterItem
+            href="#"
+            icon={
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="currentColor"
+                    viewBox="0 0 24 24"
+                >
+                    <path
+                        fillRule="evenodd"
+                        d="M10.5 8.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM12 5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7ZM3 9.5a1 1 0 1 1 2 0 1 1 0 0 1-2 0Zm1-3a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm16 2a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm-3 1a3 3 0 1 1 6 0 3 3 0 0 1-6 0ZM8 18c0-.974.438-1.684 1.142-2.185C9.876 15.293 10.911 15 12 15c1.09 0 2.124.293 2.858.815.704.5 1.142 1.21 1.142 2.185a1 1 0 1 0 2 0c0-1.692-.812-2.982-1.983-3.815C14.876 13.373 13.411 13 12 13c-1.41 0-2.876.373-4.017 1.185C6.812 15.018 6 16.308 6 18a1 1 0 1 0 2 0Zm-3.016-3.675a1 1 0 0 1-.809 1.16C2.79 15.732 2 16.486 2 17.5a1 1 0 1 1-2 0c0-2.41 1.978-3.655 3.825-3.985a1 1 0 0 1 1.16.81Zm14.84 1.16a1 1 0 1 1 .351-1.97C22.022 13.845 24 15.09 24 17.5a1 1 0 1 1-2 0c0-1.014-.79-1.768-2.175-2.015Z"
+                        clipRule="evenodd"
+                    />
+                </svg>
+            }
+        >
+            Community
+        </UISidebar.FooterItem>
+        <UISidebar.FooterItem
+            href="#"
+            icon={
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+                     fill="none">
+                    <path fill-rule="evenodd" clip-rule="evenodd"
+                          d="M3.78163 3.28449C3.8768 2.96725 4.16879 2.75 4.5 2.75H19.5C19.8312 2.75 20.1232 2.96725 20.2184 3.28449L21.7184 8.28449C21.7393 8.3544 21.75 8.42701 21.75 8.5C21.75 10.5711 20.0711 12.25 18 12.25C16.7733 12.25 15.6842 11.661 15 10.7504C14.3158 11.661 13.2267 12.25 12 12.25C10.7733 12.25 9.68417 11.661 9 10.7504C8.31583 11.661 7.2267 12.25 6 12.25C3.92893 12.25 2.25 10.5711 2.25 8.5C2.25 8.42701 2.26066 8.3544 2.28163 8.28449L3.78163 3.28449ZM9.75 8.5C9.75 9.74264 10.7574 10.75 12 10.75C13.2426 10.75 14.25 9.74264 14.25 8.5C14.25 8.08579 14.5858 7.75 15 7.75C15.4142 7.75 15.75 8.08579 15.75 8.5C15.75 9.74264 16.7574 10.75 18 10.75C19.2083 10.75 20.1942 9.79754 20.2477 8.60244L18.942 4.25H5.05802L3.75229 8.60244C3.80584 9.79753 4.79169 10.75 6 10.75C7.24264 10.75 8.25 9.74264 8.25 8.5C8.25 8.08579 8.58579 7.75 9 7.75C9.41421 7.75 9.75 8.08579 9.75 8.5Z"
+                    />
+                    <path fill-rule="evenodd" clip-rule="evenodd"
+                          d="M4 10.25C4.41421 10.25 4.75 10.5858 4.75 11V19.75H6.5C6.91421 19.75 7.25 20.0858 7.25 20.5C7.25 20.9142 6.91421 21.25 6.5 21.25H4C3.58579 21.25 3.25 20.9142 3.25 20.5V11C3.25 10.5858 3.58579 10.25 4 10.25ZM20 10.25C20.4142 10.25 20.75 10.5858 20.75 11V20.5C20.75 20.9142 20.4142 21.25 20 21.25H10.5C10.0858 21.25 9.75 20.9142 9.75 20.5C9.75 20.0858 10.0858 19.75 10.5 19.75H19.25V11C19.25 10.5858 19.5858 10.25 20 10.25Z"
+                    />
+                    <path
+                        d="M12.003 19C11.31 18.9996 10.6384 18.7598 10.102 18.3213C9.56564 17.8829 9.19745 17.2726 9.05983 16.594C8.92222 15.9154 9.02364 15.2101 9.34693 14.5976C9.67022 13.9852 10.1955 13.5032 10.8337 13.2333C11.5673 12.9262 12.393 12.9221 13.1296 13.2222C13.8661 13.5222 14.4536 14.1018 14.7631 14.8338C15.0727 15.5659 15.0791 16.3907 14.7808 17.1274C14.4827 17.8642 13.9042 18.4527 13.1724 18.7641C12.8025 18.9205 12.4047 19.0007 12.003 19ZM11.1458 14.7215C11.1124 14.7215 11.0803 14.7348 11.0567 14.7584C11.0331 14.782 11.0198 14.8141 11.0198 14.8475V17.1923C11.0198 17.2258 11.0331 17.2578 11.0567 17.2814C11.0803 17.305 11.1124 17.3183 11.1458 17.3183C11.1671 17.3183 11.188 17.3128 11.2065 17.3024L13.3399 16.13C13.3597 16.1192 13.3761 16.1032 13.3876 16.0838C13.3991 16.0644 13.4052 16.0423 13.4052 16.0197C13.4052 15.9972 13.3991 15.9751 13.3876 15.9557C13.3761 15.9362 13.3597 15.9203 13.3399 15.9094L11.2063 14.7373C11.1879 14.727 11.1671 14.7215 11.1458 14.7215Z"
+                    />
+                </svg>
+            }
+        >
+            Marketplace
+        </UISidebar.FooterItem>
+        <UISidebar.FooterItem
+            href="#"
+            icon={
+                <svg
+                    viewBox="0 0 15 15"
+                    xmlns="http://www.w3.org/2000/svg"
+                >
+                    <path
+                        d="M7.28856 0.796908C7.42258 0.734364 7.57742 0.734364 7.71144 0.796908L13.7114 3.59691C13.8875 3.67906 14 3.85574 14 4.05V10.95C14 11.1443 13.8875 11.3209 13.7114 11.4031L7.71144 14.2031C7.57742 14.2656 7.42258 14.2656 7.28856 14.2031L1.28856 11.4031C1.11252 11.3209 1 11.1443 1 10.95V4.05C1 3.85574 1.11252 3.67906 1.28856 3.59691L7.28856 0.796908ZM2 4.80578L7 6.93078V12.9649L2 10.6316V4.80578ZM8 12.9649L13 10.6316V4.80578L8 6.93078V12.9649ZM7.5 6.05672L12.2719 4.02866L7.5 1.80176L2.72809 4.02866L7.5 6.05672Z"
+                        fill="currentColor"
+                        fillRule="evenodd"
+                        clipRule="evenodd"
+                    />
+                </svg>
+            }
+        >
+            SDKs
+        </UISidebar.FooterItem>
+    </>
+}

package/src/docs/ui/SubNav.stories.tsx

@@ -0,0 +1,29 @@
+import React, {} from 'react';
+import type {Meta} from '@storybook/react';
+
+import {SubNav} from '@xyd-js/ui';
+
+export default {
+    title: 'UI/SubNav',
+} as Meta;
+
+export const Default = () => {
+    return <div style={{
+        padding: "100px",
+        paddingTop: "0px",
+        margin: "0 auto",
+    }}>
+        <SubNav title="Apps" value="build">
+            <SubNav.Item value="build" href="/build">
+                Build
+            </SubNav.Item>
+            <SubNav.Item value="design" href="/design">
+                Design
+            </SubNav.Item>
+            <SubNav.Item value="launch" href="/launch">
+                Launch
+            </SubNav.Item>
+        </SubNav>
+    </div>
+}
+

package/src/utils/mdx.ts

@@ -0,0 +1,31 @@
+import React from "react";
+
+export type MDXReferenceWrapper<T> = {
+    children: React.ReactNode;
+    title: string;
+};
+
+export type MDXReference<T> = T extends object
+    ? MDXReferenceWrapper<T> & {
+    [K in keyof T]: MDXReference<T[K]>;
+}
+    : MDXReferenceWrapper<T>;
+
+// TODO: unify xyd reference props with react
+export function mdxValue<T>(val: MDXReferenceWrapper<T> | null): string {
+    if (!val) {
+        return ""
+    }
+
+    if (val.title) {
+        return val.title
+    }
+
+    // if we have case like below
+    /*
+        #### !!<key> <name>
+
+        !<key> string
+    */
+    return val as unknown as string
+}

package/tsconfig.json

@@ -0,0 +1,39 @@
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "esModuleInterop": true,
+    "moduleResolution": "bundler",
+    "target": "esnext", // Change this to es2020 or esnext
+    "baseUrl": ".",
+    "paths": {
+      "@xyd-js/atlas": [
+        "../xyd-atlas/index"
+      ],
+      "@xyd-js/components": [
+        "../xyd-components/index"
+      ],
+      "@xyd-js/content": [
+        "../xyd-content/src"
+      ],
+      "@xyd-js/ui": [
+        "../xyd-ui/index"
+      ],
+      "@xyd-js/theme-poetry": [
+        "../xyd-theme-poetry/src/index"
+      ]
+    },
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "noEmit": true,
+    "incremental": false,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "plugins": [],
+    "strictNullChecks": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["node_modules"]
+}

package/vite.config.ts

@@ -0,0 +1,8 @@
+import {defineConfig} from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+    plugins: [
+        react(),
+    ]
+});