Merge branch 'razi-jafari' of https://github.com/genzstaking/dashboard …

…into razi-jafari

.yarnrc

@@ -0,0 +1,5 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+yarn-path ".yarn/releases/yarn-1.22.19.cjs"

package.json

@@ -18,10 +18,11 @@
 		"babel-jest": "^29.3.1",
 		"babel-loader": "^9.1.0",
 		"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
-		"css-loader": "^6.7.2",
+		"css-loader": "^6.7.3",
 		"file-loader": "^6.2.0",
 		"html-webpack-plugin": "^5.5.0",
 		"jest": "^29.3.1",
+		"jest-environment-jsdom": "^29.3.1",
 		"postcss": "^8.4.19",
 		"postcss-loader": "^7.0.2",
 		"regenerator-runtime": "^0.13.11",

src/scss/navs/_sidebar.scss → src/components/sidebar.scss

@@ -158,7 +158,7 @@
         padding: 0 1rem;
         font-weight: 800;
         font-size: 0.65rem;
-        @extend .text-uppercase;
+        /* @extend .text-uppercase; */
     }
 
     .sidebar-card {
@@ -474,4 +474,46 @@
             color: fade-out($white, 0.5);
         }
     }
-}
+}
+
+// Global styles for both custom sidebar and topbar compoments
+
+.sidebar{
+  .nav-item {
+    // Customize Dropdown Arrows for Navbar
+    &.dropdown {
+      .dropdown-toggle {
+        &::after {
+          width: 1rem;
+          text-align: center;
+          float: right;
+          vertical-align: 0;
+          border: 0;
+          font-weight: 900;
+          content: '\f105';
+          font-family: 'Font Awesome 5 Free';
+        }
+      }
+      &.show {
+        .dropdown-toggle::after {
+          content: '\f107';
+        }
+      }
+    }
+    // Counter for nav links and nav link image sizing
+    .nav-link {
+      position: relative;
+      .badge-counter {
+        position: absolute;
+        transform: scale(0.7);
+        transform-origin: top right;
+        right: .25rem;
+        margin-top: -.25rem;
+      }
+      .img-profile {
+        height: 2rem;
+        width: 2rem;
+      }
+    }
+  }
+}

src/components/sidebar.ts

@@ -1,47 +1,21 @@
-import { Component, xml, useState } from "@odoo/owl";
-import { Collapse } from "bootstrap";
+import {
+	Component,
+	useState,
+} from "@odoo/owl";
 import { v4 as uuidv4 } from 'uuid';
+import { registry } from "../core/registry";
 
