initial commit 2

portal/admin/services/dashboard/html/dashboard_content.html

@@ -0,0 +1,36 @@
+
+
+
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-12 col-lg-12">
+            <h3>Dashboard</h3>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-12 col-lg-3 dashboard-card">
+            <div class="card text-center dashboard-card">
+                <div class="card-header">
+                  Featured
+                </div>
+                <div class="card-body">
+                  <h5 class="card-title">Domains</h5>
+                  <p class="card-text">Includes managing your website, emails and more.</p>
+                  <a href="#" id="dsb-domains-link" class="btn btn-primary">Enter</a>
+                </div>
+                <div class="card-footer text-muted"></div>
+            </div>
+        </div> 
+
+        
+
+
+    </div>
+</div>
+
+
+
+
+
+
+

portal/admin/services/dashboard/html/dashboard_content_card.html

@@ -0,0 +1,13 @@
+<div class="col-12 col-lg-3 dashboard-card">
+    <div class="card text-center dashboard-card">
+        <div class="card-header">
+          Featured
+        </div>
+        <div class="card-body">
+          <h5 class="card-title">Domains</h5>
+          <p class="card-text">Includes managing your website, emails and more.</p>
+          <a href="#" id="dsb-domains-link" class="btn btn-primary">Enter</a>
+        </div>
+        <div class="card-footer text-muted"></div>
+    </div>
+</div> 

portal/admin/services/dashboard/html/extension_card.html

@@ -0,0 +1,7 @@
+<div class="card text-center">
+    <div class="card-body">
+      <h5 class="card-title">Card title</h5>
+      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
+      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+    </div>
+  </div>

portal/admin/services/dashboard/html/main_content.html

@@ -0,0 +1,97 @@
+
+
+
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-12 col-lg-12">
+            <h3>Dashboard</h3>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-12 col-lg-3 dashboard-card">
+            <!-- <div class="card dashboard-card" style="width: 100%;">
+                <div class="card-body">
+                  <h5 class="card-title">Domains</h5>
+                  <h6 class="card-subtitle mb-2 text-muted">Manage Domains</h6>
+                  <p class="card-text">Includes managing your website, emails and more.</p>
+                  <a href="#" class="card-link">Enter</a>
+                </div>
+            </div> -->
+            <div class="card text-center dashboard-card">
+                <div class="card-header">
+                  Featured
+                </div>
+                <div class="card-body">
+                  <h5 class="card-title">Domains</h5>
+                  <p class="card-text">Includes managing your website, emails and more.</p>
+                  <a href="#" id="dsb-domains-link" class="btn btn-primary">Enter</a>
+                </div>
+                <div class="card-footer text-muted"></div>
+            </div>
+        </div> 
+
+        <div class="col-12 col-lg-3 dashboard-card">
+            <!-- <div class="card dashboard-card" style="width: 100%;">
+                <div class="card-body">
+                  <h5 class="card-title">Domains</h5>
+                  <h6 class="card-subtitle mb-2 text-muted">Manage Domains</h6>
+                  <p class="card-text">Includes managing your website, emails and more.</p>
+                  <a href="#" class="card-link">Enter</a>
+                </div>
+            </div> -->
+            <div class="card text-center dashboard-card">
+                <!-- <div class="card dashboard-card" style="width: 100%;">
+                    <div class="card-body">
+                      <h5 class="card-title">Analytics</h5>
+                      <h6 class="card-subtitle mb-2 text-muted">Manage Analytics</h6>
+                      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                      <a href="#" class="card-link">Enter</a>
+    
+                    </div>
+                </div> -->
+                <div class="card-header">
+                  Featured
+                </div>
+                <div class="card-body">
+                  <h5 class="card-title">Analytics</h5>
+                  <p class="card-text">Includes managing your website, emails and more.</p>
+                  <a href="#" class="btn btn-primary">Enter</a>
+                </div>
+                <!-- <div class="card-footer text-muted"></div> -->
+            </div>
+        </div>
+
+        <div class="col-12 col-lg-3 mt-3 mt-lg-0 dashboard-card">
+            <div class="card dashboard-card" style="width: 100%;">
+                <div class="card-body">
+                  <h5 class="card-title">Extensions</h5>
+                  <h6 class="card-subtitle mb-2 text-muted">Manage Extensions</h6>
+                  <p class="card-text mb-5"></p>
+                  <a href="#" class="card-link mt-5">Enter</a>
+
+                </div>
+            </div>
+        </div>
+
+        <div class="col-12 col-lg-3 mt-3 mt-lg-0 dashboard-card">
+            <div class="card dashboard-card" style="width: 100%;">
+                <div class="card-body">
+                  <h5 class="card-title">Settings</h5>
+                  <h6 class="card-subtitle mb-2 text-muted">-</h6>
+                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                  <a href="#" class="card-link">Enter</a>
+
+                </div>
+            </div>
+        </div>
+
+
+    </div>
+</div>
+
+
+
+
+
+
+

