collapsible nav targets on mobile

homepage/cwsvJudo/src/pages/responsive/index.php

@@ -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{
+function getHtmlNavBar($mainNav): string
-    return (
+{
-        '<nav class="nav navbar">'
+    return '<nav class="nav navbar indigo darken-3">' .
-            .'<div class="nav-wrapper">'
+        '<div class="nav-wrapper" style="font-family: Orbitron-Medium, Impact, Charcoal, sans-serif;">' .
-                .'<a href="#!" class="brand-logo">Logo</a>'
+        '<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>'
+        '<a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>' .
-                .'<ul class="right hide-on-med-and-down">'
+        '<ul class="right hide-on-med-and-down">' .
-                    . implode(
+        implode(
-                        array: array_map(
+            separator: "",
-                            callback: fn($nav): string => '<li><a href="'.$mainNav['url'].'" title="'.$mainNav['title'].'"><span>'.$nav['caption'].'</span></a></i>', array: $mainNav
+            array: array_map(
-                        )
+                callback: fn($nav): string => '<li><a href="' .
-                    )
+                    $nav["url"] .
-                .'</ul>'
+                    '" title="' .
-            .'</div>'
+                    $nav["title"] .
-        .'</nav>'
+                    '"><span>' .
-        .''
+                    $nav["caption"] .
-        .'<ul class="sidenav" id="mobile-demo">'
+                    "</span></a></i>",
-            . implode(
+                array: $mainNav,
-                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>" .
-        .'</ul>'
+        "</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">
+        <?php echo getHtmlNavBar($meta["head"]["navTargets"]); ?>
-            <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>
     </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>