-
-import rocket from "@web/../src/img/logo.svg";
-;
-
+import "./sidebar.xml";
+import "./sidebar.scss";
 
 export class SidebarBrand extends Component {
-	static template = xml`
-	<a 
-		class="sidebar-brand d-flex align-items-center justify-content-center" 
-		href="#/">
-		<div class="sidebar-brand-icon rotate-n-15">
-			<i class="fas fa-laugh-wink"></i>
-		</div>
-		<div class="sidebar-brand-text mx-3">GenZ Staking</div>
-	</a>
-	`;
+	static template = "components.sidebar.brand";
 }
 
 
 export class SidebarCollapse extends Component {
 
-	static template = xml`
-	<li class="nav-item">
-		<a class="nav-link collapsed" 
-			href="#" 
-			data-bs-toggle="collapse"
-			t-att-data-bs-target="sid"
-			aria-expanded="true" 
-			aria-controls="collapseTwo">
-			<t t-slot="title" />
-		</a>
-		<div 
-			t-att-id="id" 
-			class="collapse" 
-			aria-labelledby="headingTwo" 
-			data-parent="#accordionSidebar">
-			<t t-slot="content"/>
-		</div>
-	</li>
-	`;
+	static template = "components.sidebar.collapse";
 
 	id: string;
 	sid: string;
@@ -53,43 +27,24 @@ export class SidebarCollapse extends Component {
 }
 
 export class SidebarDivider extends Component {
-	static template = xml`
-	<hr class="sidebar-divider my-0" />
-	`;
+	static template = "components.sidebar.divider";
 }
 
 export class SidebarHeading extends Component {
-	static template = xml`
-	<div class="sidebar-heading">
-		<t t-slot="default"/>
-	</div>
-	`;
+	static template = "components.sidebar.heading";
 }
 
 export class SidebarLink extends Component {
-	static template = xml`
-	<li class="nav-item active">
-		<a class="nav-link" 
-			t-att-href="props.href">
-			<t t-slot="default"/>
-		</a>
-	</li>
-	`;
-
+	static template = "components.sidebar.link";
 	static props = ['title', 'href'];
-
-	public setup(): void {
-		// Todo check props
-	}
 }
 
 export class SidebarMessage extends Component {
-	static template = xml`
-	<div class="sidebar-card d-none d-lg-flex"><t t-slot="default"/></div>
-	`;
+	static template = "components.sidebar.message";
 }
 
 export class Sidebar extends Component {
+	static template = "components.sidebar";
 	static components = {
 		SidebarBrand,
 		SidebarDivider,
@@ -98,33 +53,19 @@ export class Sidebar extends Component {
 		SidebarHeading,
 		SidebarCollapse,
 	};
+	state:{
+		routers: any[],
+	} = useState({
+		routers: [],
+	});
 
-	static template = xml`
-	<ul id="accordionSidebar"
-		class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion">
-		<SidebarBrand />
-		<SidebarDivider />
-
-		<SidebarLink
-			href="'#/staking/CSC'">
-			<i class="fas fa-fw fa-tachometer-alt"></i>
-			<span>Coinex Smart Coin</span>
-		</SidebarLink>
-		
-		
-		
 
-		<SidebarMessage>
-			<img 
-				class="sidebar-card-illustration mb-2" 
-				src="${rocket} " 
-				alt="Stack with GenZ Staking" />
-			<p class="text-center mb-2"><strong>GenZ Staking</strong> group supports with premium features, partnership program, and more!</p>
-			<a 
-				class="btn btn-success btn-sm" 
-				href="//genzstaking.com/">Stake With Us!</a>
-		</SidebarMessage>
+	public setup(): void {
+		// Load all routs
+		this.state.routers = registry.category('routers').getAll();
+		registry.category('routers').addEventListener("UPDATE", () => {
+			this.state.routers = registry.category('routers').getAll();
+		});
+	}
 
-	</ul>
-	`;
 }

src/components/sidebar.xml

@@ -0,0 +1,94 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="components.sidebar" owl="1">
+        <ul id="accordionSidebar"
+            class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion">
+            <SidebarBrand />
+            <SidebarDivider />
+
+            <t t-foreach="state.routers" t-key="props.id" t-as="router">
+                <t t-foreach="router.props.routes" t-key="route" t-as="page">
+                    <li class="nav-item active">
+                        <a class="nav-link" 
+                            t-att-href="'#' + page.route">
+                            <img 
+                                class="p-1"
+                                width="24px" 
+                                t-att-src="page.logo" />
+                            <spam t-esc="page.title" />
+                        </a>
+                    </li>
+                </t>
+            </t>
+
+            <SidebarMessage>
+                <img 
+                    class="sidebar-card-illustration mb-2" 
+                    src="./img/logo.svg" 
+                    alt="Stack with GenZ Staking" />
+                <p class="text-center mb-2"><strong>GenZ Staking</strong> group supports with premium features, partnership program, and more!</p>
+                <a 
+                    class="btn btn-success btn-sm" 
+                    href="//genzstaking.com/">Stake With Us!</a>
+            </SidebarMessage>
+        </ul>
+    </t>
+
+    <t t-name="components.sidebar.brand" owl="1">
+        <a 
+            class="sidebar-brand d-flex align-items-center justify-content-center" 
+            href="#/">
+            <div class="sidebar-brand-icon rotate-n-15">
+                <i class="fas fa-laugh-wink"></i>
+            </div>
+            <div class="sidebar-brand-text mx-3">GenZ Staking</div>
+        </a>
+    </t>
+
+    <t t-name="components.sidebar.collapse" owl="1">
+        <li class="nav-item">
+            <a class="nav-link collapsed" 
+                href="#" 
+                data-bs-toggle="collapse"
+                t-att-data-bs-target="sid"
+                aria-expanded="true" 
+                aria-controls="collapseTwo">
+                <t t-slot="title" />
+            </a>
+            <div 
+                t-att-id="id" 
+                class="collapse" 
+                aria-labelledby="headingTwo" 
+                data-parent="#accordionSidebar">
+                <t t-slot="content"/>
+            </div>
+        </li>
+    </t>
+
+
+
+    <t t-name="components.sidebar.divider" owl="1">
+        <hr class="sidebar-divider my-0" />
+    </t>
+
+    <t t-name="components.sidebar.heading" owl="1">
+        <div class="sidebar-heading">
+            <t t-slot="default"/>
+        </div>
+    </t>
+
+    <t t-name="components.sidebar.link" owl="1">
+        <li class="nav-item active">
+            <a class="nav-link" 
+                t-att-href="props.href">
+                <t t-slot="default"/>
+            </a>
+        </li>
+    </t>
+
+
+    <t t-name="components.sidebar.message" owl="1">
+        <div class="sidebar-card d-none d-lg-flex"><t t-slot="default"/></div>
+    </t>
+</templates>