fix(web-components): update side nav CSS to ensure visibility of menu…

… content is correct

Update side navigation CSS so that the visibility is handled by just the 'menu-visibility-visible'
class instead of in the media query, remove unused classes in ic-navigation-group CSS.

.#739

packages/web-components/src/components/ic-navigation-group/ic-navigation-group.css

@@ -198,11 +198,3 @@
   left: var(--navigation-group-title-position-left);
   white-space: nowrap;
 }
-
-.menu-visibility-visible {
-  visibility: visible;
-}
-
-.menu-visibility-hidden {
-  visibility: hidden;
-}

packages/web-components/src/components/ic-side-navigation/ic-side-navigation.css

@@ -62,7 +62,6 @@
   flex-direction: column;
   flex: 1 1 0;
   overflow: auto;
-  visibility: hidden;
 }
 
 :host(.inline) .side-navigation-inner {
@@ -79,6 +78,10 @@
   transition: left var(--ic-easing-transition-slow);
 }
 
+:host(.xs-menu-close) .side-navigation > * {
+  visibility: hidden;
+}
+
 :host(.anchor-right.xs-menu-open) .side-navigation {
   right: 0;
   left: auto;
@@ -99,7 +102,6 @@
   background-color: var(--ic-theme-primary);
   display: flex;
   flex-direction: column;
-  visibility: hidden;
 }
 
 :host(.inline) .bottom-wrapper {
@@ -333,10 +335,7 @@ slot[name="app-icon"]::slotted(a) {
 
 .menu-visibility-visible {
   visibility: visible;
-}
-
-.menu-visibility-hidden {
-  visibility: hidden;
+  width: 100%;
 }
 
 /* Media Queries */
@@ -421,15 +420,6 @@ slot[name="app-icon"]::slotted(a) {
     right: 0;
   }
 
-  .side-navigation-inner {
-    width: 100%;
-    visibility: visible;
-  }
-
-  .bottom-wrapper {
-    visibility: visible;
-  }
-
   .app-title-wrapper {
     margin-left: 0;
     border-left: none;