Project 28: Dashboard Sidebar
Vue Engineer
Component Task
Objective
Review day: combine computed properties and named slots — days 4 and 11 — into a collapsible sidebar section.
You're building a dashboard sidebar section.
Task: write a SidebarSection component with an isOpen ref, an icon computed that flips between two glyphs, a named title slot, and a default slot shown only while open.
Component.vue
<!-- SidebarSection.vue -->
<script setup>
import { ref, computed } from 'vue';
const isOpen = ref(true);
const icon = computed(() => (isOpen.value ? '▾' : '▸'));
function toggle() {
isOpen.value = !isOpen.value;
}
</script>
<template>
<button @click="toggle">{{ icon }} <slot name="title" /></button>
<div v-if="isOpen"><slot /></div>
</template>
* Hint: Correct characters turn green, incorrect ones turn red.
Build Output
🟢
Build your component to see the result