working submenu

KeenMate · Feb 3, 2025 · 1366a3b · 1366a3b
1 parent b858a5d
commit 1366a3b
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 10 deletions.
diff --git a/poc/public/styles.css b/poc/public/styles.css
@@ -82,7 +82,7 @@ img {
 
 .sidebar .pure-menu {
     background: transparent;
-    overflow: hidden;
+    /* overflow: hidden; */
 }
 
 .sidebar .pure-menu-link {
@@ -103,10 +103,6 @@ img {
     max-width: 100%;
 }
 
-.sidebar .pure-menu-link:hover {
-    background-color: rgba(255, 255, 255, 0.1);
-}
-
 .sidebar.collapsed .pure-menu-link span {
     display: none;
 }
@@ -145,7 +141,6 @@ img {
 
 .main-content .pure-g {
     margin-bottom: 0.5rem;
-    box-shadow: 1rem;
 }
 
 .footer {
@@ -445,4 +440,30 @@ table th {
 .centered-container {
     display: flex;
     align-items: center;
+}
+
+.pure-menu-children {
+    display: none;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.pure-menu-active>.pure-menu-children {
+    display: block;
+    width: 6rem;
+}
+
+.pure-menu-children .pure-menu-link {
+    color: black;
+}
+
+.sidebar .pure-menu-link{
+    background-color: transparent;
+}
+
+.sidebar .pure-menu-link:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.pure-menu-active>.pure-menu-children .pure-menu-link:hover{
+    background-color: #F8F8F8;
 }
diff --git a/poc/src/App.svelte b/poc/src/App.svelte
@@ -94,6 +94,14 @@
   function closeModal() {
     modalOpen = false;
   }
+
+
+  let isSubmenuOpen = false;
+
+  function toggleMenu(event) {
+    event.preventDefault();
+    isSubmenuOpen = !isSubmenuOpen;
+  }
 </script>
 
 <div class="layout-wrapper">
@@ -154,16 +162,16 @@
                 <i class="fas fa-users-viewfinder"></i><span>Objekty</span>
               </a>
             </li>
-            <li class="pure-menu-item pure-menu-has-children">
-              <a href="#" id="menuLink1" class="pure-menu-link">
+            <li class="pure-menu-item pure-menu-has-children {isSubmenuOpen ? 'pure-menu-active' : ''}">
+              <a href="#" id="menuLink1" class="pure-menu-link" on:click={toggleMenu}>
                 <i class="fas fa-cogs"></i><span>Administrace</span>
               </a>
               <ul class="pure-menu-children">
                 <li class="pure-menu-item">
-                  <a href="#" class="pure-menu-link">Autos</a>
+                  <a href="#" class="pure-menu-link">Test 1</a>
                 </li>
                 <li class="pure-menu-item">
-                  <a href="#" class="pure-menu-link">Flickr</a>
+                  <a href="#" class="pure-menu-link">Test 2</a>
                 </li>
               </ul>
             </li>