Skip to content

Commit

Permalink
Adjust Navbar for >100% Scaling and Mobile
Browse files Browse the repository at this point in the history
  • Loading branch information
@nzxl101
nzxl101 committed Jan 22, 2025
1 parent bf12d41 commit 611e018
Showing 1 changed file with 45 additions and 37 deletions.
82 changes: 45 additions & 37 deletions root/app/www/public/includes/header.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,48 +63,56 @@

<!-- Sidebar Start -->
<div class="sidebar pe-4 pb-3">
<nav class="navbar bg-secondary navbar-dark" style="overflow: hidden;">
<a href="index.php" class="navbar-brand mx-4">
<h3 class="text-primary mb-0"><?= APP_NAME ?></h3>
</a>
<div class="mt-3 mb-4 w-100" align="center"><div id="activeInstanceContainer"><?= $serverList ?></div></div>
<?php if ($_SESSION['authenticated']) { ?>
<div class="navbar-nav w-100">
<a id="menu-overview" onclick="initPage('overview')" style="cursor: pointer;" class="nav-item nav-link active"><i class="fas fa-heartbeat me-2"></i>Overview</a>
<a id="menu-containers" class="nav-item nav-link" onmouseover="$('#menu-containers-label').addClass('text-primary')" onmouseout="containerMenuMouseOut()">
<div style="cursor: pointer;">
<div id="menu-containers-label" onclick="initPage('containers')">
<i class="fas fa-th me-2"></i>Containers
</div>
<div class="w-100 text-white ms-5 conatiner-links" style="display: none;">
<div onclick="openContainerGroups()" style="cursor: pointer;">&middot; Groups</div>
<div onclick="openUpdateOptions()" style="cursor: pointer;">&middot; Updates</div>
</div>
<nav class="navbar bg-secondary navbar-dark absolute h-100 gap-4" style="overflow: auto; overflow-x: hidden; justify-content: space-between;">
<div style="align-self: start;">
<div class="navbar-brand" style="margin: 0;">
<a href="/">
<h3 class="text-primary text-center"><?= APP_NAME ?></h3>
</a>
<div class="w-100 pb-4" align="center">
<div id="activeInstanceContainer"><?= $serverList ?></div>
</div>
</a>
<a id="menu-networks" onclick="initPage('networks')" style="cursor: pointer;" class="nav-item nav-link"><i class="fas fa-network-wired me-2"></i>Networks</a>
<a id="menu-compose" onclick="initPage('compose')" style="cursor: pointer;" class="nav-item nav-link"><i class="fab fa-octopus-deploy me-2"></i>Compose</a>
<a id="menu-orphans" onclick="initPage('orphans')" style="cursor: pointer;" class="nav-item nav-link"><i class="fas fa-th me-2"></i>Orphans</a>
<a id="menu-notification" onclick="initPage('notification')" style="cursor: pointer;" class="nav-item nav-link"><i class="fas fa-comment-dots me-2"></i>Notifications</a>
<a id="menu-settings" onclick="initPage('settings')" style="cursor: pointer;" class="nav-item nav-link"><i class="fas fa-tools me-2"></i>Settings</a>
<a id="menu-tasks" onclick="initPage('tasks')" style="cursor: pointer;" class="nav-item nav-link"><i class="fas fa-tasks me-2"></i>Tasks</a>
<a id="menu-commands" onclick="initPage('commands')" style="cursor: pointer;" class="nav-item nav-link"><i class="fab fa-docker me-2"></i>Commands</a>
<a id="menu-logs" onclick="initPage('logs')" style="cursor: pointer;" class="nav-item nav-link"><i class="fas fa-file-code me-2"></i>Logs</a>
<?php if (USE_AUTH) { ?>
<a onclick="logout()" style="cursor: pointer;" class="nav-item nav-link"><i class="fas fa-sign-out-alt me-2"></i>Logout</a>
</div>
<?php if ($_SESSION['authenticated']) { ?>
<div class="navbar-nav w-100">
<a id="menu-overview" onclick="initPage('overview')" style="cursor: pointer;" class="nav-item nav-link active"><i class="fas fa-heartbeat me-2"></i>Overview</a>
<a id="menu-containers" class="nav-item nav-link" onmouseover="$('#menu-containers-label').addClass('text-primary')" onmouseout="containerMenuMouseOut()">
<div style="cursor: pointer;">
<div id="menu-containers-label" onclick="initPage('containers')">
<i class="fas fa-th me-2"></i>Containers
</div>
<div class="w-100 text-white ms-5 conatiner-links" style="display: none;">
<div onclick="openContainerGroups()" style="cursor: pointer;">&middot; Groups</div>
<div onclick="openUpdateOptions()" style="cursor: pointer;">&middot; Updates</div>
</div>
</div>
</a>
<a id="menu-networks" onclick="initPage('networks')" style="cursor: pointer;" class="nav-item nav-link"><i class="fas fa-network-wired me-2"></i>Networks</a>
<a id="menu-compose" onclick="initPage('compose')" style="cursor: pointer;" class="nav-item nav-link"><i class="fab fa-octopus-deploy me-2"></i>Compose</a>
<a id="menu-orphans" onclick="initPage('orphans')" style="cursor: pointer;" class="nav-item nav-link"><i class="fas fa-th me-2"></i>Orphans</a>
<a id="menu-notification" onclick="initPage('notification')" style="cursor: pointer;" class="nav-item nav-link"><i class="fas fa-comment-dots me-2"></i>Notifications</a>
<a id="menu-settings" onclick="initPage('settings')" style="cursor: pointer;" class="nav-item nav-link"><i class="fas fa-tools me-2"></i>Settings</a>
<a id="menu-tasks" onclick="initPage('tasks')" style="cursor: pointer;" class="nav-item nav-link"><i class="fas fa-tasks me-2"></i>Tasks</a>
<a id="menu-commands" onclick="initPage('commands')" style="cursor: pointer;" class="nav-item nav-link"><i class="fab fa-docker me-2"></i>Commands</a>
<a id="menu-logs" onclick="initPage('logs')" style="cursor: pointer;" class="nav-item nav-link"><i class="fas fa-file-code me-2"></i>Logs</a>
<?php if (USE_AUTH) { ?>
<a onclick="logout()" style="cursor: pointer;" class="nav-item nav-link"><i class="fas fa-sign-out-alt me-2"></i>Logout</a>
<?php } ?>
</div>
<?php } ?>
</div>
<?php } ?>
<div class="navbar-brand w-100 mb-1 text-center">
<a href="https://dockwatch.wiki" target="_blank" title="Visit the <?= APP_NAME ?> wiki"><i class="fab fa-wikipedia-w btn-secondary me-2"></i></a>
<a href="https://github.com/Notifiarr/dockwatch" title="Visit the <?= APP_NAME ?> github" target="_blank"><i class="fab fa-github btn-secondary me-2"></i></a>
<a href="https://notifiarr.com/discord" title="Get some help if the wiki does not cover it" target="_blank"><i class="fab fa-discord btn-secondary"></i></a>
<div style="align-self: end; padding-left: 20px;">
<div class="navbar-brand w-100 text-center" style="transform: scale(1.2);">
<a href="https://dockwatch.wiki" target="_blank" title="Visit the <?= APP_NAME ?> wiki"><i class="fab fa-wikipedia-w btn-secondary me-2"></i></a>
<a href="https://github.com/Notifiarr/dockwatch" title="Visit the <?= APP_NAME ?> github" target="_blank"><i class="fab fa-github btn-secondary me-2"></i></a>
<a href="https://notifiarr.com/discord" title="Get some help if the wiki does not cover it" target="_blank"><i class="fab fa-discord btn-secondary"></i></a>
</div>
<div class="w-100 text-center small-text">
Branch: <?= gitBranch() ?>, Hash: <a href="https://github.com/Notifiarr/dockwatch/commit/<?= gitHash() ?>" target="_blank" class="text-info"><?= substr(gitHash(), 0, 7) ?></a><br>
<span class="text-muted">Theme By <a href="https://htmlcodex.com" target="_blank">HTML Codex</a> | <i class="fas fa-stopwatch" onclick="$('#loadtime-debug').toggle()"></i> | <i title="Clear session" class="fas fa-sign-out-alt" onclick="resetSession()"></i></span>
</div>
</div>
</nav>
<div class="w-100 text-center small-text" style="position: absolute; bottom: 0;">
Branch: <?= gitBranch() ?>, Hash: <a href="https://github.com/Notifiarr/dockwatch/commit/<?= gitHash() ?>" target="_blank" class="text-info"><?= substr(gitHash(), 0, 7) ?></a><br>
<span class="text-muted">Theme By <a href="https://htmlcodex.com" target="_blank">HTML Codex</a> | <i class="fas fa-stopwatch" onclick="$('#loadtime-debug').toggle()"></i> | <i title="Clear session" class="fas fa-sign-out-alt" onclick="resetSession()"></i></span>
</div>
</div>
<!-- Sidebar End -->

Expand Down

0 comments on commit 611e018

Please sign in to comment.