feat: add close button to editor panel
Adds a close button in the top-right corner of the editor panel with double arrow icon. The button closes the panel when clicked. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
0df5d7c6e9
commit
2068e9a1f9
1 changed files with 39 additions and 0 deletions
|
|
@ -27,6 +27,18 @@
|
||||||
</button>
|
</button>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
<button
|
||||||
|
v-if="activeTab.length > 0"
|
||||||
|
type="button"
|
||||||
|
class="close-button"
|
||||||
|
@click="activeTab = ''"
|
||||||
|
title="Fermer le panneau"
|
||||||
|
>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M4.83582 12L11.0429 18.2071L12.4571 16.7929L7.66424 12L12.4571 7.20712L11.0429 5.79291L4.83582 12ZM10.4857 12L16.6928 18.2071L18.107 16.7929L13.3141 12L18.107 7.20712L16.6928 5.79291L10.4857 12Z"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
<div class="tab-content" :class="{ open: activeTab.length > 0 }">
|
<div class="tab-content" :class="{ open: activeTab.length > 0 }">
|
||||||
<div v-if="activeTab === 'document'" class="tab-panel">
|
<div v-if="activeTab === 'document'" class="tab-panel">
|
||||||
<PageSettings />
|
<PageSettings />
|
||||||
|
|
@ -74,6 +86,33 @@ nav {
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.close-button {
|
||||||
|
position: absolute;
|
||||||
|
top: 1rem;
|
||||||
|
right: 1rem;
|
||||||
|
z-index: 2;
|
||||||
|
|
||||||
|
width: 2rem;
|
||||||
|
height: 2rem;
|
||||||
|
padding: 0.25rem;
|
||||||
|
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
color: var(--color-browngray-300);
|
||||||
|
transition: color 0.2s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--color-browngray-100);
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.tab-content {
|
.tab-content {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue