theme.php code:
Code: Select all
<?php global $Wcms ?>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Encoding, browser compatibility, viewport -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Search Engine Optimization (SEO) -->
<meta name="title" content="<?= $Wcms->get('config', 'siteTitle') ?> - <?= $Wcms->page('title') ?>" />
<meta name="apple-mobile-web-app-title" content="<?= $Wcms->get('config', 'siteTitle') ?>">
<meta name="description" content="<?= $Wcms->page('description') ?>">
<meta name="keywords" content="<?= $Wcms->page('keywords') ?>">
<meta property="og:url" content="<?= $this->url() ?>" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="<?= $Wcms->get('config', 'siteTitle') ?>" />
<meta property="og:title" content="<?= $Wcms->page('title') ?>" />
<meta name="twitter:site" content="<?= $this->url() ?>" />
<meta name="twitter:title" content="<?= $Wcms->get('config', 'siteTitle') ?> - <?= $Wcms->page('title') ?>" />
<meta name="twitter:description" content="<?= $Wcms->page('description') ?>" />
<!-- Website and page title -->
<title><?= $Wcms->get('config', 'siteTitle') ?> - <?= $Wcms->page('title') ?></title>
<!-- Admin CSS -->
<?= $Wcms->css() ?>
<!-- Theme CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<!-- Admin settings panel and alerts -->
<?= $Wcms->settings() ?>
<?= $Wcms->alerts() ?>
<nav>
<div class="nav-wrapper">
<a href="<?= $Wcms->url() ?>" class="brand-logo center"><?= $Wcms->get('config', 'siteTitle') ?></a>
</div>
</nav>
<ul class="sidenav left" id="slide-out"><!-- Navigation panel -->
<?= $Wcms->menu() ?>
</ul>
<div class="container">
<a style="position:fixed;top: 1.25rem;right: 1.25rem" href="#" data-target="slide-out" class="sidenav-trigger">Navigation</a><!-- "Sidenav" trigger link -->
<div class="section">
<div class="row">
<?= $Wcms->page('content') ?>
</div>
</div>
</div>
<footer class="page-footer">
<div class="container">
<div class="row">
<div class="col s12 l6">
<?= $Wcms->block('subside') ?>
</div>
<div class="col s12 l6">
<h5>Menu</h5><!-- Tytuł -->
<ul class="footer-menu">
<?= $Wcms->menu() ?>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
<div class="row">
<div class="col s12">
<?= $Wcms->footer() ?>
</div>
</div>
</div>
</div>
</footer>
<!-- Javascript -->
<!-- Admin JavaScript. More JS libraries can be added below -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<?= $Wcms->js() ?>
<script>
$(document).ready(function(){
$('.sidenav').sidenav({edge: 'right'});
});
</script>
</body>
</html>
Code: Select all
<a style="position:fixed; top: 1.25rem; right: 1.25rem" href="#" data-target="slide-out" class="sidenav-trigger">Navigation</a><!-- "Sidenav" trigger link -->
https://materializecss.com/sidenav.html
The slide-out panel does not work on the Blog pages with the Simple Blog plugin installed. Dedicated button does not slide the panel in. On other WCMS pages it works fine, being logged in or not.
Materialize Sidenav javascript part with this "Click to slide in" function:
Code: Select all
/**
* Handle Trigger Click
* @param {Event} e
*/
_handleTriggerClick(e) {
let $trigger = $(e.target).closest('.sidenav-trigger');
if (e.target && $trigger.length) {
let sidenavId = M.getIdFromTrigger($trigger[0]);
let sidenavInstance = document.getElementById(sidenavId).M_Sidenav;
if (sidenavInstance) {
sidenavInstance.open($trigger);
}
e.preventDefault();
}
}
https://materializecss.com/getting-started.html
Someone can help me with this? I am not familiar with javascript programming.