Update

1 files changed, 129 insertions, 0 deletions

diff --git a/includes/pane.inc b/includes/pane.inc
new file mode 100644
index 0000000..6aa7f98
--- /dev/null
+++ b/includes/pane.inc
@@ -0,0 +1,129 @@
+<?php global $isLoggedIn; global $isUserLoggedIn; global $pages; global $navigation; $byColor = getMembersByColor(); ?>
+
+<div id="pane-header-background" style="background-image: linear-gradient(90deg, <?php
+
+$index = 0;
+$list = array_map(function ($i) { return $i["color"]; }, $byColor);
+$length = count($list);
+
+foreach ($list as $color) {
+    $perc = ($index / $length) * 100;
+    echo("#${color}33 $perc%");
+
+    $index++;
+    if ($index < $length) echo(", ");
+}
+
+?>)">
+    <a href="/" id="pane-header" class="login-link-clickable" style="color: white; text-decoration: none; padding: 20px; display: block; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, .25);">
+        <img src="/assets/logo/newlogo.png" alt="" style="width:32px;vertical-align: middle;margin-right:5px;">
+        <span style="vertical-align: middle; font-weight: bold;">Cold Haze</span>
+    </a>
+</div>
+
+<?php if ($isLoggedIn || $isUserLoggedIn): ?>
+    <a onclick="toggleGlobalSearch();" id="login-link" class="login-link-clickable">
+        Search in the website...
+    </a>
+<?php elseif (!$isLoggedIn && !$isUserLoggedIn): ?>
+    <a href="/-/login" id="login-link" class="login-link-clickable">
+        <?php global $_PROFILE; ?>
+        <img alt="" src="/assets/icons/login.svg" style="filter:invert(1);width:24px;vertical-align: middle;">
+        <span style="vertical-align: middle;">Not logged in</span>
+    </a>
+<?php endif; ?>
+
+<?php foreach ($navigation as $id => $item): if (!$item["admin"] || $isLoggedIn): ?>
+
+<div class="pane-group" id="pane-group-<?= $id ?>">
+    <div class="pane-group-title">
+        <img src="<?= $item["icon"] ?>" <?php if ($item["invert"]): ?>class="dropdown-icon"<?php endif; ?> alt="" style="width:24px;vertical-align: middle;">
+        <span style="vertical-align: middle;"><?= $item["name"] ?></span>
+    </div>
+
+    <?php foreach ($item["items"] as $category): ?>
+    <div class="pane-group-category <?= $category["minimal"] ? "pane-group-category-minimal" : "" ?>" <?= $category["minimal"] ? 'style="display: grid; grid-template-columns: repeat(' . count($category["items"]) . ', 1fr); grid-gap: 10px;"' : "" ?>>
+        <?php if (isset($category["name"])): ?>
+        <div class="pane-group-category-title"><?= $category["name"] ?></div>
+        <?php endif; ?>
+        <?php foreach ($category["items"] as $link): ?>
+        <a class="pane-group-item" href="<?= $link["link"] ?>">
+            <img src="<?= $link["icon"] ?>" <?php if ($link["invert"]): ?>class="dropdown-icon"<?php endif; ?> alt="" style="width:24px; border-radius: 5px; vertical-align: middle;">
+            <?php if (!$category["minimal"]): ?><span style="vertical-align: middle;<?= isset($link["stepped"]) ? "color: $link[stepped];" : "" ?>"><?= isset($link["stepped"]) ? "<b>$link[name]</b>" : $link["name"] ?></span><?php endif; ?>
+        </a>
+        <?php endforeach; ?>
+    </div>
+    <?php endforeach; ?>
+</div>
+
+<?php endif; endforeach; ?>
+
+<style>
+
+    .pane-group-category-title {
+        margin-bottom: 5px;
+        font-size: .8em;
+        opacity: .75;
+        padding: 0 5px;
+    }
+
+    .pane-group-category-minimal .pane-group-item {
+        text-align: center;
+    }
+
+    .pane-group-item {
+        display: block;
+        color: white !important;
+        text-decoration: none;
+    }
+
+    .pane-group-category {
+        background: rgba(255, 255, 255, .075);
+        border: 1px solid rgba(255, 255, 255, .1);
+        border-radius: 10px;
+        padding: 10px;
+        margin-top: 10px;
+        margin-bottom: 10px;
+    }
+
+    .pane-group-item {
+        padding: 5px;
+        border-radius: 10px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+    }
+
+    .pane-group-item:hover {
+        background-color: rgba(255, 255, 255, .1);
+    }
+
+    .pane-group-title {
+        opacity: .75;
+        padding: 0 15px;
+        margin-top: 10px;
+    }
+
+    .pane-group {
+        padding: 10px;
+        border-bottom: 1px solid rgba(255, 255, 255, .25);
+    }
+
+    #login-link {
+        text-align: center;
+        padding: 10px;
+        display: block;
+        border-bottom: 1px solid rgba(255, 255, 255, .25);
+    }
+
+    .login-link-clickable {
+        color: white !important;
+        cursor: pointer !important;
+        text-decoration: none !important;
+    }
+
+    .login-link-clickable:hover {
+        background-color: rgba(255, 255, 255, .1);
+    }
+
+</style>
\ No newline at end of file