export const title = "Sidebar navigation components";
export const description = "Free and open-source React sidebar navigation components built for modern applications and websites. These sidebar navigations are built using React Aria and styled with Tailwind CSS.";
export const links = {
    github: "https://github.com/untitleduico/react/tree/main/components/application/app-navigation",
};

import * as FeaturedCards from "@/components/application/app-navigation/base-components/featured-cards.story.tsx";
import * as Demos from "@/components/application/app-navigation/sidebar-navigation.demo.tsx";

<PreviewAndCode title="Sidebar navigation example">
    <ResizablePreview enable id="preview" className="h-[920px]">
        <ResponsiveIframe
            src="/react/iframe/sidebar-navigation/sidebar-section-dividers-demo"
            dynamicHeight={false}
            height="100%"
            className="rounded-2xl border border-secondary bg-primary"
        />
    </ResizablePreview>
    <TabPanel id="code">
        <ComponentCode component="sidebar-navigation/SidebarSectionDividersDemo" />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

You can add the sidebar navigation base components to your project using the CLI or manually.

<Tabs className="w-full mt-8">
    <TabList type="underline" items={[{ id:'cli', label:'CLI' }, { id:'manual', label:'Manual' }]} />

    <TabPanel id="cli" className="mt-8">
        ```bash
        npx untitledui@latest add sidebar-navigation-base
        ```
    </TabPanel>

    <TabPanel id="manual">
        <Steps>
            <Step title="Copy component files">
                Copy the files below into your project:

                <ComponentCodeTabs component="application/sidebar-navigation-base" filepath="app-navigation/base-components" />
            </Step>
            <Step title="Start using the components">
                Great! Now you can start using the sidebar navigation components in your project by just copy/pasting our examples below.
            </Step>
        </Steps>
    </TabPanel>

</Tabs>

<Divider />

### Simple {{ tocOnly:true }}

<PreviewAndCode title="Simple">
    <ResizablePreview enable id="preview" className="h-[920px]">
        <ResponsiveIframe
            src="/react/iframe/sidebar-navigation/sidebar-navigation-simple-demo"
            dynamicHeight={false}
            height="100%"
            className="rounded-2xl border border-secondary bg-primary"
        />
    </ResizablePreview>
    <TabPanel id="code">
        <ComponentCode
            components={[
                { name: "page.tsx", path: "sidebar-navigation/SidebarNavigationSimpleDemo" },
                { name: "app-navigation/sidebar-simple.tsx", path: "sidebar-navigation/SidebarNavigationSimple" },
            ]}
        />
    </TabPanel>
</PreviewAndCode>

### Dual-tier {{ tocOnly:true }}

<PreviewAndCode title="Dual-tier">
    <ResizablePreview enable id="preview" className="h-[920px]">
        <ResponsiveIframe
            src="/react/iframe/sidebar-navigation/sidebar-navigation-dual-tier-demo"
            dynamicHeight={false}
            height="100%"
            className="rounded-2xl border border-secondary bg-primary"
        />
    </ResizablePreview>
    <TabPanel id="code">
        <ComponentCode
            components={[
                { name: "page.tsx", path: "sidebar-navigation/SidebarNavigationDualTierDemo" },
                { name: "app-navigation/sidebar-dual-tier.tsx", path: "sidebar-navigation/SidebarNavigationDualTier" },
            ]}
        />
    </TabPanel>
</PreviewAndCode>

### Slim {{ tocOnly:true }}

<PreviewAndCode title="Slim">
    <ResizablePreview enable id="preview" className="h-[920px]">
        <ResponsiveIframe
            src="/react/iframe/sidebar-navigation/sidebar-navigation-slim-demo"
            dynamicHeight={false}
            height="100%"
            className="rounded-2xl border border-secondary bg-primary"
        />
    </ResizablePreview>
    <TabPanel id="code">
        <ComponentCode
            components={[
                { name: "page.tsx", path: "sidebar-navigation/SidebarNavigationSlimDemo" },
                { name: "app-navigation/sidebar-slim.tsx", path: "sidebar-navigation/SidebarNavigationSlim" },
            ]}
        />
    </TabPanel>
</PreviewAndCode>

