Sidebar QoL changes

app/http/endpoints/api/session.go

@@ -2,7 +2,9 @@ package api
 
 import (
 	"github.com/TicketsBot/GoPanel/app/http/session"
+	"github.com/TicketsBot/GoPanel/rpc"
 	"github.com/TicketsBot/GoPanel/utils"
+	"github.com/TicketsBot/common/premium"
 	"github.com/gin-gonic/gin"
 )
 
@@ -24,8 +26,15 @@ func SessionHandler(ctx *gin.Context) {
 		return
 	}
 
+	tier, err := rpc.PremiumClient.GetTierByUser(userId, false)
+	if err != nil {
+		ctx.JSON(500, utils.ErrorJson(err))
+		return
+	}
+
 	ctx.JSON(200, gin.H{
 		"username":   store.Name,
 		"avatar":     store.Avatar,
+		"whitelabel": tier >= premium.Whitelabel,
 	})
 }

frontend/src/includes/Sidebar.svelte

@@ -3,6 +3,8 @@
 
     export let name;
     export let avatar;
+
+    export let isWhitelabel = false;
 </script>
 
 <div class="sidebar">
@@ -14,12 +16,21 @@
           <span class="sidebar-text">Servers</span>
         </div>
       </Navigate>
+      {#if isWhitelabel}
         <Navigate to="/whitelabel" styles="sidebar-link">
           <div class="sidebar-element">
             <i class="fas fa-edit sidebar-icon"></i>
             <span class="sidebar-text">Whitelabel</span>
           </div>
         </Navigate>
+      {:else}
+        <a href="https://ticketsbot.net/premium" class="sidebar-link">
+          <div class="sidebar-element">
+            <i class="fas fa-edit sidebar-icon"></i>
+            <span class="sidebar-text">Whitelabel</span>
+          </div>
+        </a>
+      {/if}
     </div>
   </div>
   <div class="sidebar-container">
@@ -57,6 +68,10 @@
         margin-bottom: 2%;
     }
 
+    .inner {
+        width: 100%;
+    }
+
     .sidebar-element {
         display: flex;
         align-items: center;
@@ -75,6 +90,9 @@
         max-width: 90%;
     }
 
+    /*
+     * Need global for Navigate link styling
+     */
     :global(.sidebar-link) {
         display: flex;
         align-items: center;
@@ -122,6 +140,8 @@
 
             height: unset;
             min-width: unset;
+
+            overflow: visible !important;
         }
 
         .ref {
@@ -132,21 +152,18 @@
             margin-bottom: unset;
         }
 
+        .inner {
+            display: flex;
+        }
+
         .sidebar-element {
             width: unset;
             padding: 20px 15px;
         }
 
-        .sidebar-link {
+        :global(.sidebar-link) {
             width: unset;
-            margin-left: unset;
+            margin-left: 0 !important;
-        }
-
-        .inner {
-            display: flex;
-            flex-direction: row;
-            width: 100%;
-            height: 100%;
         }
 
         .user-element {

frontend/src/layouts/IndexLayout.svelte

@@ -1,7 +1,7 @@
 <Head/>
 
 <div class="wrapper">
-  <Sidebar name="{name}" avatar="{avatar}"/>
+  <Sidebar name="{name}" avatar="{avatar}" {isWhitelabel} />
   <div class="super-container">
     <LoadingScreen/>
     <NotifyModal/>
@@ -31,6 +31,8 @@
     let name;
     let avatar;
 
+    let isWhitelabel = false;
+
     async function loadData() {
         const res = await axios.get(`${API_URL}/api/session`);
         if (res.status !== 200) {
@@ -44,6 +46,7 @@
 
         name = res.data.username;
         avatar = res.data.avatar;
+        isWhitelabel = res.data.whitelabel;
     }
 
     loadData();