negodesign 0.0.11 → 0.0.13

package/dist/components/core/card/types.d.ts

@@ -0,0 +1,54 @@
+import type { IconSvgElement } from "@hugeicons/svelte";
+export interface CardTagsProps {
+    icon?: IconSvgElement;
+    text: string;
+}
+export interface CardMediaProps {
+    id: string | number;
+    logo?: string;
+    title?: string;
+    content?: string;
+    startMax?: number;
+    imageUrl?: string;
+    videoUrl?: string;
+    className?: string;
+    tags?: CardTagsProps[];
+    isFavorite?: boolean;
+    startNumber?: number;
+    isTagBorderBottom?: boolean;
+    buttonProfileClass?: string;
+    buttonDetailsClass?: string;
+    isVideoButtonMaximized?: boolean;
+    isImageButtonMaximized?: boolean;
+    onFavoriteClick?: (id: string | number) => void;
+    onButtonProfile?: (id: string | number) => void;
+    onButtonDetails?: (id: string | number) => void;
+    videoAction?: 'START_REPRODUCTION' | 'HOVER_REPRODUCTION';
+}
+export interface CardProfileProps {
+    id: string | number;
+    logo?: string;
+    title?: string;
+    content?: string;
+    startMax?: number;
+    className?: string;
+    tags?: CardTagsProps[];
+    isFavorite?: boolean;
+    startNumber?: number;
+    isTagBorderBottom?: boolean;
+    buttonProfileClass?: string;
+    buttonDetailsClass?: string;
+    onFavoriteClick?: (id: string | number) => void;
+    onButtonProfile?: (id: string | number) => void;
+    onButtonDetails?: (id: string | number) => void;
+}
+export interface CardPromotionProps {
+    id: string | number;
+    logo?: string;
+    imageUrl?: string;
+    title?: string;
+    className?: string;
+    isFavorite?: boolean;
+    oldPrice?: string | number;
+    newPrice?: string | number;
+}

package/dist/components/core/carousel/promotion/ui/CarouselPromotion.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import CardPromotion from "../../../card/promotion/CardPromotion.svelte";
+  import type { CarouselPromotionProps } from "../../types.js";
+  import Button from "../../../../ui/button/button.svelte";
+  import CarouselSlot from "../../../panel/CarouselSlot.svelte";
+  import { t } from "../../../../../i18n";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import { ArrowRight02Icon } from "@hugeicons/core-free-icons";
+
+  const {
+    title,
+    items,
+    isButtonPreviousAndNext = true,
+    buttonPreviousAndNextClass = "",
+    containerClass = "",
+    onButtonViewAll,
+  }: CarouselPromotionProps = $props();
+</script>
+
+<div class="w-full flex justify-center">
+  <div class="w-[95%] p-2 rounded-xl {containerClass}">
+    <div class="ml-10 flex flex-col gap-1">
+      <div class="flex justify-between">
+        <div class="text-xl">{title ?? $t("label.promotion")}</div>
+        {#if onButtonViewAll}
+          <div>
+            <Button
+              variant="ghost"
+              size="sm"
+              class="flex items-center gap-0.5"
+              onclick={onButtonViewAll}
+            >
+              {$t("label.view.full")}
+              <HugeiconsIcon icon={ArrowRight02Icon} />
+            </Button>
+          </div>
+        {/if}
+      </div>
+    </div>
+    <CarouselSlot
+      isBorderBottom={false}
+      {isButtonPreviousAndNext}
+      {buttonPreviousAndNextClass}
+      containerClass="w-full"
+    >
+      {#each items as item (item.id)}
+        <div class="mx-2">
+          <CardPromotion {...item} />
+        </div>
+      {/each}
+    </CarouselSlot>
+  </div>
+</div>

package/dist/components/core/carousel/promotion/ui/CarouselPromotion.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CarouselPromotionProps } from "../../types.js";
+declare const CarouselPromotion: import("svelte").Component<CarouselPromotionProps, {}, "">;
+type CarouselPromotion = ReturnType<typeof CarouselPromotion>;
+export default CarouselPromotion;

package/dist/components/core/carousel/shared/ui/SimpleBadgeCarousel.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import * as Carousel from "../../../../ui/carousel/index.js";
+  import type { SimpleBadgeCarouselProps } from "../../types.js";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import CarouselSlot from "../../../panel/CarouselSlot.svelte";
+
+  const {
+    items,
+    imageClass,
+    iconClass,
+    labelClass,
+    activeClass,
+    valueActive,
+    orientation = "horizontal",
+    isBorderItem = true,
+    isBorderBottom = true,
+    isButtonPreviousAndNext = true,
+    buttonPreviousAndNextClass = "",
+  }: SimpleBadgeCarouselProps = $props();
+
+  const DEFAULT_IMG_OR_ICON_CLASS = "size-5 rounded-lg";
+</script>
+
+<CarouselSlot
+  {isBorderBottom}
+  {isButtonPreviousAndNext}
+  {buttonPreviousAndNextClass}
+>
+  {#each items as item (item.value)}
+    <Carousel.Item
+      onclick={() => item.onClick?.(item.value)}
+      class={`
+          flex cursor-pointer items-center justify-center gap-1 basis-auto mx-3 pl-0
+          ${isBorderItem ? "border border-solid border-gray-300 rounded-lg" : ""} 
+          ${item.value === valueActive ? activeClass : ""}`}
+    >
+      <div
+        class={`
+              flex gap-1 mx-2 p-0.5 justify-center items-center
+               ${orientation === "horizontal" ? "flex-row" : "flex-col"}
+          `}
+      >
+        {#if item.image}
+          <img
+            src={item.image}
+            alt={item.label}
+            class={imageClass || DEFAULT_IMG_OR_ICON_CLASS}
+          />
+        {:else if item.icon}
+          <HugeiconsIcon
+            icon={item.icon}
+            class={iconClass || DEFAULT_IMG_OR_ICON_CLASS}
+          />
+        {/if}
+        <div class={`${labelClass}`}>{item.label}</div>
+      </div>
+    </Carousel.Item>
+  {/each}
+</CarouselSlot>

package/dist/components/core/carousel/shared/ui/SimpleBadgeCarousel.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SimpleBadgeCarouselProps } from "../../types.js";
+declare const SimpleBadgeCarousel: import("svelte").Component<SimpleBadgeCarouselProps, {}, "">;
+type SimpleBadgeCarousel = ReturnType<typeof SimpleBadgeCarousel>;
+export default SimpleBadgeCarousel;

package/dist/components/core/carousel/types.d.ts

@@ -0,0 +1,34 @@
+import type { IconSvgElement } from "@hugeicons/svelte";
+import type { CardPromotionProps } from "../card/types";
+export interface ItemCarousel {
+    value: string;
+    label: string;
+    image?: string;
+    link?: string;
+    icon?: IconSvgElement;
+    isActive?: boolean;
+    onClick?: (value: string) => void;
+}
+export interface SimpleBadgeCarouselProps {
+    items: ItemCarousel[];
+    orientation?: "horizontal" | "vertical";
+    imageClass?: string;
+    iconClass?: string;
+    labelClass?: string;
+    activeClass?: string;
+    valueActive?: string;
+    isBorderItem?: boolean;
+    isBorderBottom?: boolean;
+    isButtonPreviousAndNext?: boolean;
+    buttonPreviousAndNextClass?: string;
+}
+export interface CarouselPromotionProps {
+    title?: string;
+    description?: string;
+    items: CardPromotionProps[];
+    isBorderBottom?: boolean;
+    isButtonPreviousAndNext?: boolean;
+    buttonPreviousAndNextClass?: string;
+    containerClass?: string;
+    onButtonViewAll?: () => void;
+}

package/dist/components/core/datatable/ui/DataTableCore.svelte

@@ -28,11 +28,11 @@
     import DataTableListPagination from "./DataTableListPagination.svelte";
 
     /**
-     * Tabela de dados genérica com paginação, ordenação e filtros.
-     * @property {DataTableItem<T>["config"]} config - Definição das colunas
-     * @property {keyof T} columnFilter - Chave para filtro por coluna
-     * @property {Component} actions - Componente de ações por linha
-     * @property {T[]} items - Dados da tabela
+     * Generic data table with pagination, sorting, and filtering.
+     * @property {DataTableItem<T>["config"]} config - Column definitions
+     * @property {keyof T} columnFilter - Key for column filtering
+     * @property {Component} actions - Per-row actions component
+     * @property {T[]} items - Table data
      */
     let { config, columnFilter, actions, items = [] }: DataTableItem<T> = $props();
 

package/dist/components/core/form/ui/input-code-otp.svelte

@@ -4,7 +4,7 @@
   import { Label } from "../../../ui/label";
   import { t } from "../../../../i18n";
 
-  /** Campo de input para código OTP com caixas configuráveis. */
+  /** OTP code input field with configurable boxes. */
   let {
     label,
     isLabel,
@@ -13,9 +13,9 @@
     separator = true,
     value = $bindable(""),
   }: InputLabelProps & {
-    /** Quantidade de caixas do código OTP. Padrão: 6 */
+    /** Number of OTP code boxes. Default: 6 */
     length?: number;
-    /** Exibir separador entre os grupos. Padrão: true */
+    /** Show separator between groups. Default: true */
     separator?: boolean;
   } = $props();
 

package/dist/components/core/form/ui/input-code-otp.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { InputLabelProps } from "../data/InputLabel.svelte";
 type $$ComponentProps = InputLabelProps & {
-    /** Quantidade de caixas do código OTP. Padrão: 6 */
+    /** Number of OTP code boxes. Default: 6 */
     length?: number;
-    /** Exibir separador entre os grupos. Padrão: true */
+    /** Show separator between groups. Default: true */
     separator?: boolean;
 };
 declare const InputCodeOtp: import("svelte").Component<$$ComponentProps, {}, "value">;

package/dist/components/core/form/ui/input-email-or-phone.svelte

@@ -3,7 +3,7 @@
   import InputBase from "./input-base.svelte";
   import { t } from "../../../../i18n";
 
-  /** Campo de input para email com ícone e label. */
+  /** Email or phone input field with icon and label. */
   let {
     label,
     placeholder,

package/dist/components/core/form/ui/input-email.svelte

@@ -3,7 +3,7 @@
   import InputBase from "./input-base.svelte";
   import { t } from "../../../../i18n";
 
-  /** Campo de input para email com ícone e label. */
+  /** Email input field with icon and label. */
   let {
     label,
     placeholder,

package/dist/components/core/form/ui/input-password-confirm.svelte

@@ -3,7 +3,7 @@
   import InputBase from "./input-base.svelte";
   import { t } from "../../../../i18n";
 
-  /** Campo de input para confirmação de senha com ícone e label. */
+  /** Password confirmation input field with icon and label. */
   let {
     label,
     placeholder,

package/dist/components/core/form/ui/input-password.svelte

@@ -3,7 +3,7 @@
   import InputBase from "./input-base.svelte";
   import { t } from "../../../../i18n";
 
-  /** Campo de input para senha com ícone e label. */
+  /** Password input field with icon and label. */
   let {
     label,
     placeholder,

package/dist/components/core/form/ui/input-phone.svelte

@@ -4,7 +4,7 @@
   import { Label } from "../../../ui/label";
   import { t } from "../../../../i18n";
 
-  /** Campo de input para telefone com ícone e label. */
+  /** Phone input field with icon and label. */
   let {
     label,
     isLabel,

package/dist/components/core/form/ui/input-username.svelte

@@ -3,7 +3,7 @@
   import InputBase from "./input-base.svelte";
   import { t } from "../../../../i18n";
 
-  /** Campo de input para nome de usuário com ícone e label. */
+  /** Username input field with icon and label. */
   let {
     label,
     placeholder,
@@ -13,7 +13,7 @@
 </script>
 
 <InputBase
-  label={label || $t("input.usename.label")}
+  label={label || $t("input.username.label")}
   placeholder={placeholder || $t("input.username.placeholder")}
   isLabel
   isIcon

package/dist/components/core/nav/data/nav-menu-sidebar.d.ts

@@ -1,21 +1,21 @@
 import type { IconSvgElement } from "@hugeicons/svelte";
-export interface GroupMenuSidebar {
+export interface GroupMenuSidebarProps {
     name: string;
 }
-export interface SubMenuSidebar {
+export interface SubMenuSidebarProps {
     title: string;
     url: string;
     icon: IconSvgElement;
     isActive?: boolean;
 }
-export interface NavMenuSidebar {
+export interface NavMenuSidebarProps {
     title: string;
     url?: string;
     icon: IconSvgElement;
     isActive?: boolean;
-    group?: GroupMenuSidebar;
+    group?: GroupMenuSidebarProps;
 }
-export interface NavMenuAndSubmenuSidebar extends NavMenuSidebar {
-    submenus?: SubMenuSidebar[];
+export interface NavMenuAndSubmenuSidebarProps extends NavMenuSidebarProps {
+    submenus?: SubMenuSidebarProps[];
 }
-export type NavMenuItem = NavMenuSidebar | NavMenuAndSubmenuSidebar;
+export type NavMenuItem = NavMenuSidebarProps | NavMenuAndSubmenuSidebarProps;

package/dist/components/core/nav/data/nav-menu.d.ts

@@ -0,0 +1,31 @@
+import type { IconSvgElement } from "@hugeicons/svelte";
+export interface NavMenuLogoProps {
+    img?: string;
+    label: string;
+    className?: string;
+    onclick?: () => void;
+}
+export interface NavMenuLinksProps {
+    url?: string;
+    label: string;
+    icon?: IconSvgElement;
+    onclick?: () => void;
+}
+export interface NavMenuActionsProps {
+    url?: string;
+    label: string;
+    type?: 'BUTTON' | 'LINK';
+    className?: string;
+    icon?: IconSvgElement;
+    onclick?: () => void;
+}
+export interface NavMenuProps {
+    linkClass?: string;
+    buttonClass?: string;
+    logo?: NavMenuLogoProps;
+    links: NavMenuLinksProps[];
+    actions: NavMenuActionsProps[];
+    align?: 'LINK_SEPARATED_ACTIONS' | 'LINK_INTO_ACTIONS';
+    onclickButtonLogin?: () => void;
+    onclickButtonRegister?: () => void;
+}

package/dist/components/core/nav/data/nav-user-sidebar.d.ts

@@ -1,5 +1,5 @@
 import type { IconSvgElement } from "@hugeicons/svelte";
-export interface NavUserSidebarItem {
+export interface NavUserSidebarProps {
     user: {
         name: string;
         email: string;

package/dist/components/core/nav/ui/menu-links.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+    import { HugeiconsIcon } from "@hugeicons/svelte";
+    import type { NavMenuLinksProps } from "../data/nav-menu";
+    
+    type Props = {
+        links: NavMenuLinksProps[];
+        linkClass?: string;
+        groupClass?: string;
+        orientation?: "horizontal" | "vertical";
+    };
+
+    let { links, linkClass, groupClass, orientation }: Props = $props();        
+</script>
+    <ul class={`flex ${orientation === "vertical" ? "flex-col" : "items-center"}  gap-2 md:gap-5 lg:gap-15 ${groupClass}`}>
+        {#each links as item (item.label)}
+            <li>
+                <a
+                    class={`flex items-center gap-1 ${linkClass}`}
+                    href={item.url || "#"}
+                >
+                    {#if item.icon}
+                        <HugeiconsIcon icon={item.icon} size={15} />
+                    {/if}
+                    {item.label}
+                </a>
+            </li>
+        {/each}
+    </ul>

package/dist/components/core/nav/ui/menu-links.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { NavMenuLinksProps } from "../data/nav-menu";
+type Props = {
+    links: NavMenuLinksProps[];
+    linkClass?: string;
+    groupClass?: string;
+    orientation?: "horizontal" | "vertical";
+};
+declare const MenuLinks: import("svelte").Component<Props, {}, "">;
+type MenuLinks = ReturnType<typeof MenuLinks>;
+export default MenuLinks;

package/dist/components/core/nav/ui/mobile/nav-menu-drawer.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+    import * as Drawer from "../../../../ui/drawer/index.js";
+    import { Button } from "../../../../ui/button/index.js";
+    import type { NavMenuLinksProps } from "../../data/nav-menu";
+    import { buttonVariants } from "../../../../ui/button/index.js";
+    import { cn } from "../../../../../utils.js";
+    import { HugeiconsIcon } from "@hugeicons/svelte";
+    import { Login03Icon, Menu, User03Icon } from "@hugeicons/core-free-icons";
+    import MenuLinks from "../menu-links.svelte";
+    import LightSwitch from "../../../../ui/light-switch/light-switch.svelte";
+    import LanguageSwitcher from "../../../../ui/language-switcher/language-switcher.svelte";
+    import { t } from "../../../../../i18n";
+
+    type Props = {
+        links: NavMenuLinksProps[];
+        onclickButtonLogin?: () => void;
+        onclickButtonRegister?: () => void;
+    };
+
+    const { links, onclickButtonLogin, onclickButtonRegister }: Props =
+        $props();
+</script>
+
+<div class="flex flex-wrap gap-2">
+    <Drawer.Root direction="right">
+        <Drawer.Trigger
+            class={cn(buttonVariants({ variant: "outline" }), "capitalize")}
+        >
+            <HugeiconsIcon icon={Menu} />
+        </Drawer.Trigger>
+        <Drawer.Content
+            class="data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]"
+        >
+            <Drawer.Header>
+                <Drawer.Title>{$t("label.menu")}</Drawer.Title>
+                <Drawer.Description>
+                    {$t("label.navigation.text")}
+                </Drawer.Description>
+            </Drawer.Header>
+            <div class="no-scrollbar overflow-y-auto px-4">
+                <nav>
+                    <div class="mt-5 mb-4 font-semibold">{$t("label.navigation")}</div>
+                    <MenuLinks
+                        {links}
+                        groupClass="space-y-3"
+                        orientation="vertical"
+                    />
+                </nav>
+
+                <div class="mt-5">
+                    <div class="mt-5 mb-4 font-semibold">{$t("label.action")}</div>
+                    <section >
+                        {#if onclickButtonRegister}
+                            <Button
+                                variant="outline"
+                                onclick={onclickButtonRegister}
+                            >
+                                <HugeiconsIcon icon={User03Icon} />
+                                {$t("label.register")}
+                            </Button>
+                        {/if}
+                        {#if onclickButtonLogin}
+                            <Button
+                                variant="outline"
+                                onclick={onclickButtonLogin}
+                            >
+                                <HugeiconsIcon icon={Login03Icon} />
+                                {$t("label.login")}
+                            </Button>
+                        {/if}
+                    </section>
+                </div>
+            </div>
+            <Drawer.Footer>
+                <div class="flex justify-center gap-5 py-5">
+                    <LightSwitch />
+                    <LanguageSwitcher />
+                </div>
+                <Drawer.Close class={buttonVariants({ variant: "outline" })}>
+                    {$t("label.close")}
+                </Drawer.Close>
+            </Drawer.Footer>
+        </Drawer.Content>
+    </Drawer.Root>
+</div>

package/dist/components/core/nav/ui/mobile/nav-menu-drawer.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { NavMenuLinksProps } from "../../data/nav-menu";
+type Props = {
+    links: NavMenuLinksProps[];
+    onclickButtonLogin?: () => void;
+    onclickButtonRegister?: () => void;
+};
+declare const NavMenuDrawer: import("svelte").Component<Props, {}, "">;
+type NavMenuDrawer = ReturnType<typeof NavMenuDrawer>;
+export default NavMenuDrawer;

package/dist/components/core/nav/ui/{nav-menu-bottom-bar.svelte → nav-menu-bottom-sidebar.svelte}

@@ -2,13 +2,13 @@
   import * as Sidebar from "../../../ui/sidebar/index.js";
   import type { WithoutChildren } from "../../../../utils.js";
   import type { ComponentProps } from "svelte";
-  import type { NavMenuSidebar } from "../data/nav-menu-sidebar";
+  import type { NavMenuSidebarProps } from "../data/nav-menu-sidebar";
   import { HugeiconsIcon } from "@hugeicons/svelte";
 
   let {
     items,
     ...restProps
-  }: { items?: NavMenuSidebar[] } & WithoutChildren<
+  }: { items?: NavMenuSidebarProps[] } & WithoutChildren<
     ComponentProps<typeof Sidebar.Group>
   > = $props();
 </script>

package/dist/components/core/nav/ui/nav-menu-bottom-sidebar.svelte.d.ts

@@ -0,0 +1,10 @@
+import * as Sidebar from "../../../ui/sidebar/index.js";
+import type { WithoutChildren } from "../../../../utils.js";
+import type { ComponentProps } from "svelte";
+import type { NavMenuSidebarProps } from "../data/nav-menu-sidebar";
+type $$ComponentProps = {
+    items?: NavMenuSidebarProps[];
+} & WithoutChildren<ComponentProps<typeof Sidebar.Group>>;
+declare const NavMenuBottomSidebar: import("svelte").Component<$$ComponentProps, {}, "">;
+type NavMenuBottomSidebar = ReturnType<typeof NavMenuBottomSidebar>;
+export default NavMenuBottomSidebar;

package/dist/components/core/nav/ui/nav-menu-header-sidebar.svelte.d.ts

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    teams: {
+        name: string;
+        logo: any;
+        plan: string;
+    }[];
+};
+declare const NavMenuHeaderSidebar: import("svelte").Component<$$ComponentProps, {}, "">;
+type NavMenuHeaderSidebar = ReturnType<typeof NavMenuHeaderSidebar>;
+export default NavMenuHeaderSidebar;

package/dist/components/core/nav/ui/{nav-menu-bar.svelte → nav-menu-sidebar.svelte}

@@ -1,13 +1,13 @@
-<script lang="ts">
+<script lang="ts">
   /* eslint-disable @typescript-eslint/no-explicit-any */
   import * as Collapsible from "../../../ui/collapsible/index.js";
   import * as Sidebar from "../../../ui/sidebar/index.js";
   import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
   import { HugeiconsIcon } from "@hugeicons/svelte";
   import type {
-    NavMenuAndSubmenuSidebar,
+    NavMenuAndSubmenuSidebarProps,
     NavMenuItem,
-    NavMenuSidebar,
+    NavMenuSidebarProps,
   } from "../data/nav-menu-sidebar";
 
   let {
@@ -16,13 +16,13 @@
     items: NavMenuItem[];
   } = $props();
 
-  // Chave interna para itens sem group; nunca colide com um nome real
-  // porque não é uma string acessível a quem define os itens.
+  // Internal key for items without a group; never collides with a real name
+  // because it's not a string accessible to whoever defines the items.
   const UNGROUPED = Symbol("ungrouped");
 
   function hasSubmenus(
-    item: NavMenuSidebar | NavMenuAndSubmenuSidebar,
-  ): item is NavMenuAndSubmenuSidebar {
+    item: NavMenuSidebarProps | NavMenuAndSubmenuSidebarProps,
+  ): item is NavMenuAndSubmenuSidebarProps {
     return "submenus" in item && Array.isArray(item.submenus);
   }
 

package/dist/components/core/nav/ui/nav-menu-sidebar.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { NavMenuItem } from "../data/nav-menu-sidebar";
+type $$ComponentProps = {
+    items: NavMenuItem[];
+};
+declare const NavMenuSidebar: import("svelte").Component<$$ComponentProps, {}, "">;
+type NavMenuSidebar = ReturnType<typeof NavMenuSidebar>;
+export default NavMenuSidebar;

package/dist/components/core/nav/ui/nav-menu-top-bar-sidebar.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { NavTopBarSidebarItem } from "../data/nav-top-bar-sidebar";
+declare const NavMenuTopBarSidebar: import("svelte").Component<NavTopBarSidebarItem, {}, "">;
+type NavMenuTopBarSidebar = ReturnType<typeof NavMenuTopBarSidebar>;
+export default NavMenuTopBarSidebar;