From df1f910ee2bde4078bea32edce20538ea24bb59e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 2 Mar 2022 12:28:54 +0100
Subject: [PATCH] MOBILE-3814 menu: Fix badges overflow and resize menu to 56px
 on tablet

---
 .../features/mainmenu/pages/menu/menu.scss    | 285 ++++++++++--------
 src/theme/theme.light.scss                    |   1 +
 2 files changed, 152 insertions(+), 134 deletions(-)

diff --git a/src/core/features/mainmenu/pages/menu/menu.scss b/src/core/features/mainmenu/pages/menu/menu.scss
index e6e0b7fea..4f0ebd805 100644
--- a/src/core/features/mainmenu/pages/menu/menu.scss
+++ b/src/core/features/mainmenu/pages/menu/menu.scss
@@ -1,161 +1,178 @@
 @import "~theme/globals";
 
-:host{
-    --menutabbar-size: var(--bottom-tabs-size);
-
-    ion-tab-bar {
-        height: var(--menutabbar-size);
-    }
-
-    @if ($core-always-show-main-menu) {
-        ion-tabs.placement-bottom ion-tab-bar {
-            height: var(--menutabbar-size) !important;
-            visibility: visible !important;
-            transform: translateY(0) !important;
-        }
-    } @else {
-        ion-tabs.tabshidden.placement-bottom ion-tab-bar {
-            pointer-events: none;
-
-            ion-tab-button {
-                height: auto;
-            }
-        }
-
-    }
-
-    ion-tab-button ion-icon.core-tab-icon {
-        text-overflow: unset;
-        overflow: visible;
-        text-align: center;
-    }
-
-    ion-tab-button.ios ion-icon.core-tab-icon {
-        font-size: 25px;
-    }
-
-    ion-tab-button.md ion-badge.core-tab-badge {
-        font-size: 12px;
-        font-weight: bold;
-        border-radius: 10px;
-        padding-left: 6px;
-        padding-right: 6px;
-        line-height: 14px;
-    }
-
-    ion-tab-button.tab-selected {
-        background: var(--background-selected);
-    }
-
-    ion-icon.core-tab-badge {
-        color: var(--core-bottom-tabs-badge-color);
-        padding: 3px 6px 2px;
-        @include position(8px, null, null, calc(50% + 6px));
-        min-width: 12px;
-        font-size: 8px;
-        font-weight: normal;
-        box-sizing: border-box;
-        position: absolute;
-        z-index: 1;
-    }
-
-    ion-badge.core-tab-badge {
-        --background: var(--core-bottom-tabs-badge-color);
-        --color: var(--core-bottom-tabs-badge-text-color);
-    }
-
-    ion-tabs.placement-bottom ion-tab-button {
-        ion-icon.core-tab-icon {
-            transition: margin 500ms ease-in-out, transform 300ms ease-in-out;
-        }
-        ion-icon.core-tab-badge,
-        ion-badge.core-tab-badge {
-            top: 8px;
-        }
+:host {
+    ion-tabs {
+        --menutabbar-size: var(--bottom-tabs-size);
     }
 
     ion-tabs.placement-side {
-        flex-direction: row;
-        ion-tab-bar {
-            order: -1;
-            width: var(--menutabbar-size);
-            height: calc(100% - var(--ion-safe-area-top) - var(--ion-safe-area-bottom));
-            flex-direction: column;
-            @include border-end(var(--border));
-            border-top: 0;
-            justify-content: flex-start;
-
-            @include padding(var(--ion-safe-area-top), 0px, var(--ion-safe-area-bottom), var(--ion-safe-area-left));
-
-            ion-tab-button, core-user-menu-button {
-                width: 100%;
-                min-height: var(--menutabbar-size);
-                flex: 0;
-
-                ion-icon.core-tab-badge,
-                ion-badge.core-tab-badge {
-                    top: calc(50% - 20px);
-                }
-            }
-        }
+        --menutabbar-size: var(--side-tabs-size);
     }
 
+    --network-margin-bottom: 0px;
+    --network-message-background: transparent;
+    --network-message-offline: none;
+    --network-message-online: none;
+    --network-message-height: 16px;
+}
+
+:host-context(.core-online),
+:host-context(.core-offline) {
+    .core-network-message {
+        visibility: visible;
+        height: var(--network-message-height);
+        padding-bottom: calc(var(--ion-safe-area-bottom, 0px) + var(--network-message-height));
+    }
+}
+
+:host-context(.core-online) {
+    --network-margin-bottom: 8px;
+
+    --network-message-background: var(--success);
+    --network-message-online: block;
+}
+
+:host-context(.core-offline) {
+    --network-margin-bottom: 8px;
+
+    --network-message-background: var(--danger);
+    --network-message-offline: block;
+}
+
+ion-tab-bar {
+    height: var(--menutabbar-size);
+
     core-user-menu-button {
         align-items: center;
         display: flex;
         justify-content: center;
     }
 
-    .core-network-message {
-        --network-message-height: 16px;
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        padding-left: 10px;
-        padding-right: 10px;
-        text-align: center;
-        color: white;
-        visibility: hidden;
-        height: 0;
-        transition: all 500ms ease-in-out;
-        opacity: .8;
-        z-index: 12;
-    }
+    ion-tab-button {
+        &.tab-selected {
+            background: var(--background-selected);
+        }
 
-    .core-online-message,
-    .core-offline-message {
-        display: none;
+        ion-icon.core-tab-icon {
+            text-overflow: unset;
+            overflow: visible;
+            text-align: center;
+            font-size: 24px;
+        }
+
+        ion-badge.core-tab-badge {
+            font-size: 12px;
+            font-weight: bold;
+            border-radius: 10px;
+            padding-left: 6px;
+            padding-right: 6px;
+            line-height: 14px;
+            --background: var(--core-bottom-tabs-badge-color);
+            --color: var(--core-bottom-tabs-badge-text-color);
+        }
+
+        ion-icon.core-tab-badge {
+            color: var(--core-bottom-tabs-badge-color);
+            padding: 3px 6px 2px;
+            @include position(8px, null, null, calc(50% + 6px));
+            min-width: 12px;
+            font-size: 8px;
+            font-weight: normal;
+            box-sizing: border-box;
+            position: absolute;
+            z-index: 1;
+        }
     }
 }
 
-:host-context(.core-online),
-:host-context(.core-offline) {
-    ion-tabs.placement-bottom ion-tab-button ion-icon.core-tab-icon {
-        margin-bottom: 8px;
+ion-tabs.placement-bottom {
+    ion-tab-button {
+        ion-icon.core-tab-icon {
+            margin-bottom: var(--network-margin-bottom);
+            transition: margin 500ms ease-in-out, transform 300ms ease-in-out;
+        }
+
+        ion-icon.core-tab-badge,
+        ion-badge.core-tab-badge {
+            top: 8px;
+        }
     }
 
-    ion-tabs.placement-bottom ion-tab-button.ios ion-icon.core-tab-icon {
-        margin-bottom: 14px;
-    }
+    @if ($core-always-show-main-menu) {
+        ion-tab-bar {
+            height: var(--menutabbar-size) !important;
+            visibility: visible !important;
+            transform: translateY(0) !important;
+        }
+    } @else {
+        &.tabshidden ion-tab-bar {
+            pointer-events: none;
 
-    .core-network-message {
-        visibility: visible;
-        height: var(--network-message-height);
-        padding-bottom: calc(var(--ion-safe-area-bottom, 0px) + var(--network-message-height));
-        pointer-events: none;
+            ion-tab-button {
+                height: auto;
+            }
+        }
     }
 }
 
-:host-context(.core-offline) .core-offline-message,
-:host-context(.core-online) .core-online-message {
-    display: block;
+ion-tabs.placement-side {
+    flex-direction: row;
+
+    ion-tab-bar {
+        order: -1;
+        width: var(--menutabbar-size);
+        height: calc(100% - var(--ion-safe-area-top) - var(--ion-safe-area-bottom));
+        flex-direction: column;
+        @include border-end(var(--border));
+        border-top: 0;
+        justify-content: flex-start;
+
+        @include padding(var(--ion-safe-area-top), 0px, var(--ion-safe-area-bottom), var(--ion-safe-area-left));
+
+        ion-tab-button {
+            --padding-start: 0;
+            --padding-end: 0;
+            ion-badge.core-tab-badge {
+                @include position(null, 1px, null, auto);
+            }
+        }
+
+
+        ion-tab-button, core-user-menu-button {
+            width: 100%;
+            min-height: var(--menutabbar-size);
+            flex: 0;
+
+            ion-icon.core-tab-badge,
+            ion-badge.core-tab-badge {
+                top: calc(50% - 20px);
+            }
+        }
+    }
 }
 
-:host-context(.core-online) .core-network-message {
-    background: var(--success);
-}
+.core-network-message {
+    background: var(--network-message-background);
+    pointer-events: none;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding-left: 10px;
+    padding-right: 10px;
+    text-align: center;
+    color: white;
+    visibility: hidden;
+    height: 0;
+    transition: all 500ms ease-in-out;
+    opacity: .8;
+    z-index: 12;
 
-:host-context(.core-offline) .core-network-message {
-    background: var(--danger);
+    .core-online {
+        display: var(--network-message-online);
+    }
+
+    .core-offline {
+        display: var(--network-message-offline);
+    }
 }
diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss
index 99cc6f2a9..41545859f 100644
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@@ -117,6 +117,7 @@
     --core-bottom-tabs-badge-color: var(--brand);
     --core-bottom-tabs-badge-text-color: var(--brand-contrast);
     --bottom-tabs-size: 48px;
+    --side-tabs-size: 56px;
     ion-tab-bar.mainmenu-tabs {
         --background: var(--core-bottom-tabs-background);
         --color: var(--core-bottom-tabs-color);