portal/admin/services/dashboard/html/sidebar.html

@@ -0,0 +1,137 @@
+
+
+<div class="sidebar">
+    <div class="logo-details">
+        <i class='bx bx-user'></i>
+        <span class="logo_name">Cradle2Career</span>
+    </div>
+    <ul class="nav-links">
+        <li>
+            <a href="#">
+                <i class='bx bx-grid-alt' ></i>
+                <span class="link_name">Dashboard</span>
+            </a>
+            <ul class="sub-menu blank">
+                <li><a class="link_name" href="#">Dashboard</a></li>
+            </ul>
+        </li>
+        <li>
+            <div class="iocn-link">
+                <a href="#">
+                    <i class='bx bx-collection' ></i>
+                    <span class="link_name">Domains</span>
+                </a>
+                <i class='bx bxs-chevron-down arrow' ></i>
+            </div>
+            <ul class="sub-menu">
+                <li><a class="link_name" href="#">Domains</a></li>  
+                <li><a href="#">Website</a></li>
+                <li><a href="#">Email</a></li>
+            </ul>
+        </li>
+        <li>
+            <a href="#">
+                <i class='bx bx-pie-chart-alt-2' ></i>
+                <span class="link_name">Conference</span>
+            </a>
+            <ul class="sub-menu blank">
+                <li><a class="link_name" href="#">Conference</a></li>
+            </ul>
+        </li>
+
+
+        <!-- <li>
+            <div class="iocn-link">
+                <a href="#">
+                    <i class='bx bx-book-alt' ></i>
+                    <span class="link_name">Posts</span>
+                </a>
+                <i class='bx bxs-chevron-down arrow' ></i>
+            </div>
+            <ul class="sub-menu">
+                <li><a class="link_name" href="#">Posts</a></li>
+                <li><a href="#">Web Design</a></li>
+                <li><a href="#">Login Form</a></li>
+                <li><a href="#">Card Design</a></li>
+            </ul>
+        </li> -->
+
+        <li>
+            <a href="#">
+                <i class='bx bx-pie-chart-alt-2' ></i>
+                <span class="link_name">Analytics</span>
+            </a>
+            <ul class="sub-menu blank">
+                <li><a class="link_name" href="#">Analytics</a></li>
+            </ul>
+        </li>
+
+
+        <li>
+            <div class="iocn-link">
+                <a href="#">
+                <i class='bx bx-plug' ></i>
+                <span class="link_name">Extensions</span>
+            </a>
+                <i class='bx bxs-chevron-down arrow' ></i>
+            </div>
+            <ul class="sub-menu">
+                <li><a class="link_name" href="#">Extensions</a></li>
+                <li><a href="#">Cards</a></li>
+                <li><a href="#">Forms</a></li>
+                <li><a href="#">Listings</a></li>
+                <li><a href="#">Transactions</a></li>
+            </ul>
+        </li>
+
+        <!-- <li>
+            <a href="#">
+                <i class='bx bx-compass' ></i>
+                <span class="link_name">Explore</span>
+            </a>
+            <ul class="sub-menu blank">
+                <li><a class="link_name" href="#">Explore</a></li>
+            </ul>
+        </li> -->
+
+        <li>
+            <a href="#">
+                <i class='bx bx-cog' ></i>
+                <span class="link_name">Settings</span>
+            </a>
+            <ul class="sub-menu blank">
+                <li><a class="link_name" href="#">Settings</a></li>
+            </ul>
+        </li>
+        <li>
+            <div class="profile-details">
+                <div class="profile-content">
+                    <img src="" class="seethrough" alt="profileImg">
+                </div>
+                <div class="name-job">
+                    <div class="profile_name"></div>
+                    <div class="job">Web Console</div>
+                </div>
+                <i class='bx bx-log-out' ></i>
+            </div>
+        </li>
+    </ul>
+</div>
+<section class="home-section">
+    <div class="home-content sticky">
+        <i class='bx bx-menu' ></i>
+        <span class="text">Welcome</span>
+    </div>
+    <div style="min-height: 1500px;" class="container-fluid content">
+        <div id="inner-content" class="inner-content"></div>
+    </div>
+</section>
+
+
+
+
+
+
+
+
+

