From fb06da36ac9fe5aca07ec442a428b10e6070a2ab Mon Sep 17 00:00:00 2001
From: urospodkriznik <uros.podkriznik@gmail.com>
Date: Fri, 4 Nov 2022 17:07:48 +0100
Subject: [PATCH] drupal - porpavljen dropdown user menu na malih zaslonih

---
 .../drupal9/web/themes/custom/pro1ka/css/style.css | 12 ++++++++++--
 .../drupal9/web/themes/custom/pro1ka/js/login.js   |  5 +++++
 .../custom/pro1ka/sass/components/_menu.scss       | 14 ++++++++++++--
 .../custom/pro1ka/templates/parts/header.html.twig |  4 ++--
 4 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/frontend/drupal9/web/themes/custom/pro1ka/css/style.css b/frontend/drupal9/web/themes/custom/pro1ka/css/style.css
index 86796f5a3..a3e60b8b9 100644
--- a/frontend/drupal9/web/themes/custom/pro1ka/css/style.css
+++ b/frontend/drupal9/web/themes/custom/pro1ka/css/style.css
@@ -2274,15 +2274,23 @@ nav.tabs {
       background-color: #fff;
       color: #1e88e5; }
 
-#user-menu {
+#user-menu,
+#user-menu-mobile {
   position: absolute; }
-  #user-menu ul.user-menu-link {
+  #user-menu ul.user-menu-link,
+  #user-menu-mobile ul.user-menu-link {
     list-style: none;
+    background-color: white;
     padding-inline-start: 0;
     border: 1px solid #D1D1D1;
     padding: 10px 15px;
     margin-top: 6px; }
 
+#user-menu-mobile ul.user-menu-link {
+  margin-left: 20px;
+  border-left: 2px solid #D1D1D1;
+  background-color: unset; }
+
 .mobile-nav-menu {
   position: fixed;
   left: 0%;
diff --git a/frontend/drupal9/web/themes/custom/pro1ka/js/login.js b/frontend/drupal9/web/themes/custom/pro1ka/js/login.js
index 073747c59..9b4b77339 100644
--- a/frontend/drupal9/web/themes/custom/pro1ka/js/login.js
+++ b/frontend/drupal9/web/themes/custom/pro1ka/js/login.js
@@ -54,6 +54,11 @@
       jQuery('#user-menu').toggle();
     });
 
+    // Odpremo drop down menu za uporabnika
+    jQuery('#user-login-menu-mobile').on('click', function () {
+      jQuery('#user-menu-mobile').toggle();
+    });
+
     // Obnovitev gesla
     jQuery('#open-modal-lost-password').on('click', function () {
       jQuery('#modal-login').hide();
diff --git a/frontend/drupal9/web/themes/custom/pro1ka/sass/components/_menu.scss b/frontend/drupal9/web/themes/custom/pro1ka/sass/components/_menu.scss
index f44c9d96d..3a1858c96 100755
--- a/frontend/drupal9/web/themes/custom/pro1ka/sass/components/_menu.scss
+++ b/frontend/drupal9/web/themes/custom/pro1ka/sass/components/_menu.scss
@@ -329,11 +329,13 @@ nav.tabs {
   }
 }
 
-#user-menu {
+#user-menu,
+#user-menu-mobile {
   position: absolute;
-  
+
   ul.user-menu-link {
     list-style: none;
+    background-color: white;
     padding-inline-start: 0;
     border: 1px solid $siva;
     padding: 10px 15px;
@@ -341,6 +343,14 @@ nav.tabs {
   }
 }
 
+#user-menu-mobile{
+  ul.user-menu-link {
+    margin-left: 20px;
+    border-left: 2px solid #D1D1D1;
+    background-color: unset;
+  }
+}
+
 .mobile-nav-menu {
   position: fixed;
   left: 0%;
diff --git a/frontend/drupal9/web/themes/custom/pro1ka/templates/parts/header.html.twig b/frontend/drupal9/web/themes/custom/pro1ka/templates/parts/header.html.twig
index 9508a09c8..20d429f6c 100644
--- a/frontend/drupal9/web/themes/custom/pro1ka/templates/parts/header.html.twig
+++ b/frontend/drupal9/web/themes/custom/pro1ka/templates/parts/header.html.twig
@@ -112,12 +112,12 @@
 
     {% if uporabnik is not empty %}
       <div class="usem-menu">
-        <a href="#" class="login" id="user-login-menu">
+        <a href="#" class="login" id="user-login-menu-mobile">
           {{ uporabnik }}
           <img src="/tema1ka/svg/icons8-chevron-right.svg" loading="lazy" alt="" class="button-right-arrow"
                 style="transform: rotateZ(90deg);">
         </a>
-        <div id="user-menu" style="display: none;">
+        <div id="user-menu-mobile" style="display: none;">
           <div name="odjava" method="post" action="/api/drupal/logout">
             <ul class="user-menu-link">
               <li>