Toggling sidebars outside of the SidebarProvider

[jordihoven]

Related to: How to Close Sidebar on Item Click

Hi there,

I was toggling sidebars trough a custom Header component. However, simply following the docs and then toggling the open value when an action in my header was clicked:

<script setup lang="ts">
import { ref } from 'vue'
const open = ref(false)
</script>
<template>
  <SidebarProvider :open="open" @update:open="open = $event">
    <!-- ... -->
  </SidebarProvider>
</template>

However, this didn't open the mobile sidebar... So, I jumped into the SidebarProvider and exposed it's toggleSidebar function (defineExpose({ toggleSidebar })). Then, I simply call this function whenever the header action is clicked.

Not sure whether this is a 'clean' approach, or that i'm simply missing the 'correct' way of toggling the sidebar programatically.

For reference, here's the template of one of my views:

<template>
    <SidebarProvider ref="sidebarProviderRef">
        <SidebarInset>
            <HeroesHeader />
            <main>
                <HeroesEditor
                    :documentId="documentId"
                    v-model="documentContent"
                />
            </main>
        </SidebarInset>
        <CommentsSidebar :document-id="documentId"></CommentsSidebar>
    </SidebarProvider>
</template>

Would love to hear your ideas on toggling the sidebar from a custom header component.

-Jordi