Sidebar component

[cadellsingh]

When using the sidebar component, there seems to be a default border / outline around the close icon. The border is there when the component is first shown.. but after clicking anywhere on the screen the border disappears. This probably is related to the autofocus; but I don't see a way of disabling that.

<template>
  <Sidebar
    :class="{'no-outline': true}"
    :style="{outline: 'none', boxShadow: 'none'}"
    position="bottom"
    class="tw-rounded-tl-2xl tw-rounded-tr-2xl tw-w-full"
    :pt="{
      headerContent: {class: 'tw-w-full tw-text-center'}
    }"
  >
    <template #header>
      <div class="tw-flex tw-border-b tw-pb-5">
        <p class="popup-header tw-w-full">{{ header }}</p>
      </div>
    </template>

    <slot></slot>
  </Sidebar>
</template>

[tugcekucukoglu]

In the latest versions, the :focus css of the close button was moved to :focus-visible. If you plan to override this behaviour, closeButton options of pt property can be changed.

[cadellsingh]

Not sure if I am doing it correctly but doesnt seem like thats working either. @tugcekucukoglu

<template>
  <Sidebar
    position="bottom"
    class="tw-rounded-tl-2xl tw-rounded-tr-2xl tw-w-full"
    :pt="{
      headerContent: {class: 'tw-w-full tw-text-center'},
      closeButton: {class: 'custom-close-button'}
    }"
  >
    <template #header>
      <div class="tw-flex tw-border-b tw-pb-5 tw-w-full tw-text-center">
        <p class="popup-header tw-w-full">{{ header }}</p>
      </div>
    </template>

    <slot></slot>
  </Sidebar>
</template>

<style lang="scss" scoped>
.popup-header {
  font-size: 16px;
  font-weight: 600;
}

.custom-close-button:focus-visible {
  outline: none;
  border: none;
}
</style>