140 lines
4.0 KiB
PHP
140 lines
4.0 KiB
PHP
<?php
|
||
/**
|
||
* Docs Main Open Partial
|
||
* app/Views/docs/partials/docs_main_open.php
|
||
*
|
||
* Opens the main content + right TOC wrapper.
|
||
* Always pair with docs_main_close.php.
|
||
*
|
||
* Variables:
|
||
* $doc_title (string) — page heading (h1)
|
||
* $breadcrumb (string) — section label, e.g. 'Getting Started'
|
||
* $last_updated (string) — e.g. 'May 2025'
|
||
* $author (string) — e.g. 'Core Team'
|
||
* $read_time (string) — e.g. '5 min read'
|
||
* $toc (array) — array of ['label', 'href', 'level'(optional)]
|
||
* level: 'h3' indents it as a sub-item
|
||
*/
|
||
|
||
$doc_title = $doc_title ?? 'Page Title';
|
||
$breadcrumb = $breadcrumb ?? '';
|
||
$last_updated = $last_updated ?? '';
|
||
$author = $author ?? '';
|
||
$read_time = $read_time ?? '';
|
||
$toc = $toc ?? [];
|
||
?>
|
||
|
||
<style>
|
||
/* ─── MAIN CONTENT ───────────────────────── */
|
||
.docs-main {
|
||
flex : 1 1 auto;
|
||
min-width : 0;
|
||
max-width : none;
|
||
width : 0;
|
||
padding : 48px 40px 80px 48px;
|
||
}
|
||
|
||
.docs-main__breadcrumb {
|
||
font-size : 12px;
|
||
color : var(--muted);
|
||
margin-bottom: 12px;
|
||
display : flex;
|
||
align-items: center;
|
||
gap : 6px;
|
||
}
|
||
|
||
.docs-main__breadcrumb a {
|
||
color : var(--muted);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.docs-main__breadcrumb a:hover { color: var(--accent); }
|
||
|
||
.docs-main__meta {
|
||
font-size : 13px;
|
||
color : var(--muted);
|
||
margin-bottom: 32px;
|
||
border-bottom: 1px solid var(--border);
|
||
padding-bottom: 24px;
|
||
display : flex;
|
||
flex-wrap : wrap;
|
||
gap : 16px;
|
||
}
|
||
|
||
/* ─── RIGHT TOC ──────────────────────────── */
|
||
.docs-toc {
|
||
width : var(--toc-w);
|
||
min-width : var(--toc-w);
|
||
max-width : var(--toc-w);
|
||
padding : 56px 20px 48px 16px;
|
||
border-left: 1px solid var(--border);
|
||
background : var(--bg);
|
||
position : sticky;
|
||
top : calc(var(--topbar-h) + 32px);
|
||
height : fit-content;
|
||
max-height : calc(100vh - var(--topbar-h) - 48px);
|
||
overflow-y : auto;
|
||
align-self : flex-start;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.docs-toc__title {
|
||
font-size : 11px;
|
||
font-weight : 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.07em;
|
||
color : var(--muted);
|
||
margin-bottom : 10px;
|
||
}
|
||
|
||
.docs-toc a {
|
||
display : block;
|
||
font-size : 12.5px;
|
||
color : var(--muted);
|
||
text-decoration: none;
|
||
padding : 3px 0;
|
||
transition : color 0.1s;
|
||
}
|
||
|
||
.docs-toc a:hover { color: var(--accent); }
|
||
.docs-toc a.is-sub { padding-left: 10px; font-size: 12px; }
|
||
|
||
@media (max-width: 1100px) {
|
||
.docs-toc { display: none; }
|
||
.docs-main {
|
||
width: auto;
|
||
padding-right: 48px;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<!-- ═══════════════════════════════════════════
|
||
CONTENT AREA + RIGHT TOC
|
||
════════════════════════════════════════════ -->
|
||
<main class="docs-main">
|
||
|
||
<!-- Breadcrumb -->
|
||
<?php if ($breadcrumb): ?>
|
||
<div class="docs-main__breadcrumb">
|
||
<a href="<?= base_url('docs') ?>">Docs</a>
|
||
<span>›</span>
|
||
<span><?= esc($breadcrumb) ?></span>
|
||
<?php if ($doc_title !== $breadcrumb): ?>
|
||
<span>›</span>
|
||
<span><?= esc($doc_title) ?></span>
|
||
<?php endif; ?>
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
<!-- Page title -->
|
||
<h1><?= esc($doc_title) ?></h1>
|
||
|
||
<!-- Meta row -->
|
||
<div class="docs-main__meta">
|
||
<?php if ($last_updated): ?><span>📅 Last updated: <?= esc($last_updated) ?></span><?php endif; ?>
|
||
<?php if ($author): ?><span>✍️ <?= esc($author) ?></span><?php endif; ?>
|
||
<?php if ($read_time): ?><span>⏱ <?= esc($read_time) ?></span><?php endif; ?>
|
||
</div>
|
||
|
||
<!-- ── PAGE CONTENT GOES BELOW THIS LINE ── -->
|