Site Builder

Editing: menu-main.php

writable 0666

<?php
/*  menu‑main.php – auto‑loads parts/nav/main.json
    • reads `"color"` key and feeds it to --hamburger
    • backward‑compatible with old array‑only JSON
------------------------------------------------------------------ */

/* ── locate /parts/nav ─────────────────────────────────────────── */
$dir = __DIR__;
for ($i = 0; $i < 8; $i++) {
    if (is_dir($dir . '/parts/nav')) { $base = $dir; break; }
    $up = dirname($dir); if ($up === $dir) break; $dir = $up;
}
if (!isset($base)) return;

/* ── load JSON ─────────────────────────────────────────────────── */
$key  = preg_replace('/^menu-|\.php$/i', '', basename(__FILE__));
$file = $base . '/parts/nav/' . $key . '.json';

$color = '#ff4ecd';   // default neon pink
$list  = [];

if (is_file($file)) {
    $data = json_decode(file_get_contents($file), true) ?? [];
    if (isset($data['items'])) {          // new structure {color,items}
        $color = $data['color'] ?? $color;
        $list  = $data['items'];
    } else {                              // legacy array
        $list  = $data;
    }
}

$list = array_filter($list, fn($i) => !empty($i['active']));
if (!$list) return;

/* prettify link text */
function nice($s) {
    $s = preg_replace('/\.[^.]+$/', '', $s);     // drop extension
    $s = str_replace(['-', '_'], ' ', $s);
    return ucwords($s);
}
?>
<style>
:root{
  --hamburger:<?=htmlspecialchars($color)?>;      /* ⇦ colour from JSON */
  --acc2:#37e6ff;
  --bg :rgba(28,29,39,.85);
  --txt:#e9e9f2;
  --blur:12px;
  --radius:14px;
}
.maimenu{position:fixed;top:1.2rem;right:1.2rem;z-index:1000;font-family:Inter,system-ui,sans-serif}
.maimenu summary{list-style:none;cursor:pointer}
.maimenu summary::-webkit-details-marker{display:none}

.maimenu .toggle{display:flex;flex-direction:column;align-items:center}
.maimenu .toggle .label{font-size:.8rem;padding:.15rem .7rem;border-radius:8px 8px 0 0;
                        background:var(--bg);backdrop-filter:blur(var(--blur));
                        color:var(--txt);letter-spacing:.05em}

/* bars group offset & colour */
.maimenu .toggle .bars{margin-top:6px}
.maimenu .toggle .bars,
.maimenu .toggle .bars:before,
.maimenu .toggle .bars:after{
  content:'';display:block;width:28px;height:2px;border-radius:2px;
  background:var(--hamburger);transition:.4s
}
.maimenu .toggle .bars:before{transform:translateY(-6px)}
.maimenu .toggle .bars:after {transform:translateY( 6px)}

.maimenu[open] .bars{background:transparent}
.maimenu[open] .bars:before{transform:rotate(45deg)}
.maimenu[open] .bars:after {transform:rotate(-45deg)}

.maimenu nav{position:absolute;top:calc(100% + .8rem);right:0;min-width:180px;
             background:var(--bg);backdrop-filter:blur(var(--blur));border-radius:var(--radius);
             padding:1rem 1.4rem;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.maimenu nav a{display:block;color:var(--txt);text-decoration:none;padding:.45rem 0;
               border-bottom:1px solid rgba(255,255,255,.07);transition:color .25s}
.maimenu nav a:last-child{border-bottom:none}
.maimenu nav a:hover{color:var(--acc2)}

@media(max-width:600px){ .maimenu .label{display:none} }
</style>

Site Builder

Editing: menu-main.php

Site Builder