PrivateCoffee/wishthis
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add hamburger menu

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/assets/css/default.css
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;
} }
} }

8
src/assets/js/default.js
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');
}); });
/** /**

136
src/classes/page.php
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,64 +261,103 @@ class Page
); );
} }
?> ?>
<div class="ui attached stackable vertical menu sidebar"> <div class="ui attached stackable vertical menu sidebar">
<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" alt="wishthis logo" />
</a> </a>
<a class="item" href="/?page=wishlists"> <a class="item" href="/?page=wishlists">
<i class="list icon"></i> <i class="list icon"></i>
My lists My lists
</a> </a>
<div class="right menu"> <?php global $options; ?>
<?php global $options; ?>
<?php if ($options->updateAvailable && $user && 100 === $user->power) { ?> <?php if ($options->updateAvailable && $user && 100 === $user->power) { ?>
<a class="item" href="/?page=update"> <a class="item" href="/?page=update">
<i class="upload icon"></i> Update <i class="upload icon"></i> Update
</a> </a>
<?php } ?> <?php } ?>
<?php if (count($pagesAccount) === 1) { ?> <?php
<a class="item" href="<?= $pagesAccount[0]['url'] ?>"> foreach ($pagesAccount as $item) {
<i class="<?= $pagesAccount[0]['icon'] ?> icon"></i> ?>
<?= $pagesAccount[0]['text'] ?> <a class="item" href="<?= $item['url'] ?>">
</a> <i class="<?= $item['icon'] ?> icon"></i>
<?php } elseif (count($pagesAccount) >= 2) { ?> <?= $item['text'] ?>
<div class="ui simple dropdown item"> </a>
<i class="user circle icon"></i> <?php
Account }
<i class="dropdown icon"></i> ?>
<div class="menu">
<?php </div>
if (count($pagesAccount) >= 2) {
foreach ($pagesAccount as $item) { <?= $this->footer() ?>
?> </div>
<a class="item" href="<?= $item['url'] ?>">
<i class="<?= $item['icon'] ?> icon"></i> <div class="pusher">
<?= $item['text'] ?> <div class="ui attached menu desktop">
</a> <div class="ui container">
<?php <a class="item home" href="/?page=home">
<img src="/src/assets/img/logo.svg" />
</a>
<a class="item" href="/?page=wishlists">
<i class="list icon"></i>
My lists
</a>
<div class="right menu">
<?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 if (count($pagesAccount) === 1) { ?>
<a class="item" href="<?= $pagesAccount[0]['url'] ?>">
<i class="<?= $pagesAccount[0]['icon'] ?> icon"></i>
<?= $pagesAccount[0]['text'] ?>
</a>
<?php } elseif (count($pagesAccount) >= 2) { ?>
<div class="ui simple dropdown item">
<i class="user circle icon"></i>
Account
<i class="dropdown icon"></i>
<div class="menu">
<?php
if (count($pagesAccount) >= 2) {
foreach ($pagesAccount as $item) {
?>
<a class="item" href="<?= $item['url'] ?>">
<i class="<?= $item['icon'] ?> icon"></i>
<?= $item['text'] ?>
</a>
<?php
}
} }
} ?>
?> </div>
</div> </div>
</div> <?php } ?>
<?php } ?> </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">
<i class="hamburger icon"></i> <i class="hamburger icon"></i>
Menu Menu
</a> </a>
</div>
</div> </div>
</div>
<div class="ui hidden divider"></div> <div class="ui hidden divider"></div>
<?php <?php
} }
public function footer(): void public function footer(): void
@ -344,6 +389,13 @@ class Page
</div> </div>
</div> </div>
</div> </div>
<?php
}
public function bodyEnd(): void
{
?>
</div><!-- Pusher -->
</body> </body>
</html> </html>

2
src/pages/wishlists.php
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();