fix(admin): topbar and system menu

admin/src/admin/static/templates/pages/dashboard.html

@@ -119,17 +119,22 @@
 			<div class="x_content">
 				<div class="form-group row text-center">
 					<div class="col-md-12 col-sm-4 col-xs-6">
-						<label class="control-label col-xs-12">Background</label>
+						<label class="control-label col-xs-12">
+							Background
+						</label>
+						<p>It will appear in Moodle's (Aules/Aulas) background. We recomend using a grey color.</p>
 						<div id="colorpicker-background" class="demo demo-auto inl-bl colorpicker-background" data-container="#colorpicker-background" data-color="{{data.colours.background}}" data-inline="true"></div>
 						<input id="colorpicker-background-input" type="text" value="{{data.colours.background}}" class="form-control" />
 					</div>
 					<div class="col-md-12 col-sm-4 col-xs-6">
 						<label class="control-label col-xs-12">Primary</label>
+						<p>It will appear in main top bar menú and Moodle's (Aules/Aulas) buttons. We recomend using a corporate color.</p>
 						<div id="colorpicker-primary" class="demo demo-auto inl-bl colorpicker-primary" data-container="#colorpicker-primary" data-color="{{data.colours.primary}}" data-inline="true"></div>
 						<input id="colorpicker-primary-input" type="text" value="{{data.colours.primary}}" class="form-control" />
 					</div>
 					<div class="col-md-12 col-sm-4 col-xs-6">
 						<label class="control-label col-xs-12">Secondary</label>
+						<p>It will appear in some secondary buttons in Moodle. We recommend white, unless corporate color is clear.</p>
 						<div id="colorpicker-secondary" class="demo demo-auto inl-bl colorpicker-secondary" data-container="#colorpicker-secondary" data-color="{{data.colours.secondary}}" data-inline="true"></div>
 						<input id="colorpicker-secondary-input" type="text" value="{{data.colours.secondary}}" class="form-control" />
 					</div>

admin/src/admin/static/templates/sidebar.html

@@ -15,7 +15,20 @@
       <li><a href="/sysadmin/external"><i class="fa fa-external-link"></i> Import</a></li>
       <li><a href="/dashboard"><i class="fa fa-paint-brush"></i> Customization</a></li>
       <li><a href="/legal"><i class="fa fa-legal"></i> Legal</a></li>
+    
+
     </ul>
+
+    {% if current_user.role == 'admin' %}
+      <h3>System Admin</h3>
+      <div class="clearfix"></div>
+      <ul class="nav side-menu">
+        <li><a href="/sysadmin/users"><i class="fa fa-user"></i> SysAdminUsers</span></a></li>
+        <li><a href="/sysadmin/groups"><i class="fa fa-user"></i> SysAdminGroups</span></a></li>
+        <li><a href="/sysadmin/external"><i class="fa fa-external-link"></i> External</a></li>
+      </ul>
+      {% endif %}
+
     <ul class="nav side-menu">
       <li><a href="/about"><i class="fa fa-question"></i> About</span></a>
       </li>

docker/api/src/api/static/_templates/admin.html

@@ -63,6 +63,7 @@
     position: relative;
   }
 
+  /* MEGAMENÚ */
   #header #navbar-menu-apps #menu-apps-btn {
     cursor: pointer;
     position: relative;
@@ -71,7 +72,7 @@
   #header #navbar-menu-apps #menu-apps-btn #dropdownMenuAppsButton {
     cursor: pointer;
     height: 16px;
-    margin-right: 16px;
+    padding: 0px 15px;
   }
 
   #header
@@ -141,15 +142,6 @@
     font-size: 19px;
   }
 
-  #header #navbar-menu-apps .dropdown-menu ul li.app a.app-link .text {
-    text-align: center;
-    margin-top: 4px;
-    height: 26px;
-    font-size: 13px;
-    line-height: 15px;
-    overflow-wrap: anywhere;
-  }
-
   #header #header-left,
   #header .header-left,
   #header #header-right,