portal/admin/services/dashboard/html/sidebar_component1.html

@@ -0,0 +1,14 @@
+<li>
+    <div class="iocn-link">
+        <a id="${sidebar_id1}" href="#">
+        <i class='bx bx-plug' ></i>
+        <span class="link_name">${sidebar_label}</span>
+    </a>
+        <i class='bx bxs-chevron-down arrow' ></i>
+    </div>
+    <ul id="${sidebar_id2}" class="sub-menu">
+        <li><a id="${sidebar_id3}" class="link_name" href="#">${sidebar_label}</a></li>
+    </ul>
+</li>
+
+

portal/admin/services/dashboard/html/sidebar_component2.html

@@ -0,0 +1,11 @@
+<li>
+    <a href="#" id="${sidebar_id1}">
+        <i class='bx bx-line-chart' ></i>
+        <span class="link_name">${sidebar_label}</span>
+    </a>
+    <ul id="${sidebar_id2}" class="sub-menu blank">
+        <li><a id="${sidebar_id3}" class="link_name" href="#">${sidebar_label}</a></li>
+    </ul>
+</li>
+
+

portal/admin/services/dashboard/html/sidebar_component_link.html

@@ -0,0 +1 @@
+<li><a id="${sidebar_id}" href="#">${sidebar_label}</a></li>

portal/admin/services/dashboard/html/sidebar_exstensions.html

@@ -0,0 +1,19 @@
+
+<li>
+    <div class="iocn-link">
+        <a href="#">
+        <i class='bx bx-plug' ></i>
+        <span class="link_name">Extensions</span>
+    </a>
+        <i class='bx bxs-chevron-down arrow' ></i>
+    </div>
+    <ul class="sub-menu">
+        <li><a class="link_name" href="#">Extensions</a></li>
+        <li><a href="#">Cards</a></li>
+        <li><a href="#">Forms</a></li>
+        <li><a href="#">Listings</a></li>
+        <li><a href="#">Transactions</a></li>
+    </ul>
+</li>
+
+

portal/admin/services/dashboard/html/sidebar_footer.html

@@ -0,0 +1,12 @@
+<li>
+    <div class="profile-details">
+        <div class="profile-content">
+            <img src="" class="seethrough" alt="profileImg">
+        </div>
+        <div class="name-job">
+            <div class="profile_name"></div>
+            <div class="job">Web Console</div>
+        </div>
+        <i class='bx bx-log-out' ></i>
+    </div>
+</li>

portal/admin/services/dashboard/html/sidebar_skin.html

@@ -0,0 +1,47 @@
+
+<div class="sidebar">
+    <div class="logo-details">
+        <i class='bx bx-user'></i>
+        <span class="logo_name">${brandlabel}</span>
+    </div>
+    <ul id="sidebar-nav-links" class="nav-links">
+        <li>
+            <a href="#">
+                <i class='bx bx-grid-alt' ></i>
+                <span class="link_name">Dashboard</span>
+            </a>
+            <ul class="sub-menu blank">
+                <li><a class="link_name" href="#">Dashboard</a></li>
+            </ul>
+        </li>
+
+
+        
+
+
+        
+
+    </ul>
+</div>
+<section class="home-section">
+    <div class="home-content sticky">
+        <i class='bx bx-menu' ></i>
+        <span class="text">Welcome</span>
+    </div>
+    <div style="min-height: 1500px;" class="container-fluid content">
+        <div id="inner-content" class="inner-content"></div>
+    </div>
+</section>
+
+
+
+
+
+
+
+
+
+
+
+
+

portal/admin/services/dashboard/js/dashboard.js