### Sections dividers {{ tocOnly:true }}

<PreviewAndCode title="Sections dividers">
    <ResizablePreview enable id="preview" className="h-[920px]">
        <ResponsiveIframe
            src="/react/iframe/sidebar-navigation/sidebar-section-dividers-demo"
            dynamicHeight={false}
            height="100%"
            className="rounded-2xl border border-secondary bg-primary"
        />
    </ResizablePreview>
    <TabPanel id="code">
        <ComponentCode
            components={[
                { name: "page.tsx", path: "sidebar-navigation/SidebarSectionDividersDemo" },
                { name: "app-navigation/sidebar-section-dividers.tsx", path: "sidebar-navigation/SidebarNavigationSectionDividers" },
            ]}
        />
    </TabPanel>
</PreviewAndCode>

### Sections subheadings {{ tocOnly:true }}

<PreviewAndCode title="Sections subheadings">
    <ResizablePreview enable id="preview" className="h-[920px]">
        <ResponsiveIframe
            src="/react/iframe/sidebar-navigation/sidebar-navigation-sections-subheadings-demo"
            dynamicHeight={false}
            height="100%"
            className="rounded-2xl border border-secondary bg-primary"
        />
    </ResizablePreview>
    <TabPanel id="code">
        <ComponentCode
            components={[
                { name: "page.tsx", path: "sidebar-navigation/SidebarNavigationSectionsSubheadingsDemo" },
                { name: "app-navigation/sidebar-sections-subheadings.tsx", path: "sidebar-navigation/SidebarNavigationSectionsSubheadings" },
            ]}
        />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Featured cards

These featured cards are used to display various information in the sidebar navigation. Feel free to just swap the existing cards with any of these cards presented below.

### Progress bar {{ tocOnly:true }}

<PreviewAndCode title="Progress bar">
    <ResizablePreview
        enable
        id="preview"
        className="flex min-h-[320px] items-center justify-center overflow-hidden rounded-2xl border border-secondary bg-primary py-32"
    >
        <div className="w-68">
            {/* <FeaturedCards.FeaturedCardProgressBar /> */}
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="featured-cards/FeaturedCardProgressBar" />
    </TabPanel>
</PreviewAndCode>

### Progress circle {{ tocOnly:true }}

<PreviewAndCode title="Progress circle">
    <ResizablePreview
        enable
        id="preview"
        className="flex min-h-[320px] items-center justify-center overflow-hidden rounded-2xl border border-secondary bg-primary py-32"
    >
        <div className="w-68">
            {/* <FeaturedCards.FeaturedCardProgressCircle /> */}
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="featured-cards/FeaturedCardProgressCircle" />
    </TabPanel>
</PreviewAndCode>

### Image {{ tocOnly:true }}

<PreviewAndCode title="Image" isPublic={false}>
    <ResizablePreview
        enable
        id="preview"
        className="flex min-h-[320px] items-center justify-center overflow-hidden rounded-2xl border border-secondary bg-primary py-32"
    >
        <div className="w-68">
            <FeaturedCards.FeaturedCardImage />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="featured-cards/FeaturedCardImage" />
    </TabPanel>
</PreviewAndCode>

### Cookie preferences {{ tocOnly:true }}

<PreviewAndCode title="Cookie preferences" isPublic={false}>
    <ResizablePreview
        enable
        id="preview"
        className="flex min-h-[320px] items-center justify-center overflow-hidden rounded-2xl border border-secondary bg-primary py-32"
    >
        <div className="w-68">
            <FeaturedCards.FeaturedCardCookiePreferences />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="featured-cards/FeaturedCardCookiePreferences" />
    </TabPanel>
</PreviewAndCode>

### Referral link {{ tocOnly:true }}

<PreviewAndCode title="Referral link" isPublic={false}>
    <ResizablePreview
        enable
        id="preview"
        className="flex min-h-[320px] items-center justify-center overflow-hidden rounded-2xl border border-secondary bg-primary py-32"
    >
        <div className="w-68">
            <FeaturedCards.FeaturedCardReferralLink />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="featured-cards/FeaturedCardReferralLink" />
    </TabPanel>
</PreviewAndCode>