@@ -158,6 +150,26 @@
     align-items: center;
   }
 
+  #navbar-menu-apps:hover #dropdownMenuApps {
+    display: block;
+  }
+
+  /* AVATAR IMAGE AND DROPDOWN */
+  #avatarimg {
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  .icon {
+    font-size: 26px;
+    line-height: 1em;
+    width: 40px;
+  }
+
+  .dropdown {
+    left: -115px;
+  }
+
   #navbar-nextcloud #user_avatar .avatardiv img {
     height: 39px;
     width: 39px;
@@ -165,9 +177,33 @@
     margin-right: 10px;
   }
 
-  .avatar>img, .avatardiv>img {
+  /* Dropdown Content (Hidden by Default) */
-    border-radius: 50%;
+  .dropdown-content {
-    flex-shrink: 0;
+    display: none;
+    position: absolute;
+    min-width: 160px;
+    z-index: 1;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 5px;
+    background-color: white;
+  }
+
+  /* Links inside the dropdown */
+  .dropdown-content a {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+  }
+
+  /* Change color of dropdown links on hover */
+  .dropdown-content a:hover {
+    background-color: #ddd;
+  }
+
+  /* Show the dropdown menu on hover */
+  #user_avatar:hover .dropdown-content {
+    display: block;
   }
 </style>
 {% endblock %}
@@ -179,7 +215,7 @@
   </div>
 
   <div id="navbar-nextcloud" class="header-right">
-    <div id="navbar-menu-apps" onclick="openMenu()">
+    <div id="navbar-menu-apps">
       <div id="menu-apps-btn">
         <div
           id="dropdownMenuAppsButton"
@@ -272,7 +308,6 @@
           id="dropdownMenuApps"
           class="dropdown-menu dropdown-menu-right"
           aria-labelledby="dropdownMenuButton"
-          style="display: none"
         >
           <ul id="app-apps">
             {% for item in data.apps_internal %}
@@ -303,28 +338,39 @@
       </div>
     </div>
     <div id="user_avatar">
-      <div class="avatardiv avatardiv-shown">
+      <div id="menu-profile-btn" class="avatardiv avatardiv-shown">
-        <img alt="" width="32" height="32" src="{{ data.user_avatar }}">
+        <div
+          id="dropdownProfileButton"
+          data-toggle="dropdown"
+          aria-haspopup="true"
+          aria-expanded="false"
+        >
+          <img
+            id="avatarimg"
+            alt=""
+            width="32"
+            height="32"
+            src="{{ data.user_avatar }}"
+          />
+        </div>
+        <div class="dropdown">
+          <div class="dropdown-content">
+            <a href="/logout"
+              ><i class="fa fa-sign-out icon"></i
+              ><span class="text">Logout</span></a
+            >
+          </div>
+        </div>
       </div>
     </div>
     <div id="dd-logo">
       <a href="https://xnet-x.net/ca/digital-democratic/" target="_blank">
-        <img src="{{ data.product_logo }}" alt="" style="height: 16px; margin-right: 21px; margin-top: 16px">
+        <img
+          src="{{ data.product_logo }}"
+          alt=""
+          style="height: 16px; margin-right: 21px; margin-top: 16px"
+        />
       </a>
     </div>
   </div>
 </header>
-
-{% block pagescript %}
-  <script>
-    function openMenu(){
-      if ($('#menu-apps-btn').hasClass("open")) {
-        console.log('open')
-        $('#dropdownMenuApps').css('display', 'none')
-      } else {
-        $('#dropdownMenuApps').css('display', 'block')
-        console.log('closed')
-      }
-    }
-  </script>
-{% endblock %}

docker/api/src/api/static/_templates/admin_old.html

@@ -0,0 +1,391 @@
+{% block css %}
+<style>
+  /* Header used classes */
+  header#header {
+    background-color: white !important;
+    box-shadow: 0 2px 4px #00000014;
+    border-bottom: 1px solid #262626;
+    display: inline-flex;
+    top: 0;
+    width: 100%;
+    z-index: 2000;
+    height: 50px;
+    position: fixed;
+    box-sizing: border-box;
+    justify-content: space-between;
+  }
+
+  #nextcloud {
+    padding: 7px 0;
+    padding-left: 86px;
+    position: relative;
+    height: 100%;
+    box-sizing: border-box;
+    opacity: 1;
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    overflow: hidden;
+  }
+
+  a * {
+    cursor: pointer;
+  }
+
+  a {
+    border: 0;
+    color: var(--color-main-text);
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  #theming-preview-logo,
+  #header #nextcloud {
+    padding-left: 64px;
+  }
+
+  #header #header-left,
+  #header .header-left {
+    flex: 1 0;
+    white-space: nowrap;
+    min-width: 0;
+  }
+
+  #header #header-right,
+  #header .header-right {
+    justify-content: flex-end;
+    flex-shrink: 1;
+  }
+
+  #header .header-right > div,
+  #header .header-right > form {
+    height: 100%;
+    position: relative;
+  }
+
+  #header #navbar-menu-apps #menu-apps-btn {
+    cursor: pointer;
+    position: relative;
+  }
+
+  #header #navbar-menu-apps #menu-apps-btn #dropdownMenuAppsButton {
+    cursor: pointer;
+    height: 16px;
+    margin-right: 16px;
+  }
+
+  #header
+    #navbar-menu-apps
+    #menu-apps-btn
+    #dropdownMenuAppsButton
+    #menu-apps-icon {
+    height: 16px;
+    width: 16px;
+  }
+
+  #header div#navbar-menu-apps {
+    display: flex;
+    align-items: center;
+  }
+
+  #header #navbar-menu-apps .dropdown-menu {
+    display: none;
+    position: absolute;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 5px;
+    box-shadow: rgb(0 0 0 / 20%) 0 3px 8px;
+    margin-top: -2px;
+    padding: 10px;
+    max-height: 500px;
+    overflow-y: scroll;
+    z-index: 2000;
+    background-color: white;
+    top: 33px;
+    right: -14px;
+    left: auto;
+  }
+
+  #header #navbar-menu-apps .dropdown-menu  ul {
+    list-style: none;
+    display: grid;
+    flex-wrap: wrap;
+    padding: 15px 2px 0 0;
+    margin-bottom: 0;
+    grid-template-columns: 82px 82px 82px;
+    grid-gap: 12px 2px;
+  }
+
+  #header #user_avatar .dropdown-menu  ul {
+    list-style: none;
+    flex-wrap: wrap;
+    padding: 15px;
+    margin-bottom: 0;
+    right: 0;
+    cursor: pointer;
+  }
+
+  #header #navbar-menu-apps .dropdown-menu ul li.app a.app-link {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: start;
+    text-align: center;
+    color: #262626;
+    text-decoration: none;
+  }
+
+  #header #navbar-menu-apps .dropdown-menu ul li.app a.app-link .icon {
+    width: 40px;
+    height: 40px;
+    background-color: #cc0066;
+    border-radius: 0.25rem;
+    margin-right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #header #navbar-menu-apps .dropdown-menu ul li.app a.app-link .icon i {
+    color: #fff;
+    font-size: 19px;
+  }
+
+  #header #user_avatar .dropdown-menu ul li.logout a.app-logout .text {
+    text-align: center;
+    height: 26px;
+    font-size: 13px;
+    line-height: 15px;
+    padding: 15px 15px 15px 15px;
+    overflow-wrap: anywhere;
+  }
+
+  #header #header-left,
+  #header .header-left,
+  #header #header-right,
+  #header .header-right {
+    display: inline-flex;
+    align-items: center;
+  }
+  #avatarimg {
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  #app-users {
+    /* padding: 15px 15px 15px 15px; */
+    font-size: 13px;    
+  }
+
+  .icon {
+    font-size: 26px;
+    line-height: 1em;
+    width: 40px;
+  }
+
+  #dropdownProfile {
+    left: -115px;
+    top: 40px;
+  }
+
+  #navbar-nextcloud #user_avatar .avatardiv img {
+    height: 39px;
+    width: 39px;
+    margin-top: 5px;
+    margin-right: 10px;
+  }
+
+ 
+</style>
+{% endblock %}
+<header role="banner" id="header">
+  <div id="navbar-logo" class="header-left">
+    <a href="/" id="nextcloud">
+      <img src="{{ data.logo }}" alt="" style="height: 39px" />
+    </a>
+  </div>
+
+  <div id="navbar-nextcloud" class="header-right">
+
+    <div id="navbar-menu-apps" onclick="openMenu()">
+      <div id="menu-apps-btn">
+        <div
+          id="dropdownMenuAppsButton"
+          data-toggle="dropdown"
+          aria-haspopup="true"
+          aria-expanded="false"
+        >
+          <svg
+            id="menu-apps-icon"
+            data-name="Menú Apps"
+            xmlns="http://www.w3.org/2000/svg"
+            width="26"
+            height="26"
+            viewBox="0 0 26 26"
+          >
+            <rect
+              id="Rectángulo_2"
+              data-name="Rectángulo 2"
+              width="6"
+              height="6"
+              fill="#262626"
+            ></rect>
+            <rect
+              id="Rectángulo_1447"
+              data-name="Rectángulo 1447"
+              width="6"
+              height="6"
+              transform="translate(0 10)"
+              fill="#262626"
+            ></rect>
+            <rect
+              id="Rectángulo_1450"
+              data-name="Rectángulo 1450"
+              width="6"
+              height="6"
+              transform="translate(0 20)"
+              fill="#262626"
+            ></rect>
+            <rect
+              id="Rectángulo_1440"
+              data-name="Rectángulo 1440"
+              width="6"
+              height="6"
+              transform="translate(10)"
+              fill="#262626"
+            ></rect>
+            <rect
+              id="Rectángulo_1446"
+              data-name="Rectángulo 1446"
+              width="6"
+              height="6"
+              transform="translate(10 10)"
+              fill="#262626"
+            ></rect>
+            <rect
+              id="Rectángulo_1449"
+              data-name="Rectángulo 1449"
+              width="6"
+              height="6"
+              transform="translate(10 20)"
+              fill="#262626"
+            ></rect>
+            <rect
+              id="Rectángulo_1441"
+              data-name="Rectángulo 1441"
+              width="6"
+              height="6"
+              transform="translate(20)"
+              fill="#262626"
+            ></rect>
+            <rect
+              id="Rectángulo_1445"
+              data-name="Rectángulo 1445"
+              width="6"
+              height="6"
+              transform="translate(20 10)"
+              fill="#262626"
+            ></rect>
+            <rect
+              id="Rectángulo_1448"
+              data-name="Rectángulo 1448"
+              width="6"
+              height="6"
+              transform="translate(20 20)"
+              fill="#262626"
+            ></rect>
+          </svg>
+        </div>
+        <div
+          id="dropdownMenuApps"
+          class="dropdown-menu dropdown-menu-right"
+          aria-labelledby="dropdownMenuButton"
+          style="display: none"
+        >
+          <ul id="app-apps">
+            {% for item in data.apps_internal %}
+            <li class="app {{ item.shorname }}">
+              <a href="{{ item.href }}" class="app-link" target="_blank">
+                <div class="icon {{ item.shorname }}">
+                  <i class="{{ item.icon }}" aria-hidden="true"></i>
+                </div>
+                <div class="text">{{ item.name }}</div>
+              </a>
+            </li>
+            {% endfor %}
+          </ul>
+
+          <ul id="app-external" class="external-links">
+            {% for item in data.apps_external %}
+            <li class="app {{ item.shorname }}">
+              <a href="{{ item.href }}" class="app-link" target="_blank">
+                <div class="icon {{ item.shorname }}">
+                  <i class="{{ item.icon }}" aria-hidden="true"></i>
+                </div>
+                <div class="text">{{ item.name }}</div>
+              </a>
+            </li>
+            {% endfor %}
+          </ul>
+        </div>
+      </div>
+    </div>
+
+
+    <div id="user_avatar" onclick="openAvatar()">
+      <div id="menu-profile-btn" class="avatardiv avatardiv-shown">
+
+        <div
+          id="dropdownProfileButton"
+          data-toggle="dropdown"
+          aria-haspopup="true"
+          aria-expanded="false"
+        >
+          <img id="avatarimg" alt="" width="32" height="32" src="{{ data.user_avatar }}">
+        </div>
+
+        <div
+        id="dropdownProfile"
+        class="dropdown-profile dropdown-profile-right dropdown-menu"
+        aria-labelledby="dropdownProfileButton"
+        style="display: none"
+      >
+        <ul id="app-users" class="ab-submenu">
+          <li class="logout"><a href="/logout" class="app-logout"><i class="fa fa-sign-out icon"></i><span class="text">Logout</span></a></li>
+        </ul>
+      </div>
+
+      </div>
+    </div>
+
+
+    <div id="dd-logo">
+      <a href="https://xnet-x.net/ca/digital-democratic/" target="_blank">
+        <img " src="{{ data.product_logo }}" alt="" style="height: 16px; margin-right: 21px; margin-top: 16px">
+      </a>
+    </div>
+  </div>
+</header>
+
+{% block pagescript %}
+  <script>
+
+    function openMenu(){
+      if ($('#menu-apps-btn').hasClass("open")) {
+        $('#dropdownMenuApps').css('display', 'none')
+      } else {
+        $('#dropdownMenuApps').css('display', 'block')
+      }
+    }
+
+    function openAvatar(){
+      if ($('#menu-profile-btn').hasClass("open")) {
+        $('#dropdownProfile').css('display', 'none')
+      } else {
+        $('#dropdownProfile').css('display', 'block')
+      }
+    }
+  
+
+
+  </script>
+{% endblock %}

