CSS put .menu-item-container inside .lateral-menu

CosmeValera · Oct 19, 2024 · d0e7a28 · d0e7a28
1 parent 5f6c82e
commit d0e7a28
Showing 1 changed file with 45 additions and 45 deletions.
diff --git a/sass/_base.scss b/sass/_base.scss
@@ -64,59 +64,59 @@ h1.page-title {
     transform: translateY(-50%);
     flex-direction: column;
     z-index: 1000;    
-}
 
-.menu-item-container {
-    margin: 10px 0;
-    text-align: center;
-
-    .menu-item {
-        display: flex;
-        align-items: center;
-        justify-content: flex-end; /* Align the icon to the right */
-        background-color: black;
-        color: white;
-        padding: 10px;
-        border-radius: 50%;
-        transition: all 0.3s ease;
-        overflow: hidden;
-        white-space: nowrap;
-        width: 50px;
-        height: 50px;
-        position: relative;
+    .menu-item-container {
+        margin: 10px 0;
+        text-align: center;
 
-        &:hover {
-            width: 150px; /* Expand width to the left */
-            border-radius: 30px;
+        .menu-item {
+            display: flex;
+            align-items: center;
+            justify-content: flex-end; /* Align the icon to the right */
+            background-color: black;
+            color: white;
+            padding: 10px;
+            border-radius: 50%;
+            transition: all 0.3s ease;
+            overflow: hidden;
+            white-space: nowrap;
+            width: 50px;
+            height: 50px;
+            position: relative;
+
+            &:hover {
+                width: 150px; /* Expand width to the left */
+                border-radius: 30px;
 
-            .menu-label {
-                opacity: 1;
-                transform: translateX(0);
+                .menu-label {
+                    opacity: 1;
+                    transform: translateX(0);
+                }
+
+                .menu-icon {
+                    opacity: 1;
+                    transform: scale(1.15);
+                }
             }
 
             .menu-icon {
-                opacity: 1;
-                transform: scale(1.15);
+                opacity: 0.9;
+                font-size: 24px;
+                display: block;
+                transition: transform 0.3s ease;
+                margin: 0 2px 0 10px;
             }
-        }
-
-        .menu-icon {
-            opacity: 0.9;
-            font-size: 24px;
-            display: block;
-            transition: transform 0.3s ease;
-            margin: 0 2px 0 10px;
-        }
 
-        .menu-label {
-            display: inline-block;
-            font-size: 14px;
-            margin-right: 10px; /* Place the text on the left */
-            opacity: 0; /* Initially hide the text */
-            transition: opacity 0.3s ease, transform 0.3s ease;
-            transform: translateX(+50px); /* Move the text off-screen */
-            font-family: Andika;
-            font-weight: 700;
+            .menu-label {
+                display: inline-block;
+                font-size: 14px;
+                margin-right: 10px; /* Place the text on the left */
+                opacity: 0; /* Initially hide the text */
+                transition: opacity 0.3s ease, transform 0.3s ease;
+                transform: translateX(+50px); /* Move the text off-screen */
+                font-family: Andika;
+                font-weight: 700;
+            }
         }
     }
 }