console,account: Apply various fixes

pkg/webui/components/sidebar/side-footer/index.js

@@ -116,31 +116,36 @@ const SideFooter = () => {
     'al-center',
     'gap-cs-xs',
     'fs-s',
+    { [style.isMinimized]: isMinimized },
   )
 
   return (
     <div className={sideFooterClassnames}>
       <Button
-        className={classnames(style.sideFooterButton, style.sideFooterFullWidth)}
+        className={classnames(style.sideFooterButton, style.supportButton)}
         secondary
         icon="support"
-        message={!isMinimized ? `v${process.env.VERSION} (${process.env.REVISION})` : undefined}
         dropdownItems={supportDropdownItems}
+        dropdownPosition="above"
+        dropdownClassName={style.sideFooterDropdown}
         noDropdownIcon
         ref={supportButtonRef}
+      >
+        <span className={style.sideFooterVersion}>
+          v{process.env.VERSION} ({process.env.REVISION})
+        </span>
+      </Button>
+      <Button
+        className={classnames(style.sideFooterButton, style.clusterButton)}
+        secondary
+        icon="public"
+        message="EU1"
+        noDropdownIcon
+        dropdownItems={clusterDropdownItems}
+        dropdownPosition="above"
+        dropdownClassName={classnames(style.sideFooterDropdown, style.sideFooterClusterDropdown)}
+        ref={clusterButtonRef}
       />
-      {!isMinimized && (
-        <Button
-          className={style.sideFooterButton}
-          secondary
-          icon="public"
-          message="EU1"
-          noDropdownIcon
-          dropdownItems={clusterDropdownItems}
-          dropdownClassName={style.sideFooterClusterDropdown}
-          ref={clusterButtonRef}
-        />
-      )}
     </div>
   )
 }

pkg/webui/components/sidebar/side-footer/side-footer.styl

@@ -15,12 +15,41 @@
 .side-footer
   margin-top: auto
 
-  &-full-width
+  .support-button
     width: 100%
 
+    button
+      width: 100%
+
   &-button
     justify-content: space-between
 
-  &-cluster-dropdown
-    left: initial !important
-    right: 0 !important
+  &.is-minimized
+    +media-query-min($bp.m)
+      .cluster-button
+        display: none
+
+      .side-footer-version
+        display: none
+
+      .support-button button
+        justify-content: center
+
+        span:first-child
+          margin: 0
+
+  .side-footer-dropdown
+    width: calc(19rem - 2px)
+    min-width: initial
+    max-width: initial
+
+  .side-footer-version
+    margin-left: $cs.xxs
+
+  .support-button button
+    width: 100% !important
+    justify-content: flex-start
+
+  ul.side-footer-cluster-dropdown
+    left: initial
+    right: 0

pkg/webui/components/sidebar/side-menu/item/collapsible.js

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React from 'react'
+import React, { useRef } from 'react'
 import classnames from 'classnames'
 
 import Dropdown from '@ttn-lw/components/dropdown'