docker/api/src/api/static/_templates/sso.html

@@ -63,6 +63,7 @@
     position: relative;
   }
 
+  /* MEGAMENÚ */
   #header #navbar-menu-apps #menu-apps-btn {
     cursor: pointer;
     position: relative;
@@ -71,7 +72,7 @@
   #header #navbar-menu-apps #menu-apps-btn #dropdownMenuAppsButton {
     cursor: pointer;
     height: 16px;
-    margin-right: 16px;
+    padding: 0px 15px;
   }
 
   #header
@@ -141,15 +142,6 @@
     font-size: 19px;
   }
 
-  #header #navbar-menu-apps .dropdown-menu ul li.app a.app-link .text {
-    text-align: center;
-    margin-top: 4px;
-    height: 26px;
-    font-size: 13px;
-    line-height: 15px;
-    overflow-wrap: anywhere;
-  }
-
   #header #header-left,
   #header .header-left,
   #header #header-right,
@@ -158,6 +150,26 @@
     align-items: center;
   }
 
+  #navbar-menu-apps:hover #dropdownMenuApps {
+    display: block;
+  }
+
+  /* AVATAR IMAGE AND DROPDOWN */
+  #avatarimg {
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  .icon {
+    font-size: 26px;
+    line-height: 1em;
+    width: 40px;
+  }
+
+  .dropdown {
+    left: -115px;
+  }
+
   #navbar-nextcloud #user_avatar .avatardiv img {
     height: 39px;
     width: 39px;
