Sidebar

Overview

Sidebar is a slide-over component which mainly has same purpose as modal.

Very often, we display menu (common usecase for mobile web application) or a form without take too much places in the main context.

Default Sidebar

This example shows where to put your content when using Sidebar.

Copied !

---
import Sidebar from "$components/sidebar/Sidebar.astro";
import SidebarContent from "$components/sidebar/SidebarContent.astro";
import SidebarTrigger from "$components/sidebar/SidebarTrigger.astro";
---

<Sidebar>
  <SidebarTrigger>
    <span>Open Sidebar</span>
  </SidebarTrigger>
  <SidebarContent title="Sidebar Title" class="h-full w-3/4 max-w-lg">
    <div class="mx-2 mb-2 h-full border-dashed border border-slate-500"></div>
  </SidebarContent>
</Sidebar>

Full Example

Here an example with a pratical case, display a form in sidebar.

Copied !

---
import Sidebar from "$components/sidebar/Sidebar.astro";
import SidebarContent from "$components/sidebar/SidebarContent.astro";
import SidebarTrigger from "$components/sidebar/SidebarTrigger.astro";
import PrimaryButton from "$components/button/primary/PrimaryButton.astro";
---

<Sidebar>
  <SidebarTrigger
    variant="outlined"
    borderRadius="square"
    as={PrimaryButton}
    text="Primary Button as Trigger"
  />
  <SidebarContent position="left" class="">
    <div class="relative flex flex-wrap items-center w-full h-full p-2 md:p-8">
      <div class="relative w-full max-w-sm mx-auto lg:mb-0">
        <div class="relative text-center">
          <div class="flex flex-col mb-6 space-y-2">
            <h2 class="text-2xl font-semibold tracking-tight">
              Create an account
            </h2>
            <p class="text-sm text-neutral-500">
              Enter your email below to create your account
            </p>
          </div>
          <form onsubmit="event.preventDefault();" class="space-y-2">
            <input
              type="text"
              placeholder="name@example.com"
              class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md border-neutral-300 ring-offset-background placeholder:text-neutral-500 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50"
            />
            <button
              type="button"
              class="inline-flex items-center justify-center w-full h-10 px-4 py-2 text-sm font-medium tracking-wide text-white transition-colors duration-200 rounded-md bg-neutral-950 hover:bg-neutral-900 focus:ring-2 focus:ring-offset-2 focus:ring-neutral-900 focus:shadow-outline focus:outline-none"
            >
              Sign up with Email
            </button>
            <div class="relative py-6">
              <div class="absolute inset-0 flex items-center">
                <span class="w-full border-t"></span>
              </div>
              <div class="relative flex justify-center text-xs uppercase">
                <span class="px-2 bg-white text-neutral-500">
                  Or continue with
                </span>
              </div>
            </div>
            <button
              class="inline-flex items-center justify-center w-full h-10 px-4 py-2 text-sm font-medium border rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none border-input hover:bg-neutral-100"
              type="button"
            >
              <svg viewBox="0 0 438.549 438.549" class="w-4 h-4 mr-2">
                <path
                  fill="currentColor"
                  d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
                ></path>
              </svg>
              <span>Github</span>
            </button>
          </form>
        </div>
        <p class="mt-6 text-sm text-center text-neutral-500">
          <span>Already have an account?</span>
          <a href="#_" class="relative font-medium text-blue-600 group">
            <span>Login here</span>
            <span
              class="absolute bottom-0 left-0 w-0 group-hover:w-full ease-out duration-300 h-0.5 bg-blue-600"
            ></span>
          </a>
        </p>
        <p class="px-8 mt-1 text-sm text-center text-neutral-500">
          By continuing, you agree to our <a
            class="underline underline-offset-4 hover:text-primary"
            href="/terms">Terms</a
          > and <a
            class="underline underline-offset-4 hover:text-primary"
            href="/privacy">Policy</a
          >
        </p>
      </div>
    </div>
  </SidebarContent>
</Sidebar>

So far so good with our Sidebar, you can display it in a specific content by passing to selector props its id.

But notice that you have to somehow adjust classes to fit Sidebar in the concerned content.

Check code from example below.

Copied !

---
import Sidebar from "$components/sidebar/Sidebar.astro";
import SidebarContent from "$components/sidebar/SidebarContent.astro";
import SidebarTrigger from "$components/sidebar/SidebarTrigger.astro";
import SecondaryButton from "$components/button/secondary/SecondaryButton.astro";
---

<div class="w-full h-96 flex items-center justify-center">
  <Sidebar>
    <SidebarTrigger
      variant="inversed"
      as={SecondaryButton}
      text="Secondary Button"
    />
    <SidebarContent
      class="w-full"
      position="bottom"
      selector="#simple-sidebar-preview"
    >
      <div
        class="relative flex flex-wrap items-center w-full h-full p-2 md:p-8"
      >
        <div class="relative w-full max-w-sm mx-auto lg:mb-0">
          <div class="relative text-center">
            <div class="flex flex-col mb-6 space-y-2">
              <h2 class="text-2xl font-semibold tracking-tight">
                Create an account
              </h2>
              <p class="text-sm text-neutral-500">
                Enter your email below to create your account
              </p>
            </div>
            <form onsubmit="event.preventDefault();" class="space-y-2">
              <input
                type="text"
                placeholder="name@example.com"
                class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md border-neutral-300 ring-offset-background placeholder:text-neutral-500 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50"
              />
              <button
                type="button"
                class="inline-flex items-center justify-center w-full h-10 px-4 py-2 text-sm font-medium tracking-wide text-white transition-colors duration-200 rounded-md bg-neutral-950 hover:bg-neutral-900 focus:ring-2 focus:ring-offset-2 focus:ring-neutral-900 focus:shadow-outline focus:outline-none"
              >
                Sign up with Email
              </button>
              <div class="relative py-6">
                <div class="absolute inset-0 flex items-center">
                  <span class="w-full border-t"></span>
                </div>
                <div class="relative flex justify-center text-xs uppercase">
                  <span class="px-2 bg-white text-neutral-500">
                    Or continue with
                  </span>
                </div>
              </div>
              <button
                class="inline-flex items-center justify-center w-full h-10 px-4 py-2 text-sm font-medium border rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none border-input hover:bg-neutral-100"
                type="button"
              >
                <svg viewBox="0 0 438.549 438.549" class="w-4 h-4 mr-2">
                  <path
                    fill="currentColor"
                    d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
                  ></path>
                </svg>
                <span>Github</span>
              </button>
            </form>
          </div>
          <p class="mt-6 text-sm text-center text-neutral-500">
            <span>Already have an account?</span>
            <a href="#_" class="relative font-medium text-blue-600 group">
              <span>Login here</span>
              <span
                class="absolute bottom-0 left-0 w-0 group-hover:w-full ease-out duration-300 h-0.5 bg-blue-600"
              ></span>
            </a>
          </p>
          <p class="px-8 mt-1 text-sm text-center text-neutral-500">
            By continuing, you agree to our <a
              class="underline underline-offset-4 hover:text-primary"
              href="/terms">Terms</a
            > and <a
              class="underline underline-offset-4 hover:text-primary"
              href="/privacy">Policy</a
            >
          </p>
        </div>
      </div>
    </SidebarContent>
  </Sidebar>
</div>