### Onboarding steps {{ tocOnly:true }}

<PreviewAndCode title="Onboarding steps" isPublic={false}>
    <ResizablePreview
        enable
        id="preview"
        className="flex min-h-[320px] items-center justify-center overflow-hidden rounded-2xl border border-secondary bg-primary py-32"
    >
        <div className="w-68">
            <FeaturedCards.FeaturedCardOnboardingSteps />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="featured-cards/FeaturedCardOnboardingSteps" />
    </TabPanel>
</PreviewAndCode>

### Upgrade CTA {{ tocOnly:true }}

<PreviewAndCode title="Upgrade CTA" isPublic={false}>
    <ResizablePreview
        enable
        id="preview"
        className="flex min-h-[320px] items-center justify-center overflow-hidden rounded-2xl border border-secondary bg-primary py-32"
    >
        <div className="w-68">
            <FeaturedCards.FeaturedCardUpgradeCTA />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="featured-cards/FeaturedCardUpgradeCTA" />
    </TabPanel>
</PreviewAndCode>

### Support CTA {{ tocOnly:true }}

<PreviewAndCode title="Support CTA" isPublic={false}>
    <ResizablePreview
        enable
        id="preview"
        className="flex min-h-[320px] items-center justify-center overflow-hidden rounded-2xl border border-secondary bg-primary py-32"
    >
        <div className="w-68">
            <FeaturedCards.FeaturedCardSupportCTA />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="featured-cards/FeaturedCardSupportCTA" />
    </TabPanel>
</PreviewAndCode>

### Event CTA {{ tocOnly:true }}

<PreviewAndCode title="Event CTA" isPublic={false}>
    <ResizablePreview
        enable
        id="preview"
        className="flex min-h-[320px] items-center justify-center overflow-hidden rounded-2xl border border-secondary bg-primary py-32"
    >
        <div className="w-68">
            <FeaturedCards.FeaturedCardEventCTA />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="featured-cards/FeaturedCardEventCTA" />
    </TabPanel>
</PreviewAndCode>

### Message {{ tocOnly:true }}

<PreviewAndCode title="Message" isPublic={false}>
    <ResizablePreview
        enable
        id="preview"
        className="flex min-h-[320px] items-center justify-center overflow-hidden rounded-2xl border border-secondary bg-primary py-32"
    >
        <div className="w-68">
            <FeaturedCards.FeaturedCardMessage />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="featured-cards/FeaturedCardMessage" />
    </TabPanel>
</PreviewAndCode>

### Current projects {{ tocOnly:true }}

<PreviewAndCode title="Current projects" isPublic={false}>
    <ResizablePreview
        enable
        id="preview"
        className="flex min-h-[320px] items-center justify-center overflow-hidden rounded-2xl border border-secondary bg-primary py-32"
    >
        <div className="w-68">
            <FeaturedCards.FeaturedCardCurrentProjects />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode
            components={[
                { name: "page.tsx", path: "featured-cards/FeaturedCardCurrentProjectDemo" },
                { name: "app-navigation/base-components/featured-cards.tsx", path: "featured-cards/FeaturedCardCurrentProjects" },
            ]}
        />
    </TabPanel>
</PreviewAndCode>

### Free trial CTA {{ tocOnly:true }}

<PreviewAndCode title="Free trial CTA" isPublic={false}>
    <ResizablePreview
        enable
        id="preview"
        className="flex min-h-[320px] items-center justify-center overflow-hidden rounded-2xl border border-secondary bg-primary py-32"
    >
        <div className="w-68">
            <FeaturedCards.FeaturedCardFreeTrialCTA />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="featured-cards/FeaturedCardFreeTrialCTA" />
    </TabPanel>
</PreviewAndCode>

### QR code {{ tocOnly:true }}

<PreviewAndCode title="QR code" isPublic={false}>
    <ResizablePreview
        enable
        id="preview"
        className="flex min-h-[320px] items-center justify-center overflow-hidden rounded-2xl border border-secondary bg-primary py-32"
    >
        <div className="w-68">
            <FeaturedCards.FeaturedCardQRCode />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="featured-cards/FeaturedCardQRCode" />
    </TabPanel>
</PreviewAndCode>