@@ -0,0 +1,309 @@
+define(['../../../core/api/appfactory/appfactory2'],function (app) { 
+
+
+function SideBar(){
+    this._props_ = {};
+    this._props_.primary = [];
+    this._props_.secondary = [];
+
+}
+SideBar.prototype = {
+    primary: function(obj){
+        this._props_.primary.push(obj);
+    },
+    secondary: function(obj){
+        this._props_.secondary.push(obj);
+    }
+};
+
+function DashboardLifeCycleContext(){
+    
+    this.sidebar = new SideBar();
+    this._events = [];
+
+
+}
+DashboardLifeCycleContext.prototype = {
+    set: function(afsconfig){
+        this.afsconfig = afsconfig;
+        this._dashboard = afsconfig.configurations.settings[0].dashboard;
+        
+    },
+    addStyleSheet: function(name){
+        var link = document.createElement('link');
+        link.rel = "stylesheet";
+        link.type = "text/css";
+        link.href = `services/${name}/styles/${name}.css`;
+        document.head.appendChild(link);
+    },
+    openClose: function(){
+        let arrow = document.querySelectorAll(".arrow");
+        for (var i = 0; i < arrow.length; i++) {
+            arrow[i].addEventListener("click", (e)=>{
+                let arrowParent = e.target.parentElement.parentElement;//selecting main parent of arrow
+                arrowParent.classList.toggle("showMenu");
+            });
+        }
+        let sidebar = document.querySelector(".sidebar");
+        let sidebarBtn = document.querySelector(".bx-menu");
+        sidebarBtn.addEventListener("click", ()=>{
+            sidebar.classList.toggle("close");
+        }); 
+    },
+    contentEventListeners: function(){
+        $('#dsb-domains-link').on('click', function(e){
+            e.preventDefault();
+            console.log(e);
+        });
+    },
+    buildDashboard: function(dashboardApi){
+        let self = this;
+        self.afsapp = new app({});
+        self.afsapi = dashboardApi;
+        var sidebar_skin = self.afsapi.html.dashboard.sidebar_skin;
+        sidebar_skin = self.sanitizeReplace(sidebar_skin,"brandlabel", self._dashboard['web_console_label'] );
+        let parentFragment = document.createDocumentFragment();
+        let sidebarSkin = self._createNode(sidebar_skin);
+        parentFragment.appendChild(sidebarSkin);
+
+        self.__dashboard(parentFragment);
+        self.__extensions(parentFragment);
+
+        // let node2 = self.afsapp.utils.convertStringToHTMLNode(self.afsapi.html.dashboard.main_content);
+        // document.getElementById('inner-content').appendChild(node2);
+        // self.contentEventListeners();
+
+        // let primary = dashboard_context.sidebar.getPrimary();
+        // self._runprimary(primary,parentFragment);
+
+        self.__settings(parentFragment);
+        self.addStyleSheet("dashboard");
+        document.body.appendChild(parentFragment);
+        setTimeout(() => {
+            self.openClose();
+            for(let i=0; i < self._events.length; i++){
+                self._events[i]();
+            }
+        },500);
+
+    },
+
+
+    __extensions: function(parentFragment){
+        // extensions
+        let self = this;
+        let fragment = document.createDocumentFragment();
+
+        let extensions = [{
+            label: "Exstensions",
+            type: 2,
+            views: [{
+                label: "Events", 
+                click: function(dash){
+                    console.log("Events");
+                }  
+            },{
+                label: "Sponsorships", 
+                click: function(dash){
+                    console.log("Sponsorships");
+                }  
+            },{
+                label: "Forms", 
+                click: function(dash){
+                    console.log("Forms");
+                }  
+            },{
+                label: "Listings", 
+                click: function(dash){
+                    console.log("Listings");
+                }  
+            },{
+                label: "Transactions", 
+                click: function(dash){
+                    console.log("Transactions");
+                }  
+            }]
+        }];
+
+        for(let i=0; i < extensions[0].views.length; i++){
+            let card1 = self.afsapi.html.dashboard.extension_card;
+            cardStr = self.sanitizeReplace(card1,"brandlabel", "" );
+            let card = self._createNode(cardStr);
+            fragment.appendChild(card);
+        }
+
+
+
+        self._runprimary(extensions,parentFragment);
+    },
+    __dashboard: function(parentFragment){
+        let self = this;
+        let dashboard_primary = [{
+            label: "Domains",
+            type: 1,
+            icon: "",
+            click: function(dash){
+                console.log(dash);
+                $('#inner-content').empty();
+                $('#inner-content').append(self.afsapi.html.dashboard.main_content);
+            },
+            views: [
+                {
+                    label: "Website", 
+                    view: null,
+                    id: "gfhgdfg556546", 
+                    click: function(dash){
+                        console.log("Website");
+                    }  
+                },
+                {
+                    label: "Email", 
+                    id: "hgjhdfgfgry6546hfgh", 
+                    view: null,
+                    click: function(dash){
+                        console.log("Email");
+                    } 
+                }
+            ]
+        }];
+
+        self._runprimary(dashboard_primary,parentFragment);
+    },
+    __settings: function(parentFragment){
+        let self = this;
+        let secondary = [{
+            label: "Settings",
+            type: 1,
+            icon: "",
+            view:{
+                    label: "Settings", 
+                    click: function(dash){
+                        // console.log("Settings");
+                        // console.log(dash);
+                    }  
+                }
+        }];
+        self._runprimary(secondary,parentFragment);
+    },
+
+    _runsecondary: function(secondary,parentFragment){
+        let self = this;
+        let id1 = self.makeid(length);
+        let id2 = self.makeid(length);
+        let id3 = self.makeid(length);
+        var template = self.afsapi.html.dashboard.sidebar_component1;
+        template = self.sanitizeReplace(template,"sidebar_label", "Exstesions");
+        template = self.sanitizeReplace(template,"sidebar_id1", id1); 
+        template = self.sanitizeReplace(template,"sidebar_id2", id2); 
+        template = self.sanitizeReplace(template,"sidebar_id3", id3); 
+        let node = self._createNode(template);
+        
+
+        const i = 0;
+        parentFragment.getElementById('sidebar-nav-links').appendChild(node);
+        for(let n=0; n < secondary[i].views.length; n++){
+            let myid = self.makeid(8);
+            self._addListener(secondary[i].views[n].click, myid);
+            let temp = self.afsapi.html.dashboard.sidebar_component_link;
+            temp = self.sanitizeReplace(temp,"sidebar_label", secondary[i].views[n].label);
+            temp = self.sanitizeReplace(temp,"sidebar_id", myid); 
+            let node2 = self._createNode(temp);
+            parentFragment.getElementById(id2).appendChild(node2);
+        }
+
+    },
+
+    _runprimary: function(primary,parentFragment){
+        let self = this;
+        // console.log(self.afsapi.html.dashboard.sidebar_component1);
+        for(let i=0 ; i < primary.length; i++){
+            let length = 12;
+            if(primary[i].views!=undefined){
+                let id1 = self.makeid(length);
+                let id2 = self.makeid(length);
+                let id3 = self.makeid(length);
+                var template = self.afsapi.html.dashboard.sidebar_component1;
+                template = self.sanitizeReplace(template,"sidebar_label", primary[i].label);
+                template = self.sanitizeReplace(template,"sidebar_id1", id1); 
+                template = self.sanitizeReplace(template,"sidebar_id2", id2); 
+                template = self.sanitizeReplace(template,"sidebar_id3", id3); 
+                let node = self._createNode(template);
+                self._addListener(primary[i].click, id1);
+
+                parentFragment.getElementById('sidebar-nav-links').appendChild(node);
+                for(let n=0; n < primary[i].views.length; n++){
+                    let myid = self.makeid(8);
+                    self._addListener(primary[i].views[n].click, myid);
+                    let temp = self.afsapi.html.dashboard.sidebar_component_link;
+                    temp = self.sanitizeReplace(temp,"sidebar_label", primary[i].views[n].label);
+                    temp = self.sanitizeReplace(temp,"sidebar_id", myid); 
+                    let node2 = self._createNode(temp);
+                    parentFragment.getElementById(id2).appendChild(node2);
+                }
+            }else if(primary[i].view!=undefined){
+                let id1 = self.makeid(length);
+                let id2 = self.makeid(length);
+                let id3 = self.makeid(length);
+                self._addListener(primary[i].view.click, id1);
+                self._addListener(primary[i].view.click, id3);
+
+                var template = self.afsapi.html.dashboard.sidebar_component2;
+                template = self.sanitizeReplace(template,"sidebar_id1", id1); 
+                template = self.sanitizeReplace(template,"sidebar_id2", id2); 
+                template = self.sanitizeReplace(template,"sidebar_id3", id3); 
+                template = self.sanitizeReplace(template,"sidebar_label", primary[i].label); 
+                let node = self._createNode(template);
+                parentFragment.getElementById('sidebar-nav-links').appendChild(node);
+            }
+        }
+    },
+
+    sanitizeReplace: function(text, variable, replacement){
+        return text.replaceAll("${"+variable+"}", replacement);
+    },
+    _addListener: function(click_func,id){
+        let self = this;
+        if(click_func!=undefined){
+            self._events.push(function(){
+                $('#'+id).on('click',function(){
+                    if(click_func!=undefined){
+                        click_func(self);
+                    }
+                });
+            });
+        }
+    },
+    _createNode(nodeString){
+        return this.afsapp.utils.convertStringToHTMLNode(nodeString);
+    },
+
+    makeid:function(length) {
+        let result = '';
+        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+        const charactersLength = characters.length;
+        let counter = 0;
+        while (counter < length) {
+          result += characters.charAt(Math.floor(Math.random() * charactersLength));
+          counter += 1;
+        }
+        return "id"+result;
+    }
+};
+
+var dash = null;
+return (function(){
+    if(dash==null){
+        dash = new DashboardLifeCycleContext();
+    }
+    return dash;
+})();
+
+});// end of define
+
+
+
+
+
+
+
+

portal/admin/services/dashboard/styles/dashboard.css

@@ -0,0 +1,302 @@
+
+
+/* Google Fonts Import Link */
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+*{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Poppins', sans-serif;
+}
+.sidebar{
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 260px;
+  background: #11101d;
+  z-index: 100;
+  transition: all 0.5s ease;
+}
+.sidebar.close{
+  width: 78px;
+}
+.sidebar .logo-details{
+  height: 60px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+.sidebar .logo-details i{
+  font-size: 30px;
+  color: #fff;
+  height: 50px;
+  min-width: 78px;
+  text-align: center;
+  line-height: 50px;
+}
+.sidebar .logo-details .logo_name{
+  font-size: 18px;
+  color: #fff;
+  font-weight: 600;
+  transition: 0.3s ease;
+  transition-delay: 0.1s;
+}
+.sidebar.close .logo-details .logo_name{
+  transition-delay: 0s;
+  opacity: 0;
+  pointer-events: none;
+}
+.sidebar .nav-links{
+  height: 100%;
+  padding: 30px 0 150px 0;
+  overflow: auto;
+}
+.sidebar.close .nav-links{
+  overflow: visible;
+}
+.sidebar .nav-links::-webkit-scrollbar{
+  display: none;
+}
+.sidebar .nav-links li{
+  position: relative;
+  list-style: none;
+  transition: all 0.4s ease;
+}
+.sidebar .nav-links li:hover{
+  background: #1d1b31;
+}
+.sidebar .nav-links li .iocn-link{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.sidebar.close .nav-links li .iocn-link{
+  display: block
+}
+.sidebar .nav-links li i{
+  height: 50px;
+  min-width: 78px;
+  text-align: center;
+  line-height: 50px;
+  color: #fff;
+  font-size: 20px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+.sidebar .nav-links li.showMenu i.arrow{
+  transform: rotate(-180deg);
+}
+.sidebar.close .nav-links i.arrow{
+  display: none;
+}
+.sidebar .nav-links li a{
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+}
+.sidebar .nav-links li a .link_name{
+  font-size: 18px;
+  font-weight: 400;
+  color: #fff;
+  transition: all 0.4s ease;
+}
+.sidebar.close .nav-links li a .link_name{
+  opacity: 0;
+  pointer-events: none;
+}
+.sidebar .nav-links li .sub-menu{
+  padding: 6px 6px 14px 80px;
+  margin-top: -10px;
+  background: #1d1b31;
+  display: none;
+}
+.sidebar .nav-links li.showMenu .sub-menu{
+  display: block;
+}
+.sidebar .nav-links li .sub-menu a{
+  color: #fff;
+  font-size: 15px;
+  padding: 5px 0;
+  white-space: nowrap;
+  opacity: 0.6;
+  transition: all 0.3s ease;
+}
+.sidebar .nav-links li .sub-menu a:hover{
+  opacity: 1;
+}
+.sidebar.close .nav-links li .sub-menu{
+  position: absolute;
+  left: 100%;
+  top: -10px;
+  margin-top: 0;
+  padding: 10px 20px;
+  border-radius: 0 6px 6px 0;
+  opacity: 0;
+  display: block;
+  pointer-events: none;
+  transition: 0s;
+}
+.sidebar.close .nav-links li:hover .sub-menu{
+  top: 0;
+  opacity: 1;
+  pointer-events: auto;
+  transition: all 0.4s ease;
+}
+.sidebar .nav-links li .sub-menu .link_name{
+  display: none;
+}
+.sidebar.close .nav-links li .sub-menu .link_name{
+  font-size: 18px;
+  opacity: 1;
+  display: block;
+}
+.sidebar .nav-links li .sub-menu.blank{
+  opacity: 1;
+  pointer-events: auto;
+  padding: 3px 20px 6px 16px;
+  opacity: 0;
+  pointer-events: none;
+}
+.sidebar .nav-links li:hover .sub-menu.blank{
+  top: 50%;
+  transform: translateY(-50%);
+}
+.sidebar .profile-details{
+  position: fixed;
+  bottom: 0;
+  width: 260px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #1d1b31;
+  padding: 12px 0;
+  transition: all 0.5s ease;
+}
+.sidebar.close .profile-details{
+  background: none;
+}
+.sidebar.close .profile-details{
+  width: 78px;
+}
+.sidebar .profile-details .profile-content{
+  display: flex;
+  align-items: center;
+}
+.sidebar .profile-details img{
+  height: 52px;
+  width: 52px;
+  object-fit: cover;
+  border-radius: 16px;
+  margin: 0 14px 0 12px;
+  background: #1d1b31;
+  transition: all 0.5s ease;
+}
+.sidebar.close .profile-details img{
+  padding: 10px;
+}
+.sidebar .profile-details .profile_name,
+.sidebar .profile-details .job{
+  color: #fff;
+  font-size: 18px;
+  font-weight: 500;
+  white-space: nowrap;
+}
+.sidebar.close .profile-details i,
+.sidebar.close .profile-details .profile_name,
+.sidebar.close .profile-details .job{
+  display: none;
+}
+.sidebar .profile-details .job{
+  font-size: 12px;
+}
+.home-section{
+  position: relative;
+  height: 100vh;
+  left: 260px;
+  width: calc(100% - 260px);
+  transition: all 0.5s ease;
+}
+.sidebar.close ~ .home-section{
+  left: 78px;
+  width: calc(100% - 78px);
+}
+.home-section .home-content{
+  height: 60px;
+  display: flex;
+  align-items: center;
+}
+.home-section .home-content .bx-menu,
+.home-section .home-content .text{
+  color: #11101d;
+  font-size: 35px;
+}
+.home-section .home-content .bx-menu{
+  margin: 0 15px;
+  cursor: pointer;
+}
+.home-section .home-content .text{
+  font-size: 26px;
+  font-weight: 600;
+}
+@media (max-width: 400px) {
+  .sidebar.close .nav-links li .sub-menu{
+    display: none;
+  }
+  .sidebar{
+    width: 78px;
+  }
+  .sidebar.close{
+    width: 0;
+  }
+  .home-section{
+    left: 78px;
+    width: calc(100% - 78px);
+    z-index: 100;
+  }
+  .sidebar.close ~ .home-section{
+    width: 100%;
+    left: 0;
+  }
+}
+
+
+
+/* Style the header */
+.home-content {
+  padding: 10px 16px;
+  /* background: #555;
+  color: #f1f1f1; */
+}
+
+/* Page content */
+.content {
+  padding: 20px;
+  padding-top: 80px;
+  /* background: #E4E9F7; */
+}
+.inner-content {
+  /* background: #555; */
+  width: 100%;
+  min-height: 300px;
+}
+
+/* The sticky class is added to the header with JS when it reaches its scroll position */
+.sticky {
+  z-index: 20;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  background-color: white;
+}
+
+/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
+.sticky + .content {
+  /* padding-top: 102px; */
+}
+
+.seethrough {
+    opacity: 0;
+}
+
+