Add hamburger menu

This commit is contained in:
Jay Trees 2022-02-28 09:48:35 +01:00
parent 2aae469641
commit b5bd5d7530
4 changed files with 114 additions and 52 deletions

View file

@ -215,8 +215,24 @@ p .ui.horizontal.label {
/** /**
* Menu * Menu
*/ */
@media (min-width: 768px) { .pusher .menu.toggle {
.menu.toggle { display: none;
}
.ui.attached.menu.sidebar:not(.tabular) {
border: 0;
}
@media (max-width: 767px) {
.pusher .menu.toggle {
display: block;
}
.pusher > .footer {
display: none;
}
.pusher .menu.attached.desktop {
display: none; display: none;
} }
} }

View file

@ -103,14 +103,6 @@ $(function() {
$('.menu.sidebar').sidebar('show'); $('.menu.sidebar').sidebar('show');
}); });
$(window).resize(function(event) {
if ($(window).width() > 768) {
$('.menu.sidebar').removeClass('vertical sidebar');
} else {
$('.menu.sidebar').addClass('vertical sidebar');
}
});
$(window).trigger('resize');
}); });
/** /**

View file

@ -219,6 +219,12 @@ class Page
<title><?= $this->title ?> - wishthis</title> <title><?= $this->title ?> - wishthis</title>
</head> </head>
<?php
}
public function bodyStart(): void
{
?>
<body> <body>
<?php <?php
} }
@ -255,7 +261,44 @@ class Page
); );
} }
?> ?>
<div class="ui attached stackable vertical menu sidebar"> <div class="ui attached stackable vertical menu sidebar">
<div class="ui container">
<a class="item home" href="/?page=home">
<img src="/src/assets/img/logo.svg" alt="wishthis logo" />
</a>
<a class="item" href="/?page=wishlists">
<i class="list icon"></i>
My lists
</a>
<?php global $options; ?>
<?php if ($options->updateAvailable && $user && 100 === $user->power) { ?>
<a class="item" href="/?page=update">
<i class="upload icon"></i> Update
</a>
<?php } ?>
<?php
foreach ($pagesAccount as $item) {
?>
<a class="item" href="<?= $item['url'] ?>">
<i class="<?= $item['icon'] ?> icon"></i>
<?= $item['text'] ?>
</a>
<?php
}
?>
</div>
<?= $this->footer() ?>
</div>
<div class="pusher">
<div class="ui attached menu desktop">
<div class="ui container"> <div class="ui container">
<a class="item home" href="/?page=home"> <a class="item home" href="/?page=home">
<img src="/src/assets/img/logo.svg" /> <img src="/src/assets/img/logo.svg" />
@ -303,6 +346,7 @@ class Page
</div> </div>
</div> </div>
</div> </div>
<div class="ui attached stackable menu toggle"> <div class="ui attached stackable menu toggle">
<div class="ui container"> <div class="ui container">
<a class="item"> <a class="item">
@ -311,6 +355,7 @@ class Page
</a> </a>
</div> </div>
</div> </div>
<div class="ui hidden divider"></div> <div class="ui hidden divider"></div>
<?php <?php
} }
@ -344,6 +389,13 @@ class Page
</div> </div>
</div> </div>
</div> </div>
<?php
}
public function bodyEnd(): void
{
?>
</div><!-- Pusher -->
</body> </body>
</html> </html>

View file

@ -10,6 +10,7 @@ use wishthis\{Page, User, Wishlist};
$page = new page(__FILE__, 'My lists'); $page = new page(__FILE__, 'My lists');
$page->header(); $page->header();
$page->bodyStart();
$page->navigation(); $page->navigation();
?> ?>
<main> <main>
@ -165,3 +166,4 @@ $page->navigation();
<?php <?php
$page->footer(); $page->footer();
$page->bodyEnd();