@@ -38,6 +38,7 @@ const CollapsibleItem = ({
   onDropdownItemsClick,
   currentPathName,
 }) => {
+  const ref = useRef()
   const subItems = children
     .filter(item => Boolean(item) && 'props' in item)
     .map(item => ({
@@ -49,50 +50,45 @@ const CollapsibleItem = ({
   const subItemActive = subItems.some(item => currentPathName.includes(item.path))
 
   return (
-    <>
+    <div className={classnames('pos-relative', { [style.isMinimized]: isMinimized })} ref={ref}>
       <Button
         className={classnames(style.link, {
-          'j-center': isMinimized,
-          'pl-cs-xs': !isMinimized,
-          'pl-0': !isMinimized,
-          [style.buttonActive]: isMinimized && subItemActive,
+          [style.active]: isMinimized && subItemActive,
+          [style.isMinimized]: isMinimized,
         })}
         onClick={onClick}
       >
         {icon && <Icon icon={icon} className={style.icon} />}
-        {!isMinimized && (
-          <>
-            <Message content={title} className={style.message} />
-            <Icon
-              icon="keyboard_arrow_down"
-              className={classnames(style.expandIcon, {
-                [style.expandIconOpen]: isExpanded,
-              })}
-            />
-          </>
-        )}
-        {isMinimized && (
-          <div className={style.flyOutListContainer}>
-            <Dropdown open className={style.flyOutList} onItemsClick={onDropdownItemsClick}>
-              <Dropdown.HeaderItem title={title.defaultMessage} />
-              {subItems.map(item => (
-                <Dropdown.Item
-                  key={item.path}
-                  title={item.title}
-                  path={item.path}
-                  icon={item.icon}
-                />
-              ))}
-            </Dropdown>
-          </div>
-        )}
+        <Message content={title} className={style.title} />
+        <Icon
+          icon="keyboard_arrow_down"
+          className={classnames(style.expandIcon, {
+            [style.expandIconOpen]: isExpanded,
+          })}
+        />
       </Button>
-      {!isMinimized && (
-        <SideNavigationList depth={depth + 1} isExpanded={isExpanded}>
-          {children}
-        </SideNavigationList>
+      {isMinimized && (
+        <Dropdown.Attached
+          className={style.flyOutList}
+          onItemsClick={onDropdownItemsClick}
+          attachedRef={ref}
+          position="manual"
+          hover
+        >
+          <Dropdown.HeaderItem title={title.defaultMessage} />
+          {subItems.map(item => (
+            <Dropdown.Item key={item.path} title={item.title} path={item.path} icon={item.icon} />
+          ))}
+        </Dropdown.Attached>
       )}
-    </>
+      <SideNavigationList
+        depth={depth + 1}
+        className={classnames(style.subItemList, { [style.isMinimized]: isMinimized })}
+        isExpanded={isExpanded}
+      >
+        {children}
+      </SideNavigationList>
+    </div>
   )
 }
 

pkg/webui/components/sidebar/side-menu/item/item.styl

@@ -12,11 +12,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-.item
-  &:hover
-    .fly-out-list-container
-      display: block
-
 .message
   vertical-align: middle
 
@@ -30,20 +25,9 @@
   &-open
     transform: translateY(-50%) rotate(180deg)
 
-.fly-out-list-container
-  display: none
-  top: - $cs.m
-  left: calc(3rem - 2px)
-  position: absolute
-  padding-left: 1rem
-  z-index: $zi.dropdown
-
-.fly-out-list
-  position: static !important
-
 .link
   transition: color 50ms linear
-  border-radius: $br.l
+  border-radius: $br.m
   text-decoration: none
   color: $c.grey-700
   display: flex
@@ -53,10 +37,7 @@
   position: relative
   box-sizing: border-box
   width: 100%
-
-  .icon
-    transition: color 50ms linear
-    color: $c.grey-500
+  padding-left: $cs.xs
 
   &.active
     background: $c.tts-primary-150
@@ -73,8 +54,41 @@
 
   &:hover
     color: $c.grey-900
-    text-decoration: none
 
     .icon
       color: inherit
 
+.is-minimized
+  justify-content: center
+
+  .title
+    display: none
+
+  .expand-icon
+    display: none
+
+  .icon
+    transition: color 50ms linear
+    color: $c.grey-500
+
+.sub-item-list
+  &.is-minimized
+    +media-query-min($bp.m)
+      display: none
+
+.fly-out-list
+  top: - $cs.xs
+  left: calc(4rem - 3px)
+  position: absolute
+  padding-left: 1rem
+  z-index: $zi.dropdown
+
+  // Pseudo element to extend the clickable area
+  // to connect with the parent button.
+  &:before
+    content: ""
+    position: absolute
+    top: 0
+    left: -1rem
+    width: 1rem
+    height: 100%

pkg/webui/components/sidebar/switcher/index.js

@@ -12,11 +12,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, { useCallback } from 'react'
-import { NavLink } from 'react-router-dom'
+import React, { useCallback, useRef } from 'react'
+import { NavLink, useLocation } from 'react-router-dom'
 import classnames from 'classnames'
 
 import Icon from '@ttn-lw/components/icon'
+import Dropdown from '@ttn-lw/components/dropdown'
 
 import Message from '@ttn-lw/lib/components/message'
 
@@ -26,39 +27,69 @@ import PropTypes from '@ttn-lw/lib/prop-types'
 import style from './switcher.styl'
 
 const Switcher = ({ isMinimized }) => {
-  const paddingClass = isMinimized ? 'p-vert-cs-xs' : 'p-vert-cs-s'
+  const overviewRef = useRef(null)
+  const applicationsRef = useRef(null)
+  const gatewaysRef = useRef(null)
+  const { pathname } = useLocation()
 
   const getNavLinkClass = useCallback(
     ({ isActive }) =>
-      classnames(style.link, isActive ? style.active : '', paddingClass, 'p-sides-0'),
-    [paddingClass],
+      classnames(style.link, {
+        [style.active]: isActive,
+      }),
+    [],
   )
 
+  const getOverviewNavLinkClass = classnames(style.link, {
+    [style.active]: !pathname.startsWith('/applications') && !pathname.startsWith('/gateways'),
+  })
+
   return (
     <div
       className={classnames(style.switcherContainer, {
-        'direction-column': isMinimized,
+        [style.isMinimized]: isMinimized,
       })}
     >
-      <NavLink to="/" className={getNavLinkClass}>
-        {isMinimized ? (
-          <Icon icon="home" className={style.icon} />
-        ) : (
-          <Message content={sharedMessages.overview} />
+      <NavLink to="/" className={getOverviewNavLinkClass} ref={overviewRef}>
+        <Icon icon="home" className={style.icon} />
+        <Message className={style.caption} content={sharedMessages.overview} />
+        {isMinimized && (
+          <Dropdown.Attached
+            attachedRef={overviewRef}
+            className={style.flyOutList}
+            position="manual"
+            hover
+          >
+            <Dropdown.HeaderItem title={sharedMessages.overview} />
+          </Dropdown.Attached>
         )}
       </NavLink>
-      <NavLink to="/applications" className={getNavLinkClass}>
-        {isMinimized ? (
-          <Icon icon="application" className={style.icon} />
-        ) : (
-          <Message content={sharedMessages.applications} />
+      <NavLink to="/applications" className={getNavLinkClass} ref={applicationsRef}>
+        <Icon icon="application" className={style.icon} />
+        <Message className={style.caption} content={sharedMessages.applications} />
+        {isMinimized && (
+          <Dropdown.Attached
+            attachedRef={applicationsRef}
+            className={style.flyOutList}
+            position="manual"
+            hover
+          >
+            <Dropdown.HeaderItem title={sharedMessages.applications} />
+          </Dropdown.Attached>
         )}
       </NavLink>
-      <NavLink to="/gateways" className={getNavLinkClass}>
-        {isMinimized ? (
-          <Icon icon="gateway" className={style.icon} />
-        ) : (
-          <Message content={sharedMessages.gateways} />
+      <NavLink to="/gateways" className={getNavLinkClass} ref={gatewaysRef}>
+        <Icon icon="gateway" className={style.icon} />
+        <Message className={style.caption} content={sharedMessages.gateways} />
+        {isMinimized && (
+          <Dropdown.Attached
+            attachedRef={gatewaysRef}
+            className={style.flyOutList}
+            position="manual"
+            hover
+          >
+            <Dropdown.HeaderItem title={sharedMessages.gateways} />
+          </Dropdown.Attached>
         )}
       </NavLink>
     </div>