@@ -165,9 +177,33 @@
     margin-right: 10px;
   }
 
-  .avatar>img, .avatardiv>img {
+  /* Dropdown Content (Hidden by Default) */
-    border-radius: 50%;
+  .dropdown-content {
-    flex-shrink: 0;
+    display: none;
+    position: absolute;
+    min-width: 160px;
+    z-index: 1;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 5px;
+    background-color: white;
+  }
+
+  /* Links inside the dropdown */
+  .dropdown-content a {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+  }
+
+  /* Change color of dropdown links on hover */
+  .dropdown-content a:hover {
+    background-color: #ddd;
+  }
+
+  /* Show the dropdown menu on hover */
+  #user_avatar:hover .dropdown-content {
+    display: block;
   }
 </style>
 {% endblock %}
@@ -179,7 +215,7 @@
   </div>
 
   <div id="navbar-nextcloud" class="header-right">
-    <div id="navbar-menu-apps" onclick="openMenu()">
+    <div id="navbar-menu-apps">
       <div id="menu-apps-btn">
         <div
           id="dropdownMenuAppsButton"
@@ -272,7 +308,6 @@
           id="dropdownMenuApps"
           class="dropdown-menu dropdown-menu-right"
           aria-labelledby="dropdownMenuButton"
-          style="display: none"
         >
           <ul id="app-apps">
             {% for item in data.apps_internal %}
