side-panel : refactor nav + toc into single side-panel with view switching
Rename nav.php to side-panel.php to host both navigation and table of contents views. The panel uses data-view attributes to switch between nav and toc content. Footer buttons updated to target the unified panel. TOC button now visible on desktop. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
798123a60a
commit
6c1a8c8850
16 changed files with 103 additions and 115 deletions
|
|
@ -2,8 +2,8 @@
|
|||
position: fixed;
|
||||
bottom: 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
border-bottom: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
[data-template="home"] #main-footer {
|
||||
|
|
@ -20,19 +20,9 @@
|
|||
border-top: 1px solid var(--color-primary);
|
||||
background-color: var(--color-background);
|
||||
}
|
||||
#main-footer .open-nav-wrapper:has([data-open-panel="toc"]) {
|
||||
margin-right: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1100px) {
|
||||
/* On mobile > 1100px, le bouton table des matières n'est pas nécessaire car la TOC est visible */
|
||||
#main-footer .open-nav-wrapper:has([data-open-panel="toc"]) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
#main-footer li:not(.open-nav-wrapper) {
|
||||
#main-footer li:not(.footer-btn-wrapper) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -43,16 +33,16 @@
|
|||
width: calc(100% - var(--unit--vertical) * 2);
|
||||
}
|
||||
|
||||
#main-footer button.open-nav {
|
||||
#main-footer button.plus {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
[data-template="home"] .title-wrapper button.open-nav {
|
||||
[data-template="home"] .title-wrapper button.plus[data-open-panel] {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
#main-footer .open-nav {
|
||||
#main-footer .footer-btn-wrapper button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
outline: none;
|
||||
|
|
@ -80,15 +70,15 @@
|
|||
display: block;
|
||||
}
|
||||
|
||||
#main-footer button.open-nav {
|
||||
#main-footer button.plus {
|
||||
margin-bottom: var(--unit--vertical);
|
||||
}
|
||||
|
||||
[data-template="home"] #main-footer .open-nav-wrapper {
|
||||
[data-template="home"] #main-footer .footer-btn-wrapper {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.open-nav-wrapper {
|
||||
.footer-btn-wrapper {
|
||||
padding: 0;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue