@datametria/vue-components 1.2.0 → 2.1.0

package/src/components/DatametriaSidebar.vue

@@ -0,0 +1,230 @@
+<template>
+  <aside
+    :class="sidebarClasses"
+    role="complementary"
+    :aria-label="ariaLabel"
+    :aria-expanded="isOpen"
+  >
+    <div class="dm-sidebar__header" v-if="$slots.header">
+      <slot name="header"></slot>
+      <button
+        v-if="collapsible"
+        class="dm-sidebar__toggle"
+        @click="toggle"
+        :aria-label="isOpen ? 'Fechar sidebar' : 'Abrir sidebar'"
+      >
+        <span class="dm-sidebar__toggle-icon" :class="{ 'dm-sidebar__toggle-icon--open': isOpen }"></span>
+      </button>
+    </div>
+
+    <nav class="dm-sidebar__content">
+      <slot></slot>
+    </nav>
+
+    <div class="dm-sidebar__footer" v-if="$slots.footer">
+      <slot name="footer"></slot>
+    </div>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+
+interface Props {
+  position?: 'left' | 'right'
+  variant?: 'light' | 'dark' | 'primary'
+  width?: string
+  collapsible?: boolean
+  defaultOpen?: boolean
+  ariaLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  position: 'left',
+  variant: 'light',
+  width: '280px',
+  collapsible: false,
+  defaultOpen: true,
+  ariaLabel: 'Sidebar navigation'
+})
+
+const emit = defineEmits<{
+  toggle: [isOpen: boolean]
+  open: []
+  close: []
+}>()
+
+const isOpen = ref(props.defaultOpen)
+
+const sidebarClasses = computed(() => [
+  'dm-sidebar',
+  `dm-sidebar--${props.position}`,
+  `dm-sidebar--${props.variant}`,
+  { 'dm-sidebar--collapsed': !isOpen.value && props.collapsible }
+])
+
+const toggle = () => {
+  isOpen.value = !isOpen.value
+  emit('toggle', isOpen.value)
+  if (isOpen.value) {
+    emit('open')
+  } else {
+    emit('close')
+  }
+}
+
+watch(() => props.defaultOpen, (newVal) => {
+  isOpen.value = newVal
+})
+
+defineExpose({ isOpen, toggle })
+</script>
+
+<style scoped>
+.dm-sidebar {
+  height: 100vh;
+  background: var(--dm-neutral-50, #ffffff);
+  border-right: 1px solid var(--dm-neutral-200, #e5e7eb);
+  display: flex;
+  flex-direction: column;
+  transition: width 0.3s ease;
+  width: v-bind(width);
+  position: fixed;
+  top: 0;
+  z-index: 90;
+}
+
+.dm-sidebar--left {
+  left: 0;
+}
+
+.dm-sidebar--right {
+  right: 0;
+  border-right: none;
+  border-left: 1px solid var(--dm-neutral-200, #e5e7eb);
+}
+
+.dm-sidebar--dark {
+  background: var(--dm-neutral-900, #111827);
+  border-color: var(--dm-neutral-800, #1f2937);
+  color: var(--dm-neutral-50, #ffffff);
+}
+
+.dm-sidebar--primary {
+  background: var(--dm-primary, #0072CE);
+  border-color: color-mix(in srgb, var(--dm-primary, #0072CE) 90%, black);
+  color: var(--dm-neutral-50, #ffffff);
+}
+
+.dm-sidebar--collapsed {
+  width: 64px;
+}
+
+.dm-sidebar__header {
+  padding: var(--dm-spacing-4, 1rem);
+  border-bottom: 1px solid var(--dm-neutral-200, #e5e7eb);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 64px;
+}
+
+.dm-sidebar--dark .dm-sidebar__header {
+  border-color: var(--dm-neutral-800, #1f2937);
+}
+
+.dm-sidebar--primary .dm-sidebar__header {
+  border-color: color-mix(in srgb, var(--dm-primary, #0072CE) 90%, black);
+}
+
+.dm-sidebar__toggle {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--dm-radius-md, 0.375rem);
+  transition: background 0.2s ease;
+}
+
+.dm-sidebar__toggle:hover {
+  background: var(--dm-neutral-100, #f3f4f6);
+}
+
+.dm-sidebar--dark .dm-sidebar__toggle:hover {
+  background: var(--dm-neutral-800, #1f2937);
+}
+
+.dm-sidebar__toggle-icon {
+  width: 16px;
+  height: 2px;
+  background: var(--dm-neutral-900, #111827);
+  position: relative;
+  transition: transform 0.3s ease;
+}
+
+.dm-sidebar--dark .dm-sidebar__toggle-icon,
+.dm-sidebar--primary .dm-sidebar__toggle-icon {
+  background: var(--dm-neutral-50, #ffffff);
+}
+
+.dm-sidebar__toggle-icon::before,
+.dm-sidebar__toggle-icon::after {
+  content: '';
+  position: absolute;
+  width: 16px;
+  height: 2px;
+  background: inherit;
+  transition: transform 0.3s ease;
+}
+
+.dm-sidebar__toggle-icon::before {
+  top: -5px;
+}
+
+.dm-sidebar__toggle-icon::after {
+  bottom: -5px;
+}
+
+.dm-sidebar__toggle-icon--open {
+  transform: rotate(180deg);
+}
+
+.dm-sidebar__content {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--dm-spacing-4, 1rem);
+}
+
+.dm-sidebar__footer {
+  padding: var(--dm-spacing-4, 1rem);
+  border-top: 1px solid var(--dm-neutral-200, #e5e7eb);
+}
+
+.dm-sidebar--dark .dm-sidebar__footer {
+  border-color: var(--dm-neutral-800, #1f2937);
+}
+
+.dm-sidebar--primary .dm-sidebar__footer {
+  border-color: color-mix(in srgb, var(--dm-primary, #0072CE) 90%, black);
+}
+
+@media (max-width: 768px) {
+  .dm-sidebar {
+    transform: translateX(0);
+    transition: transform 0.3s ease;
+  }
+
+  .dm-sidebar--left.dm-sidebar--collapsed {
+    transform: translateX(-100%);
+  }
+
+  .dm-sidebar--right.dm-sidebar--collapsed {
+    transform: translateX(100%);
+  }
+}
+</style>