@@ -303,28 +338,39 @@
       </div>
     </div>
     <div id="user_avatar">
-      <div class="avatardiv avatardiv-shown">
+      <div id="menu-profile-btn" class="avatardiv avatardiv-shown">
-        <img alt="" width="32" height="32" src="{{ data.user_avatar }}">
+        <div
+          id="dropdownProfileButton"
+          data-toggle="dropdown"
+          aria-haspopup="true"
+          aria-expanded="false"
+        >
+          <img
+            id="avatarimg"
+            alt=""
+            width="32"
+            height="32"
+            src="{{ data.user_avatar }}"
+          />
+        </div>
+        <div class="dropdown">
+          <div class="dropdown-content">
+            <a href="/auth/realms/master/protocol/openid-connect/logout?redirect_uri={{ data.apps_internal[0].href }}auth/admin/master/console/#/realms/master"
+              ><i class="fa fa-sign-out icon"></i
+              ><span class="text">Logout</span></a
+            >
+          </div>
+        </div>
       </div>
     </div>
     <div id="dd-logo">
       <a href="https://xnet-x.net/ca/digital-democratic/" target="_blank">
-        <img src="{{ data.product_logo }}" alt="" style="height: 16px; margin-right: 21px; margin-top: 16px">
+        <img
+          src="{{ data.product_logo }}"
+          alt=""
+          style="height: 16px; margin-right: 21px; margin-top: 16px"
+        />
       </a>
     </div>
   </div>
 </header>
-
-{% block pagescript %}
-  <script>
-function openMenu(){
-  if ($('#menu-apps-btn').hasClass("open")) {
-    $('#menu-apps-btn').removeClass("open")
-    $('#dropdownMenuApps').css('display', 'none')
-  } else {
-    $('#menu-apps-btn').addClass("open")
-    $('#dropdownMenuApps').css('display', 'block')
-  }
-}
-  </script>
-{% endblock %}

docker/api/src/api/static/_templates/sso_old.html

