collapsible nav targets on mobile

This commit is contained in:
marko
2025-09-29 05:21:53 +02:00
parent f8e763bb36
commit 0b06883ff9

View File

@@ -10,7 +10,7 @@ if (!is_dir(filename: "{$home}/pages/{$page}")) {
$meta = json_decode(
json: file_get_contents(filename: $home . "/pages/" . $page . "/meta.json"),
associative: true
associative: true,
);
class Section
@@ -60,7 +60,7 @@ class Section
return new Section(
htmls: array_map(function ($file) use ($root_directory) {
return Section::parse_file(path: $root_directory . "/" . $file);
}, $file_names)
}, $file_names),
);
}
}
@@ -112,14 +112,14 @@ class Main
sections: array_map(
callback: fn($file) => Section::create(
file_names: $file,
root_directory: $root_path
root_directory: $root_path,
),
array: $data["sections"]
array: $data["sections"],
),
wallpapers: array_map(
fn($name) => Wallpaper::create($name, $wallpaper_root_path),
array: $data["wallpapers"]["images"]
)
array: $data["wallpapers"]["images"],
),
);
}
}
@@ -141,8 +141,8 @@ class Wallpaper
", ",
array_map(
fn($width) => "{$this->src_dir}/{$width}.{$format} {$width}w",
$widths
)
$widths,
),
);
// return "<img class=\"lazyload\" src=\"{$this->src}\" data-src=\"{$this->data_src}\" alt=\"Wallpaper\">";
return "<img data-sizes=\"auto\" src=\"{$this->src_dir}/mosaic.svg\" data-src=\"{$this->src_dir}/{$widths[0]}.{$format}\" data-srcset=\"{$src_sets}\" class=\"lazyload\" alt=\"Wallpaper\">";
@@ -165,7 +165,7 @@ class Newsboard
hostname: Newsboard::$config["host"],
dbName: Newsboard::$config["name"],
user: Newsboard::$config["user"],
password: $password
password: $password,
);
}
@@ -179,7 +179,7 @@ class Newsboard
"limit" => $limit,
"dbCharset" => Newsboard::$config["dbCharset"],
"outCharset" => Newsboard::$config["outCharset"],
]
],
);
if ($entries !== null) {
foreach ($entries as $entryData) {
@@ -198,12 +198,12 @@ class Newsboard
Newsboard::init(
config: $config["cwsvJudo"]["db"],
password: $secrets["cwsvJudo"]["db"][$config["cwsvJudo"]["db"]["user"]]
password: $secrets["cwsvJudo"]["db"][$config["cwsvJudo"]["db"]["user"]],
);
Kalender::init(
config: $config["cwsvJudo"]["db"],
password: $secrets["cwsvJudo"]["db"][$config["cwsvJudo"]["db"]["user"]]
password: $secrets["cwsvJudo"]["db"][$config["cwsvJudo"]["db"]["user"]],
);
$page_data_root_directory = "$home/pages/$page";
@@ -233,32 +233,46 @@ function mainNavTargets($mainNav)
echo "</ul>";
}
function getHtmlNavBar($mainNav): string{
return (
'<nav class="nav navbar">'
.'<div class="nav-wrapper">'
.'<a href="#!" class="brand-logo">Logo</a>'
.'<a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>'
.'<ul class="right hide-on-med-and-down">'
. implode(
array: array_map(
callback: fn($nav): string => '<li><a href="'.$mainNav['url'].'" title="'.$mainNav['title'].'"><span>'.$nav['caption'].'</span></a></i>', array: $mainNav
)
)
.'</ul>'
.'</div>'
.'</nav>'
.''
.'<ul class="sidenav" id="mobile-demo">'
. implode(
array: array_map(
callback: fn($nav): string => '<li><a href="'.$mainNav['url'].'" title="'.$mainNav['title'].'"><span>'.$nav['caption'].'</span></a></i>', array: $mainNav
)
)
.'</ul>'
);
function getHtmlNavBar($mainNav): string
{
return '<nav class="nav navbar indigo darken-3">' .
'<div class="nav-wrapper" style="font-family: Orbitron-Medium, Impact, Charcoal, sans-serif;">' .
'<a href="#!" class="brand-logo"><span>cwsvJudo</span></a>' .
'<a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>' .
'<ul class="right hide-on-med-and-down">' .
implode(
separator: "",
array: array_map(
callback: fn($nav): string => '<li><a href="' .
$nav["url"] .
'" title="' .
$nav["title"] .
'"><span>' .
$nav["caption"] .
"</span></a></i>",
array: $mainNav,
),
) .
"</ul>" .
"</div>" .
"</nav>" .
"" .
'<ul class="sidenav" id="mobile-demo">' .
implode(
separator: "",
array: array_map(
callback: fn($nav): string => '<li><a href="' .
$nav["url"] .
'" title="' .
$nav["title"] .
'"><span>' .
$nav["caption"] .
"</span></a></i>",
array: $mainNav,
),
) .
"</ul>";
}
?>
<!DOCTYPE html>
<html lang="de">
@@ -290,14 +304,7 @@ function getHtmlNavBar($mainNav): string{
<body>
<header>
<nav class="nav navbar indigo darken-3">
<div class="nav-wrapper" style="font-family: 'Orbitron-Medium', Impact, Charcoal, sans-serif;">
<a href="/" class="brand-logo">
<span>cwsvJudo</span>
</a>
<?php mainNavTargets($meta["head"]["navTargets"]); ?>
</div>
</nav>
<?php echo getHtmlNavBar($meta["head"]["navTargets"]); ?>
</header>
<main style="hyphens: auto;">
@@ -311,7 +318,7 @@ function getHtmlNavBar($mainNav): string{
<a
title="Seite auf HTML 5 Konformität prüfen"
href="http://validator.w3.org/check?uri=<?php echo urlencode(
getCurPagesUrl()
getCurPagesUrl(),
); ?>"
>
Valid html 5
@@ -356,6 +363,11 @@ function getHtmlNavBar($mainNav): string{
// specify options here
}
),
sidenav : M.Sidenav.init(
document.querySelectorAll('.sidenav'), {
// specify options here
}
),
} // end instances
});
</script>