Flexbox + show referral

app/http/endpoints/root/index.go

@@ -21,5 +21,7 @@ func IndexHandler(ctx *gin.Context) {
 		"name":         store.Get("name").(string),
 		"baseurl":      config.Conf.Server.BaseUrl,
 		"avatar":       store.Get("avatar").(string),
+		"referralShow": config.Conf.Referral.Show,
+		"referralLink": config.Conf.Referral.Link,
 	})
 }

app/http/endpoints/root/whitelabel.go

@@ -38,5 +38,7 @@ func WhitelabelHandler(ctx *gin.Context) {
 		"name":    store.Get("name").(string),
 		"baseurl": config.Conf.Server.BaseUrl,
 		"avatar":  store.Get("avatar").(string),
+		"referralShow": config.Conf.Referral.Show,
+		"referralLink": config.Conf.Referral.Link,
 	})
 }

config/config.go

@@ -18,6 +18,7 @@ type (
 		Bot             Bot
 		Redis           Redis
 		Cache           Cache
+		Referral        Referral
 	}
 
 	Server struct {
@@ -68,6 +69,11 @@ type (
 	Cache struct {
 		Uri string
 	}
+
+	Referral struct {
+		Show bool
+		Link string
+	}
 )
 
 var (
@@ -113,6 +119,7 @@ func fromEnvvar() {
 	oauthId, _ := strconv.ParseUint(os.Getenv("OAUTH_ID"), 10, 64)
 	redisPort, _ := strconv.Atoi(os.Getenv("REDIS_PORT"))
 	redisThreads, _ := strconv.Atoi(os.Getenv("REDIS_THREADS"))
+	showReferral, _ := strconv.ParseBool(os.Getenv("REFERRAL_SHOW"))
 
 	Conf = Config{
 		Admins:          admins,
@@ -156,5 +163,9 @@ func fromEnvvar() {
 		Cache: Cache{
 			Uri: os.Getenv("CACHE_URI"),
 		},
+		Referral: Referral{
+			Show: showReferral,
+			Link: os.Getenv("REFERRAL_LINK"),
+		},
 	}
 }

envvars.md

@@ -22,3 +22,5 @@
 - REDIS_PASSWORD
 - REDIS_THREADS
 - CACHE_URI
+- REFERRAL_SHOW
+- REFERRAL_LINK

public/static/css/style.css

@@ -26,16 +26,55 @@ html > ::-webkit-scrollbar {
     display: none;
 }
 
-.sidebar {
-    display: inline-flex;
+.csidebar {
+    display: flex;
+    flex-direction: column;
     height: 100%;
     width: 16.6%;
-    background-color: #4C566A;
+    background-color: #272727;
     float: left;
     background-size: cover;
     overflow-x: hidden !important;
 }
 
+.sidebar-element {
+    display: flex;
+    align-items: center;
+    flex-basis: 100%;
+    width: 100%;
+    cursor: pointer;
+    padding: 5px 0 5px 0;
+}
+
+.sidebar-element:hover {
+    background-color: #121212;
+    transition: background-color 0.5s ease;
+}
+
+#referral-image {
+    max-height: 70px;
+    max-width: 90%;
+}
+
+.sidebar-element > a {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    color: white !important;
+    font-size: 18px;
+    margin-left: 2%;
+}
+
+.sidebar-text {
+    margin-left: 4%;
+    display: flex;
+    align-items: center;
+}
+
+#sidebar-nav {
+    flex: 1;
+}
+
 .sidebar-bottom {
     position: absolute !important;
     width: 100%;
@@ -45,6 +84,20 @@ html > ::-webkit-scrollbar {
     color: white !important;
 }
 
+.super-container {
+    display: flex;
+}
+
+.content {
+    width: 100%;
+}
+
+.content-container {
+    display: flex;
+    width: 100%;
+    margin: 4%;
+}
+
 .filterCard {
     cursor: pointer;
 }

public/templates/includes/sidebar.tmpl

@@ -1,33 +1,40 @@
 {{define "sidebar"}}
-  <div class="sidebar" id="sidebar-gradient">
-    <div class="sidebar-wrapper">
-      <ul class="nav">
-        <li class="nav-item sidebar-bottom">
+  <div class="csidebar" id="sidebar-gradient">
+    <div class="sidebar-container" id="sidebar-nav">
+      <div class="sidebar-element">
         <a href="/">
           <i class="fas fa-server"></i>
-            <p>Servers</p>
+          <span class="sidebar-text">Servers</span>
         </a>
-        </li>
-        <li class="nav-item sidebar-bottom" style="top: 60px">
+      </div>
+      <div class="sidebar-element">
         <a href="/whitelabel">
           <i class="fas fa-robot"></i>
-            <p>Whitelabel</p>
+          <span class="sidebar-text">Whitelabel</span>
         </a>
-        </li>
+      </div>
 
-        <li class="nav-item sidebar-bottom" style="bottom: 60px">
+      {{if .referralShow}}
+        <div class="sidebar-element">
+          <a href="{{.referralLink}}" style="justify-content: center; padding: 10px 0 10px 0 !important; margin: 0 !important;">
+            <img src="/assets/img/referral.png" alt="Referral" id="referral-image" />
+          </a>
+        </div>
+      {{end}}
+    </div>
+    <div class="sidebar-container" style="margin-bottom: 2%">
+      <div class="sidebar-element">
         <a href="/logout" onclick="clearLocalStorage();">
-            <i class="fas fa-sign-out-alt"></i>
-            <p>Logout</p>
+          <i class="sidebar-icon fas fa-sign-out-alt"></i>
+          <span class="sidebar-text">Logout</span>
         </a>
-        </li>
-        <li class="nav-item sidebar-bottom" style="bottom: 10px">
-          <a href="#">
+      </div>
+      <div class="sidebar-element">
+        <a>
           <i id="avatar-sidebar"></i>
-            <p>{{.name}}</p>
+          <span class="sidebar-text">{{.name}}</span>
         </a>
-        </li>
-      </ul>
+      </div>
     </div>
   </div>
 {{end}}

public/templates/layouts/main.tmpl

@@ -6,13 +6,14 @@
   <body>
     <div class="wrapper">
       {{template "sidebar" .}}
-      {{template "sidebar" .}}
-      <div class="main-panel">
+      <div class="super-container">
         {{template "loadingscreen" .}}
         <script src="/assets/js/modalbackdrop.js"></script>
         {{template "notifymodal" .}}
+        <div class="content-container">
           {{template "content" .}}
         </div>
       </div>
+    </div>
   </body>
 </html>

public/templates/views/index.tmpl

@@ -1,8 +1,5 @@
 {{define "content"}}
   <div class="content">
-    <div class="container-fluid">
-      <div class="row">
-        <div class="col-md-12">
     <div class="card">
       <div class="card-header">
         <h4 class="card-title">Servers</h4>
@@ -25,9 +22,6 @@
       </div>
     </div>
   </div>
-      </div>
-    </div>
-  </div>
 
   <script>
       async function getPermissionLevel(guildId) {