@@ -0,0 +1,330 @@
+{% block css %}
+<style>
+  /* Header used classes */
+  header#header {
+    background-color: white !important;
+    box-shadow: 0 2px 4px #00000014;
+    border-bottom: 1px solid #262626;
+    display: inline-flex;
+    top: 0;
+    width: 100%;
+    z-index: 2000;
+    height: 50px;
+    position: fixed;
+    box-sizing: border-box;
+    justify-content: space-between;
+  }
+
+  #nextcloud {
+    padding: 7px 0;
+    padding-left: 86px;
+    position: relative;
+    height: 100%;
+    box-sizing: border-box;
+    opacity: 1;
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    overflow: hidden;
+  }
+
+  a * {
+    cursor: pointer;
+  }
+
+  a {
+    border: 0;
+    color: var(--color-main-text);
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  #theming-preview-logo,
+  #header #nextcloud {
+    padding-left: 64px;
+  }
+
+  #header #header-left,
+  #header .header-left {
+    flex: 1 0;
+    white-space: nowrap;
+    min-width: 0;
+  }
+
+  #header #header-right,
+  #header .header-right {
+    justify-content: flex-end;
+    flex-shrink: 1;
+  }
+
+  #header .header-right > div,
+  #header .header-right > form {
+    height: 100%;
+    position: relative;
+  }
+
+  #header #navbar-menu-apps #menu-apps-btn {
+    cursor: pointer;
+    position: relative;
+  }
+
+  #header #navbar-menu-apps #menu-apps-btn #dropdownMenuAppsButton {
+    cursor: pointer;
+    height: 16px;
+    margin-right: 16px;
+  }
+
+  #header
+    #navbar-menu-apps
+    #menu-apps-btn
+    #dropdownMenuAppsButton
+    #menu-apps-icon {
+    height: 16px;
+    width: 16px;
+  }
+
+  #header div#navbar-menu-apps {
+    display: flex;
+    align-items: center;
+  }
+
+  #header #navbar-menu-apps .dropdown-menu {
+    display: none;
+    position: absolute;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 5px;
+    box-shadow: rgb(0 0 0 / 20%) 0 3px 8px;
+    margin-top: -2px;
+    padding: 10px;
+    max-height: 500px;
+    overflow-y: scroll;
+    z-index: 2000;
+    background-color: white;
+    top: 33px;
+    right: -14px;
+    left: auto;
+  }
+
+  #header #navbar-menu-apps .dropdown-menu ul {
+    list-style: none;
+    display: grid;
+    flex-wrap: wrap;
+    padding: 15px 2px 0 0;
+    margin-bottom: 0;
+    grid-template-columns: 82px 82px 82px;
+    grid-gap: 12px 2px;
+  }
+
+  #header #navbar-menu-apps .dropdown-menu ul li.app a.app-link {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: start;
+    text-align: center;
+    color: #262626;
+    text-decoration: none;
+  }
+
+  #header #navbar-menu-apps .dropdown-menu ul li.app a.app-link .icon {
+    width: 40px;
+    height: 40px;
+    background-color: #cc0066;
+    border-radius: 0.25rem;
+    margin-right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #header #navbar-menu-apps .dropdown-menu ul li.app a.app-link .icon i {
+    color: #fff;
+    font-size: 19px;
+  }
+
+  #header #navbar-menu-apps .dropdown-menu ul li.app a.app-link .text {
+    text-align: center;
+    margin-top: 4px;
+    height: 26px;
+    font-size: 13px;
+    line-height: 15px;
+    overflow-wrap: anywhere;
+  }
+
+  #header #header-left,
+  #header .header-left,
+  #header #header-right,
+  #header .header-right {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  #navbar-nextcloud #user_avatar .avatardiv img {
+    height: 39px;
+    width: 39px;
+    margin-top: 5px;
+    margin-right: 10px;
+  }
+
+  .avatar>img, .avatardiv>img {
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+</style>
+{% endblock %}
+<header role="banner" id="header">
+  <div id="navbar-logo" class="header-left">
+    <a href="/" id="nextcloud">
+      <img src="{{ data.logo }}" alt="" style="height: 39px" />
+    </a>
+  </div>
+
+  <div id="navbar-nextcloud" class="header-right">
+    <div id="navbar-menu-apps" onclick="openMenu()">
+      <div id="menu-apps-btn">
+        <div
+          id="dropdownMenuAppsButton"
+          data-toggle="dropdown"
+          aria-haspopup="true"
+          aria-expanded="false"
+        >
+          <svg
+            id="menu-apps-icon"
+            data-name="Menú Apps"
+            xmlns="http://www.w3.org/2000/svg"
+            width="26"
+            height="26"
+            viewBox="0 0 26 26"
+          >
+            <rect
+              id="Rectángulo_2"
+              data-name="Rectángulo 2"
+              width="6"
+              height="6"
+              fill="#262626"
+            ></rect>
+            <rect
+              id="Rectángulo_1447"
+              data-name="Rectángulo 1447"
+              width="6"
+              height="6"
+              transform="translate(0 10)"
+              fill="#262626"
+            ></rect>
+            <rect
+              id="Rectángulo_1450"
+              data-name="Rectángulo 1450"
+              width="6"
+              height="6"
+              transform="translate(0 20)"
+              fill="#262626"
+            ></rect>
+            <rect
+              id="Rectángulo_1440"
+              data-name="Rectángulo 1440"
+              width="6"
+              height="6"
+              transform="translate(10)"
+              fill="#262626"
+            ></rect>
+            <rect
+              id="Rectángulo_1446"
+              data-name="Rectángulo 1446"
+              width="6"
+              height="6"
+              transform="translate(10 10)"
+              fill="#262626"
+            ></rect>
+            <rect
+              id="Rectángulo_1449"
+              data-name="Rectángulo 1449"
+              width="6"
+              height="6"
+              transform="translate(10 20)"
+              fill="#262626"
+            ></rect>
+            <rect
+              id="Rectángulo_1441"
+              data-name="Rectángulo 1441"
+              width="6"
+              height="6"
+              transform="translate(20)"
+              fill="#262626"
+            ></rect>
+            <rect
+              id="Rectángulo_1445"
+              data-name="Rectángulo 1445"
+              width="6"
+              height="6"
+              transform="translate(20 10)"
+              fill="#262626"
+            ></rect>
+            <rect
+              id="Rectángulo_1448"
+              data-name="Rectángulo 1448"
+              width="6"
+              height="6"
+              transform="translate(20 20)"
+              fill="#262626"
+            ></rect>
+          </svg>
+        </div>
+        <div
+          id="dropdownMenuApps"
+          class="dropdown-menu dropdown-menu-right"
+          aria-labelledby="dropdownMenuButton"
+          style="display: none"
+        >
+          <ul id="app-apps">
+            {% for item in data.apps_internal %}
+            <li class="app {{ item.shorname }}">
+              <a href="{{ item.href }}" class="app-link" target="_blank">
+                <div class="icon {{ item.shorname }}">
+                  <i class="{{ item.icon }}" aria-hidden="true"></i>
+                </div>
+                <div class="text">{{ item.name }}</div>
+              </a>
+            </li>
+            {% endfor %}
+          </ul>
+
+          <ul id="app-external" class="external-links">
+            {% for item in data.apps_external %}
+            <li class="app {{ item.shorname }}">
+              <a href="{{ item.href }}" class="app-link" target="_blank">
+                <div class="icon {{ item.shorname }}">
+                  <i class="{{ item.icon }}" aria-hidden="true"></i>
+                </div>
+                <div class="text">{{ item.name }}</div>
+              </a>
+            </li>
+            {% endfor %}
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div id="user_avatar">
+      <div class="avatardiv avatardiv-shown">
+        <img alt="" width="32" height="32" src="{{ data.user_avatar }}">
+      </div>
+    </div>
+    <div id="dd-logo">
+      <a href="https://xnet-x.net/ca/digital-democratic/" target="_blank">
+        <img src="{{ data.product_logo }}" alt="" style="height: 16px; margin-right: 21px; margin-top: 16px">
+      </a>
+    </div>
+  </div>
+</header>
+
+{% block pagescript %}
+  <script>
+function openMenu(){
+  if ($('#menu-apps-btn').hasClass("open")) {
+    $('#menu-apps-btn').removeClass("open")
+    $('#dropdownMenuApps').css('display', 'none')
+  } else {
+    $('#menu-apps-btn').addClass("open")
+    $('#dropdownMenuApps').css('display', 'block')
+  }
+}
+  </script>
+{% endblock %}