From 513c7bca302b13126a85a0ebe7a32a9122930167 Mon Sep 17 00:00:00 2001
From: Kevin Schiffer <kevin.schiffer@thethingsindustries.com>
Date: Thu, 11 Jan 2024 16:15:14 +0900
Subject: [PATCH] console,account: Apply more fixes

---
 .../breadcrumbs/breadcrumb/breadcrumb.styl    |   9 +-
 .../breadcrumbs/breadcrumb/index.js           |   6 +-
 .../components/breadcrumbs/breadcrumbs.js     |   5 +-
 .../components/breadcrumbs/breadcrumbs.styl   |   4 +-
 pkg/webui/components/button/button.styl       |  17 +-
 pkg/webui/components/button/index.js          |  59 ++-----
 pkg/webui/components/dropdown/attached.js     |  85 ++++++++++
 pkg/webui/components/dropdown/dropdown.styl   |  25 ++-
 pkg/webui/components/dropdown/index.js        | 155 ++++++++----------
 pkg/webui/components/header/header.styl       |   4 +
 pkg/webui/components/header/index.js          |  22 ++-
 pkg/webui/components/logo/index.js            |   9 +-
 pkg/webui/components/logo/logo.styl           | 100 +----------
 .../components/profile-dropdown/index.js      |   3 +-
 .../profile-dropdown/profile-dropdown.styl    |   8 +-
 .../sidebar/dedicated-entity/index.js         |  12 +-
 .../components/sidebar/search-button/index.js |  18 +-
 .../sidebar/search-button/search-button.styl  |  34 +++-
 .../components/sidebar/side-header/index.js   |  34 ++--
 .../sidebar/side-header/side-header.styl      |  13 +-
 .../components/sidebar/side-menu/item/link.js |  17 +-
 .../components/sidebar/switcher/switcher.styl |  37 ++++-
 pkg/webui/console/containers/header/index.js  |   9 +-
 pkg/webui/console/containers/logo/index.js    |  22 +--
 .../console/containers/side-bar/index.js      |  67 +++++---
 .../navigation/app-list-side-navigation.js    |   2 +-
 .../navigation/app-side-navigation.js         |   6 +-
 .../navigation/gtw-side-navigation.js         |   6 +-
 .../console/containers/side-bar/side-bar.styl |  44 +++--
 pkg/webui/console/views/app/app.styl          |  13 +-
 pkg/webui/console/views/app/index.js          |   2 +-
 pkg/webui/console/views/overview/index.js     |  81 +--------
 .../lib/components/full-view-error/error.js   |  73 ++++-----
 pkg/webui/locales/en.json                     |   1 -
 pkg/webui/locales/ja.json                     |   1 -
 pkg/webui/styles/variables/generic.styl       |   1 +
 36 files changed, 494 insertions(+), 510 deletions(-)
 create mode 100644 pkg/webui/components/dropdown/attached.js

diff --git a/pkg/webui/components/breadcrumbs/breadcrumb/breadcrumb.styl b/pkg/webui/components/breadcrumbs/breadcrumb/breadcrumb.styl
index c4ce46675cf..c9e81b013cd 100644
--- a/pkg/webui/components/breadcrumbs/breadcrumb/breadcrumb.styl
+++ b/pkg/webui/components/breadcrumbs/breadcrumb/breadcrumb.styl
@@ -14,29 +14,30 @@
 
 
 .container
+  display: flex
+
   &:not(:last-child):after
     material-icon()
+    nudge('down', 1px)
     margin: 0 $cs.xxs
     content: 'keyboard_arrow_right'
     color: $tc-subtle-gray
 
-
 .link
   one-liner()
   text-decoration: none
   color: $tc-subtle-gray
-  min-height: 18px
+  display: flex
+  align-items: center
   +focus-visible()
     text-decoration: underline
     color: $tc-deep-gray
 
-
 .last
   one-liner()
   display: flex
   align-items: center
   color: $tc-deep-gray
-  min-height: 18px
   font-weight: $fw.bold
   +media-query($bp.s)
     &:last-child
diff --git a/pkg/webui/components/breadcrumbs/breadcrumb/index.js b/pkg/webui/components/breadcrumbs/breadcrumb/index.js
index a25a39d8ba8..dfe3a7ca856 100644
--- a/pkg/webui/components/breadcrumbs/breadcrumb/index.js
+++ b/pkg/webui/components/breadcrumbs/breadcrumb/index.js
@@ -30,17 +30,17 @@ const Breadcrumb = ({ className, path, content, isLast }) => {
   if (!isLast) {
     Component = Link
     componentProps = {
-      className: classnames(className, style.container, style.link),
+      className: style.link,
       to: path,
       secondary: true,
     }
   } else {
     Component = 'span'
-    componentProps = { className: classnames(className, style.container, style.last) }
+    componentProps = { className: classnames(className, style.last) }
   }
 
   return (
-    <span {...componentProps}>
+    <span className={classnames(className, style.container)}>
       <Component {...componentProps}>
         {isRawText ? content : <Message content={content} />}
       </Component>
diff --git a/pkg/webui/components/breadcrumbs/breadcrumbs.js b/pkg/webui/components/breadcrumbs/breadcrumbs.js
index 7c8e6a37a31..b7a492c86f4 100644
--- a/pkg/webui/components/breadcrumbs/breadcrumbs.js
+++ b/pkg/webui/components/breadcrumbs/breadcrumbs.js
@@ -15,7 +15,6 @@
 import React from 'react'
 import ReactDom from 'react-dom'
 import classnames from 'classnames'
-import { Container } from 'react-grid-system'
 
 import PropTypes from '@ttn-lw/lib/prop-types'
 
@@ -52,9 +51,7 @@ const PortalledBreadcrumbs = ({ className, ...rest }) => {
       nodes.push(
         ReactDom.createPortal(
           <div className={classnames(className, style.breadcrumbsContainer)}>
-            <Container>
-              <Breadcrumbs {...rest} />
-            </Container>
+            <Breadcrumbs {...rest} />
           </div>,
           element,
         ),
diff --git a/pkg/webui/components/breadcrumbs/breadcrumbs.styl b/pkg/webui/components/breadcrumbs/breadcrumbs.styl
index 8c23a52e432..c1ab67f57ac 100644
--- a/pkg/webui/components/breadcrumbs/breadcrumbs.styl
+++ b/pkg/webui/components/breadcrumbs/breadcrumbs.styl
@@ -14,10 +14,10 @@
 
 .breadcrumbs
   color: $tc-subtle-gray
-  height: $breadcrumbs-bar-height
   display: flex
   align-items: center
   overflow: hidden
+  height: 1rem
 
   +media-query($bp.s)
     overflow: auto
@@ -30,3 +30,5 @@
   &-container
     box-sizing: border-box
     height: $breadcrumbs-bar-height
+    display: flex
+    align-items: center
diff --git a/pkg/webui/components/button/button.styl b/pkg/webui/components/button/button.styl
index cd755958fe9..0f904770d0d 100644
--- a/pkg/webui/components/button/button.styl
+++ b/pkg/webui/components/button/button.styl
@@ -22,7 +22,7 @@
   &.primary, &.secondary, &.naked
     position: relative
     display: inline-flex
-    transition: 80ms all ease-in-out
+    transition: 80ms background ease-in-out, 80ms color ease-in-out, 80ms border-color ease-in-out, 80ms box-shadow ease-in-out
     border-radius: $br.m
     outline: 0
     cursor: pointer
@@ -35,23 +35,20 @@
     white-space: nowrap
     box-sizing: border-box
 
-  .arrow-icon
-    transform: rotate(0deg)
-    transition: transform .2s ease-in-out
-    margin-right: - $cs.xs
-
-  .arrow-icon-expanded
-    transform: rotate(180deg)
-    transition: transform .2s ease-in-out
-
   .icon
     margin-left: - $cs.xxs
 
     &:only-child
       margin-right: - $cs.xxs
 
+  .expand-icon
+    color: $c.grey-500
+    font-size: 1.285rem
+    margin-right: - $cs.xxs
+
   &.only-icon
     gap: 0
+    padding: 0 $cs.s
 
   &.primary
     color: white
diff --git a/pkg/webui/components/button/index.js b/pkg/webui/components/button/index.js
index abcafb59a97..9d853df0253 100644
--- a/pkg/webui/components/button/index.js
+++ b/pkg/webui/components/button/index.js
@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, { useCallback, forwardRef, useMemo, useState, useRef } from 'react'
+import React, { useCallback, forwardRef, useMemo, useRef } from 'react'
 import classnames from 'classnames'
 import { useIntl } from 'react-intl'
 
@@ -51,7 +51,8 @@ const assembleClassnames = ({
   className,
   error,
 }) =>
-  classnames(style.button, className, {
+  classnames(style.button, {
+    [className]: !Boolean(dropdownItems), // If there are dropdown items, the button is wrapped in a div with the className.
     [style.danger]: danger,
     [style.warning]: warning,
     [style.primary]: primary,
@@ -67,7 +68,7 @@ const assembleClassnames = ({
   })
 
 const buttonChildren = props => {
-  const { dropdownItems, icon, busy, message, expanded, noDropdownIcon, children } = props
+  const { dropdownItems, icon, busy, message, noDropdownIcon, children } = props
 
   const content = (
     <>
@@ -75,16 +76,7 @@ const buttonChildren = props => {
       {message && <Message content={message} className={style.linkButtonMessage} />}
       {children}
       {dropdownItems && (
-        <>
-          {!noDropdownIcon && (
-            <Icon
-              className={classnames(style.arrowIcon, {
-                [style['arrow-icon-expanded']]: expanded,
-              })}
-              icon="expand_more"
-            />
-          )}
-        </>
+        <>{!noDropdownIcon && <Icon className={style.expandIcon} icon="expand_more" />}</>
       )}
     </>
   )
@@ -103,6 +95,7 @@ const Button = forwardRef((props, ref) => {
     disabled,
     dropdownItems,
     dropdownClassName,
+    dropdownPosition,
     name,
     type,
     value,
@@ -111,48 +104,26 @@ const Button = forwardRef((props, ref) => {
     onBlur,
     onClick,
     form,
+    className,
     ...rest
   } = props
-  const [expanded, setExpanded] = useState(false)
   const innerRef = useRef()
   const combinedRef = combineRefs([ref, innerRef])
 
   const dataProps = useMemo(() => filterDataProps(rest), [rest])
 
-  const handleClickOutside = useCallback(
-    e => {
-      if (innerRef.current && !innerRef.current.contains(e.target)) {
-        setExpanded(false)
-      }
-    },
-    [innerRef],
-  )
-
-  const toggleDropdown = useCallback(() => {
-    setExpanded(oldExpanded => {
-      const newState = !oldExpanded
-      if (newState) document.addEventListener('mousedown', handleClickOutside)
-      else document.removeEventListener('mousedown', handleClickOutside)
-      return newState
-    })
-  }, [handleClickOutside])
-
   const handleClick = useCallback(
     evt => {
       if (busy || disabled) {
         return
       }
 
-      if (dropdownItems) {
-        toggleDropdown()
-        return
-      }
       // Passing a value to the onClick handler is useful for components that
       // are rendered multiple times, e.g. in a list. The value can be used to
       // identify the component that was clicked.
       onClick(evt, value)
     },
-    [busy, disabled, dropdownItems, onClick, toggleDropdown, value],
+    [busy, disabled, onClick, value],
   )
 
   const intl = useIntl()
@@ -169,7 +140,7 @@ const Button = forwardRef((props, ref) => {
     <button
       className={buttonClassNames}
       onClick={handleClick}
-      children={buttonChildren({ ...props, expanded })}
+      children={buttonChildren({ ...props })}
       disabled={busy || disabled}
       ref={combinedRef}
       {...htmlProps}
@@ -178,11 +149,15 @@ const Button = forwardRef((props, ref) => {
 
   if (dropdownItems) {
     return (
-      <div className="pos-relative">
+      <div className={classnames(className, 'pos-relative')}>
         {buttonElement}
-        <Dropdown className={classnames(dropdownClassName)} open={expanded}>
+        <Dropdown.Attached
+          className={dropdownClassName}
+          attachedRef={innerRef}
+          position={dropdownPosition}
+        >
           {dropdownItems}
-        </Dropdown>
+        </Dropdown.Attached>
       </div>
     )
   }
@@ -289,7 +264,6 @@ buttonChildren.propTypes = {
    */
   busy: commonPropTypes.busy,
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
-  expanded: PropTypes.bool,
   icon: commonPropTypes.icon,
   message: commonPropTypes.message,
 }
@@ -299,7 +273,6 @@ buttonChildren.defaultProps = {
   icon: undefined,
   message: undefined,
   children: null,
-  expanded: false,
   small: false,
 }
 
diff --git a/pkg/webui/components/dropdown/attached.js b/pkg/webui/components/dropdown/attached.js
new file mode 100644
index 00000000000..e5a3f4bd76d
--- /dev/null
+++ b/pkg/webui/components/dropdown/attached.js
@@ -0,0 +1,85 @@
+// Copyright © 2024 The Things Network Foundation, The Things Industries B.V.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React, { useCallback, useEffect } from 'react'
+
+import Dropdown from '@ttn-lw/components/dropdown'
+
+import PropTypes from '@ttn-lw/lib/prop-types'
+
+const AttachedDropdown = ({ attachedRef, onItemsClick, hover, onOutsideClick, ...rest }) => {
+  const [open, setOpen] = React.useState(false)
+
+  useEffect(() => {
+    if (!attachedRef.current) {
+      return
+    }
+    const openEvent = hover ? 'mouseenter' : 'click'
+    const node = attachedRef.current
+    const toggleDropdown = () => setOpen(val => !val)
+    const closeDropdown = () => setOpen(false)
+
+    node.addEventListener(openEvent, toggleDropdown)
+    if (hover) {
+      node.addEventListener('mouseleave', closeDropdown)
+    }
+    return () => {
+      node.removeEventListener(openEvent, toggleDropdown)
+      if (hover) {
+        node.removeEventListener('mouseleave', closeDropdown)
+      }
+    }
+  }, [attachedRef, hover, open])
+
+  const handleItemsClick = useCallback(() => {
+    setOpen(false)
+    onItemsClick()
+  }, [onItemsClick])
+
+  const handleOutsideClick = useCallback(
+    e => {
+      if (attachedRef.current && attachedRef.current.contains(e.target)) {
+        // Ignore clicks on the attached element, so that toggling is possible.
+        return
+      }
+      setOpen(false)
+      onOutsideClick()
+    },
+    [attachedRef, onOutsideClick],
+  )
+
+  return (
+    <Dropdown
+      open={open}
+      onItemsClick={handleItemsClick}
+      onOutsideClick={handleOutsideClick}
+      {...rest}
+    />
+  )
+}
+
+AttachedDropdown.propTypes = {
+  attachedRef: PropTypes.shape({ current: PropTypes.instanceOf(Element) }).isRequired,
+  hover: PropTypes.bool,
+  onItemsClick: PropTypes.func,
+  onOutsideClick: PropTypes.func,
+}
+
+AttachedDropdown.defaultProps = {
+  onItemsClick: () => null,
+  onOutsideClick: () => null,
+  hover: false,
+}
+
+export default AttachedDropdown
diff --git a/pkg/webui/components/dropdown/dropdown.styl b/pkg/webui/components/dropdown/dropdown.styl
index 3eb6bd137bf..390b3d0f604 100644
--- a/pkg/webui/components/dropdown/dropdown.styl
+++ b/pkg/webui/components/dropdown/dropdown.styl
@@ -25,21 +25,14 @@ ul.dropdown
   min-width: 16rem
   max-width: 24rem
   z-index: $zi.dropdown
-  margin: $cs.xxs 0 0
-  opacity: 0
-  visibility: hidden
-
-  &.open
-    opacity: 1
-    visibility: visible
 
   &.below
     bottom: auto
-    top: calc(100% + 7px)
+    top: calc(100% - 4px)
 
   &.above
     top: auto
-    bottom: calc(100% + 7px)
+    bottom: calc(100% - 4px)
 
   &.left
     left: 0
@@ -78,6 +71,7 @@ ul.dropdown
   li.dropdown-item
     margin-bottom: 0
     text-align: left
+    position: relative
 
     button.button
       reset-button()
@@ -113,3 +107,16 @@ ul.dropdown
     left: calc(100% + .5rem) // Width plus padding.
     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%
+
+    &-icon
+      margin-right: - $cs.xs
+
diff --git a/pkg/webui/components/dropdown/index.js b/pkg/webui/components/dropdown/index.js
index 8b7ee7f0f6b..6596395dcc8 100644
--- a/pkg/webui/components/dropdown/index.js
+++ b/pkg/webui/components/dropdown/index.js
@@ -12,9 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef } from 'react'
 import classnames from 'classnames'
-import { NavLink } from 'react-router-dom'
 
 import Icon from '@ttn-lw/components/icon'
 import Link from '@ttn-lw/components/link'
@@ -23,55 +22,59 @@ import Message from '@ttn-lw/lib/components/message'
 
 import PropTypes from '@ttn-lw/lib/prop-types'
 
+import AttachedDropdown from './attached'
+
 import style from './dropdown.styl'
 
-const Dropdown = ({ className, children, larger, onItemsClick, open }) => {
+const Dropdown = ({
+  className,
+  children,
+  larger,
+  onItemsClick,
+  onOutsideClick,
+  open,
+  position,
+}) => {
   const ref = useRef(null)
-  const [isBelow, setIsBelow] = useState(false)
-  const [isOnRight, setIsOnRight] = useState(false)
-
-  const positionDropdown = useCallback(() => {
-    if (ref.current) {
-      const parentRect = ref.current.parentElement.getBoundingClientRect()
-      const spaceBelow = window.innerHeight - parentRect.bottom
-      const spaceAbove = parentRect.top
-      const dropdownHeight = ref.current.clientHeight
-      const dropdownWidth = ref.current.clientWidth
-      const spaceOnLeft = parentRect.left
-
-      setIsBelow(spaceBelow > dropdownHeight || spaceAbove < dropdownHeight)
-
-      setIsOnRight(spaceOnLeft > dropdownWidth)
-    }
-  }, [])
-
+  // Attach event listeners to the document to close the dropdown when clicking outside of it.
   useEffect(() => {
-    if (open) positionDropdown()
-  }, [positionDropdown, open])
+    const handleClickOutside = e => {
+      if (ref.current && !ref.current.contains(e.target)) {
+        onOutsideClick(e)
+      }
+    }
 
-  useEffect(() => {
-    window.addEventListener('scroll', positionDropdown)
-    window.addEventListener('resize', positionDropdown)
+    document.addEventListener('mousedown', handleClickOutside)
 
     return () => {
-      window.removeEventListener('resize', positionDropdown)
-      window.removeEventListener('scroll', positionDropdown)
+      document.removeEventListener('mousedown', handleClickOutside)
     }
-  }, [positionDropdown])
+  }, [onOutsideClick])
+
+  if (!open) {
+    return null
+  }
+
+  const pos = position.split(' ')
+  const manual = pos.includes('manual')
+  const cls = classnames(
+    style.dropdown,
+    className,
+    {
+      [style.larger]: larger,
+    },
+    !manual
+      ? {
+          [style.below]: pos.includes('below'),
+          [style.above]: pos.includes('above'),
+          [style.right]: pos.includes('right'),
+          [style.left]: pos.includes('left'),
+        }
+      : {},
+  )
 
   return (
-    <ul
-      onClick={onItemsClick}
-      className={classnames(style.dropdown, className, {
-        [style.larger]: larger,
-        [style.below]: isBelow,
-        [style.above]: !isBelow,
-        [style.right]: isOnRight,
-        [style.left]: !isOnRight,
-        [style.open]: open,
-      })}
-      ref={ref}
-    >
+    <ul onClick={onItemsClick} className={cls} ref={ref}>
       {children}
     </ul>
   )
@@ -82,13 +85,17 @@ Dropdown.propTypes = {
   className: PropTypes.string,
   larger: PropTypes.bool,
   onItemsClick: PropTypes.func,
+  onOutsideClick: PropTypes.func,
   open: PropTypes.bool.isRequired,
+  position: PropTypes.string,
 }
 
 Dropdown.defaultProps = {
   className: undefined,
   larger: false,
   onItemsClick: () => null,
+  onOutsideClick: () => null,
+  position: 'below left',
 }
 
 const DropdownItem = ({
@@ -104,8 +111,7 @@ const DropdownItem = ({
   external,
   ...rest
 }) => {
-  const [expandedSubmenu, setExpandedSubmenu] = useState(false)
-  const [leaveDelayTimer, setLeaveDelayTimer] = useState(null)
+  const ref = useRef()
   const iconElement = icon && <Icon className={style.icon} icon={icon} nudgeUp />
   const ItemElement = action ? (
     <button
@@ -119,60 +125,30 @@ const DropdownItem = ({
       <Message content={title} />
     </button>
   ) : (
-    <Link.Anchor href={path} external={external} tabIndex={tabIndex} className={style.button}>
+    <Link to={path} external={external} tabIndex={tabIndex} className={style.button}>
       {Boolean(iconElement) ? iconElement : null}
       <Message content={title} />
-    </Link.Anchor>
-  )
-
-  const handleMouseEnter = useCallback(() => {
-    if (leaveDelayTimer) {
-      clearTimeout(leaveDelayTimer)
-      setLeaveDelayTimer(null)
-    }
-    setExpandedSubmenu(true)
-  }, [leaveDelayTimer])
-
-  const handleMouseLeave = useCallback(() => {
-    // Set a timer when mouse leaves, to only close after a delay.
-    // This prevents the menu from closing when the mouse moves over the submenu
-    // and also makes the UI more forgiving when the mouse accidentally leaves the menu.
-    setLeaveDelayTimer(
-      setTimeout(() => {
-        setExpandedSubmenu(false)
-      }, 250),
-    )
-  }, [])
-
-  useEffect(
-    () => () => {
-      if (leaveDelayTimer) {
-        clearTimeout(leaveDelayTimer)
-      }
-    },
-    [leaveDelayTimer],
+    </Link>
   )
 
-  const withSubmenu = (
-    <button
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-      className={classnames(style.button, 'd-flex', 'j-between')}
-    >
-      <div>
-        {iconElement}
-        <Message content={title} />
-      </div>
-      <Icon icon="chevron_right" />
-      <Dropdown open={expandedSubmenu} className={style.submenuDropdown}>
+  const submenu = Boolean(submenuItems) && (
+    <>
+      <button className={classnames(style.button, 'd-flex', 'j-between')}>
+        <div>
+          {iconElement}
+          <Message content={title} />
+        </div>
+        <Icon className={style.submenuDropdownIcon} icon="chevron_right" />
+      </button>
+      <Dropdown.Attached attachedRef={ref} className={style.submenuDropdown} position="left" hover>
         {submenuItems}
-      </Dropdown>
-    </button>
+      </Dropdown.Attached>
+    </>
   )
 
   return (
-    <li className={style.dropdownItem} key={title.id || title} {...rest}>
-      {Boolean(submenuItems) ? withSubmenu : ItemElement}
+    <li className={style.dropdownItem} key={title.id || title} {...rest} ref={ref}>
+      {submenu || ItemElement}
     </li>
   )
 }
@@ -216,5 +192,6 @@ DropdownHeaderItem.propTypes = {
 
 Dropdown.Item = DropdownItem
 Dropdown.HeaderItem = DropdownHeaderItem
+Dropdown.Attached = AttachedDropdown
 
 export default Dropdown
diff --git a/pkg/webui/components/header/header.styl b/pkg/webui/components/header/header.styl
index 4f555e5b5b7..ab46e66d957 100644
--- a/pkg/webui/components/header/header.styl
+++ b/pkg/webui/components/header/header.styl
@@ -21,6 +21,10 @@
   justify-content: space-between
   align-items: center
   height: 4rem
+  +media-query($bp.xs)
+    padding: 0 $cs.xs
 
 .logo
   height: $cs.l
+  +media-query($bp.xs)
+    width: 3rem
diff --git a/pkg/webui/components/header/index.js b/pkg/webui/components/header/index.js
index 4e9bd79180a..175b08f41dc 100644
--- a/pkg/webui/components/header/index.js
+++ b/pkg/webui/components/header/index.js
@@ -17,7 +17,6 @@ import classnames from 'classnames'
 
 import Button from '@ttn-lw/components/button'
 import ProfileDropdown from '@ttn-lw/components/profile-dropdown'
-import Link from '@ttn-lw/components/link'
 
 import PropTypes from '@ttn-lw/lib/prop-types'
 
@@ -37,16 +36,27 @@ const Header = ({
   // Const isGuest = !Boolean(user)
 
   <header {...rest} className={classnames(className, style.container)}>
-    <div className={classnames('breadcrumbs', 's:d-none')} />
-    <div className="d-none s:d-flex al-center gap-cs-xs">
+    <div className={classnames('breadcrumbs', 'm:d-none')} />
+    <div className="d-none m:d-flex al-center gap-cs-xs">
       <Button secondary icon="menu" onClick={onMenuClick} />
       <Logo className={style.logo} />
     </div>
 
     <div className="d-flex al-center gap-cs-xs">
-      <Button secondary icon="add" dropdownItems={addDropdownItems} />
-      <Button secondary icon="grade" dropdownItems={starDropdownItems} className="s:d-none" />
-      <Button secondary icon="inbox" />
+      <Button
+        secondary
+        icon="add"
+        dropdownItems={addDropdownItems}
+        dropdownPosition="below right"
+      />
+      <Button
+        secondary
+        icon="grade"
+        dropdownItems={starDropdownItems}
+        dropdownPosition="below right"
+        className="xs:d-none"
+      />
+      <Button secondary icon="inbox" dropdownItems={<></>} dropdownPosition="below right" />
       <ProfileDropdown
         brandLogo={brandLogo}
         data-test-id="profile-dropdown"
diff --git a/pkg/webui/components/logo/index.js b/pkg/webui/components/logo/index.js
index ca93c8369c9..5cec3dbd3c7 100644
--- a/pkg/webui/components/logo/index.js
+++ b/pkg/webui/components/logo/index.js
@@ -19,16 +19,14 @@ import PropTypes from '@ttn-lw/lib/prop-types'
 
 import style from './logo.styl'
 
-const Logo = ({ className, logo, brandLogo, vertical }) => {
-  const classname = classnames(style.container, className, {
-    [style.vertical]: vertical,
-    [style.customBranding]: Boolean(brandLogo),
-  })
+const Logo = ({ className, logo, miniLogo }) => {
+  const classname = classnames(style.container, className)
 
   return (
     <div className={classname}>
       <div className={style.logo}>
         <img {...logo} />
+        <img {...miniLogo} />
       </div>
     </div>
   )
@@ -43,6 +41,7 @@ Logo.propTypes = {
   brandLogo: imgPropType,
   className: PropTypes.string,
   logo: imgPropType.isRequired,
+  miniLogo: imgPropType.isRequired,
   safe: PropTypes.bool,
   vertical: PropTypes.bool,
 }
diff --git a/pkg/webui/components/logo/logo.styl b/pkg/webui/components/logo/logo.styl
index f24babdd7e5..4d69f34d1dd 100644
--- a/pkg/webui/components/logo/logo.styl
+++ b/pkg/webui/components/logo/logo.styl
@@ -26,104 +26,22 @@
     display: flex
     align-items: center
     line-height: 0
-    height: 2.3rem
-    padding: $cs.m 0
 
     img
       width: 100%
 
-    +media-query($bp.s)
-      width: 9rem
-      height: 2.1rem
-
   .logo
     display: flex
     align-items: center
 
-  .brand-logo
-    display: flex
-    align-items: center
-    justify-content: center
-    flex-direction: column
-    max-width: 9rem
-
-    +media-query-min($bp.s)
-      height: 3rem
-
-    +media-query($bp.s)
-      height: 2rem
-
-    &-container
-      display: flex
-      align-items: center
-      height: 100%
-      width: 100%
-
-  &:not(.vertical)
-    &:not(.custom-branding)
-      .logo-container
-        width: 13rem
-        +media-query($bp.s)
-          width: 12rem
-
-    &.custom-branding .logo
-      display: flex
-      align-items: center
-      padding-left: 'calc(%s - .15rem)' % $ls.xs
-      +media-query($bp.s)
-        padding-left: $cs.s
-
-      .logo-container
-        nudge('down', .15rem)
-        width: 11rem
-        +media-query($bp.s)
-          width: 8rem
-
-    .brand-logo
-      border-dark('right')
-      align-items: center
-      padding-right: $ls.xs
-      +media-query($bp.s)
-        padding-right: $cs.s
-
-      &-container
-        +media-query($bp.s)
-          max-width: 6rem
-          height: 2.5rem
-
-          img
-            width: 100%
-
-        img
-          object-position: left
-
-  &.vertical
-    width: 15rem
-    flex-direction: column
-    margin-bottom: $ls.s
-
-    &.custom-branding .logo
-      border-dark('top')
-      padding-top: $ls.xs
-      margin-top: $ls.xs
-      height: auto
-      width: 100%
-
-      &-container
-        width: 100%
-        height: auto
-
-    .brand-logo
-      margin-left: auto
-      margin-right: auto
-      width: 100%
-
-      &-container
+    +media-query-min($bp.xs)
+      img:first-child
         display: block
-        max-height: 3rem
-        max-width: 10rem
-        width: 100%
+      img:last-child
+        display: none
 
-        img
-          object-position: center
-          width: 100%
+    +media-query($bp.xs)
+      img:first-child
+        display: none
+      img:last-child
+        display: block
diff --git a/pkg/webui/components/profile-dropdown/index.js b/pkg/webui/components/profile-dropdown/index.js
index b9a4d7bc591..ef6fd51c490 100644
--- a/pkg/webui/components/profile-dropdown/index.js
+++ b/pkg/webui/components/profile-dropdown/index.js
@@ -15,10 +15,8 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import Icon from '@ttn-lw/components/icon'
 import ProfilePicture from '@ttn-lw/components/profile-picture'
 import Button from '@ttn-lw/components/button'
-import style from '@ttn-lw/components/button/button.styl'
 
 import PropTypes from '@ttn-lw/lib/prop-types'
 
@@ -33,6 +31,7 @@ const ProfileDropdown = props => {
         secondary
         className={classnames(styles.container, className, 'pr-0')}
         dropdownItems={children}
+        dropdownPosition="below right"
         {...rest}
       >
         <div className="d-flex gap-cs-xs al-center">
diff --git a/pkg/webui/components/profile-dropdown/profile-dropdown.styl b/pkg/webui/components/profile-dropdown/profile-dropdown.styl
index 0d9c05d1d1b..b30cbf8781d 100644
--- a/pkg/webui/components/profile-dropdown/profile-dropdown.styl
+++ b/pkg/webui/components/profile-dropdown/profile-dropdown.styl
@@ -13,10 +13,12 @@
 // limitations under the License.
 
 .container
-  padding: 0 0.25rem 0 0
   position: relative
   gap: 0
 
+  button
+    padding: 0 $cs.s !important
+
 .brand-logo
   height: 1.14rem
 
@@ -24,5 +26,5 @@
     display: none
 
 .profile-picture
-  height: 1.5rem !important
-  width: 1.5rem !important
+  height: 1.5rem
+  width: 1.5rem
diff --git a/pkg/webui/components/sidebar/dedicated-entity/index.js b/pkg/webui/components/sidebar/dedicated-entity/index.js
index ba13c22dc79..662e279b206 100644
--- a/pkg/webui/components/sidebar/dedicated-entity/index.js
+++ b/pkg/webui/components/sidebar/dedicated-entity/index.js
@@ -24,20 +24,16 @@ import PropTypes from '@ttn-lw/lib/prop-types'
 
 import style from './dedicated-entity.styl'
 
-const DedicatedEntity = ({ label, className, buttonMessage, path, backPath, exact }) => (
+const DedicatedEntity = ({ label, className, buttonMessage, path, backPath }) => (
   <div className={classnames(className, style.dedicatedEntity)}>
-    <Link to={backPath} end={exact} className={style.dedicatedEntityCurtain}>
+    <Link to={backPath} className={style.dedicatedEntityCurtain}>
       <Button
         className={style.dedicatedEntityButton}
         icon="arrow_left_alt"
         message={buttonMessage}
       />
     </Link>
-    <Link
-      className={classnames(style.dedicatedEntityItem, 'd-flex', 'al-center')}
-      to={path}
-      end={exact}
-    >
+    <Link className={classnames(style.dedicatedEntityItem, 'd-flex', 'al-center')} to={path}>
       <hr className={style.dedicatedEntityDivider} />
       <Message content={label} className={style.dedicatedEntityLabel} component="p" />
     </Link>
@@ -48,14 +44,12 @@ DedicatedEntity.propTypes = {
   backPath: PropTypes.string.isRequired,
   buttonMessage: PropTypes.message.isRequired,
   className: PropTypes.string,
-  exact: PropTypes.bool,
   label: PropTypes.string.isRequired,
   path: PropTypes.string.isRequired,
 }
 
 DedicatedEntity.defaultProps = {
   className: undefined,
-  exact: false,
 }
 
 export default DedicatedEntity
diff --git a/pkg/webui/components/sidebar/search-button/index.js b/pkg/webui/components/sidebar/search-button/index.js
index 99dcbe4e033..5b4f2854333 100644
--- a/pkg/webui/components/sidebar/search-button/index.js
+++ b/pkg/webui/components/sidebar/search-button/index.js
@@ -12,11 +12,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, { useCallback, useContext } from 'react'
+import React, { useCallback, useContext, useRef } from 'react'
 import classnames from 'classnames'
 
 import Button from '@ttn-lw/components/button'
 import Icon from '@ttn-lw/components/icon'
+import Dropdown from '@ttn-lw/components/dropdown'
 
 import Message from '@ttn-lw/lib/components/message'
 
@@ -28,6 +29,7 @@ import PropTypes from '@ttn-lw/lib/prop-types'
 import style from './search-button.styl'
 
 const SearchButton = ({ onClick, className }) => {
+  const ref = useRef(null)
   const { isMinimized } = useContext(SidebarContext)
 
   const handleClick = useCallback(() => {
@@ -37,19 +39,21 @@ const SearchButton = ({ onClick, className }) => {
   return (
     <Button
       onClick={handleClick}
+      ref={ref}
       className={classnames(style.searchButton, className, {
-        [style.searchButtonMinimized]: isMinimized,
+        [style.isMinimized]: isMinimized,
       })}
     >
       <div className="d-flex gap-cs-xxs al-center">
         <Icon icon="search" className={style.icon} />
-        {!isMinimized && <Message content={sharedMessages.search} component="p" className="m-0" />}
+        <Message content={sharedMessages.search} component="p" className="m-0" />
       </div>
-      {!isMinimized && (
-        <div className={style.backslashContainer}>
-          <Message content="/" component="p" className={style.backslash} />
-        </div>
+      {isMinimized && (
+        <Dropdown.Attached attachedRef={ref} position="manual" className={style.flyOutList} hover>
+          <Dropdown.HeaderItem title={sharedMessages.search} />
+        </Dropdown.Attached>
       )}
+      <p className={style.backslash}>/</p>
     </Button>
   )
 }
diff --git a/pkg/webui/components/sidebar/search-button/search-button.styl b/pkg/webui/components/sidebar/search-button/search-button.styl
index dbc26d26213..eb37023e814 100644
--- a/pkg/webui/components/sidebar/search-button/search-button.styl
+++ b/pkg/webui/components/sidebar/search-button/search-button.styl
@@ -19,23 +19,31 @@
   position: relative
   display: flex
   justify-content: space-between
+  align-items: center
   padding: $cs.xxs $cs.xxs
   gap: $cs.xxs
   box-shadow: 0px 2px 7px 1px rgba(0, 0, 0, 0.06)
   background: white
-  border: 1px solid $c.grey-100
+  border: 1px solid $c.grey-200
   border-radius: $br.l
   transition: border-color 0.08s linear, box-shadow 0.08s linear, color 0.08s linear
 
+
   &:hover
     border: 1px solid $c.grey-200
     color: $c.grey-700
     box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.08)
 
-  &-minimized
+  &.is-minimized
     justify-content: center
     padding: $cs.xs $cs.xxs
 
+    & > div p
+      display: none
+
+    .backslash
+      display: none
+
   p
     line-height: 1.4
 
@@ -44,7 +52,8 @@
     position: relative
     top: 1px
 
-  .backslash-container
+  .backslash
+    margin: 0
     height: 1.65rem // 24px
     width: 1.65rem // 24px
     text-align: center
@@ -54,3 +63,22 @@
     display: flex
     justify-content: center
     align-items: center
+    padding-bottom: 1px
+
+  .fly-out-list
+    margin: 0
+    top: - $cs.xs
+    left: calc(4rem - 4px) // Button width plus 2 borders plus 2px.
+    position: absolute
+    z-index: $zi.dropdown
+    color: $c.grey-900
+
+    // 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%
diff --git a/pkg/webui/components/sidebar/side-header/index.js b/pkg/webui/components/sidebar/side-header/index.js
index 74c675aeec2..b3c225e11f0 100644
--- a/pkg/webui/components/sidebar/side-header/index.js
+++ b/pkg/webui/components/sidebar/side-header/index.js
@@ -16,8 +16,6 @@ import React, { useContext } from 'react'
 import classnames from 'classnames'
 import { Link } from 'react-router-dom'
 
-import LAYOUT from '@ttn-lw/constants/layout'
-
 import Button from '@ttn-lw/components/button'
 
 import SidebarContext from '@console/containers/side-bar/context'
@@ -26,14 +24,8 @@ import PropTypes from '@ttn-lw/lib/prop-types'
 
 import style from './side-header.styl'
 
-const getViewportWidth = () =>
-  Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
-
 const SideHeader = ({ logo, miniLogo }) => {
-  const { onMinimizeToggle, isMinimized } = useContext(SidebarContext)
-
-  const viewportWidth = getViewportWidth()
-  const isMobile = viewportWidth <= LAYOUT.BREAKPOINTS.M
+  const { onMinimizeToggle, isMinimized, onDrawerCloseClick } = useContext(SidebarContext)
 
   return (
     <div
@@ -43,17 +35,21 @@ const SideHeader = ({ logo, miniLogo }) => {
     >
       {/* Render two logos to prevent layout flashes when switching between minimized and maximized states. */}
       <Link to="/">
-        <img {...logo} className={classnames(style.logo, { 'd-none': isMinimized })} />
-        <img {...miniLogo} className={classnames(style.miniLogo, { 'd-none': !isMinimized })} />
+        <img {...logo} className={classnames(style.logo)} />
+        <img {...miniLogo} className={classnames(style.miniLogo)} />
       </Link>
-      {!isMobile && (
-        <Button
-          className={style.minimizeButton}
-          icon={isMinimized ? 'left_panel_open' : 'left_panel_close'}
-          onClick={onMinimizeToggle}
-          naked
-        />
-      )}
+      <Button
+        className={classnames(style.minimizeButton, 's:d-none')}
+        icon={isMinimized ? 'left_panel_open' : 'left_panel_close'}
+        onClick={onMinimizeToggle}
+        naked
+      />
+      <Button
+        className={classnames(style.minimizeButton, 'd-none', 's:d-flex')}
+        icon="close"
+        onClick={onDrawerCloseClick}
+        naked
+      />
     </div>
   )
 }
diff --git a/pkg/webui/components/sidebar/side-header/side-header.styl b/pkg/webui/components/sidebar/side-header/side-header.styl
index d3274238fed..0903bd5ab39 100644
--- a/pkg/webui/components/sidebar/side-header/side-header.styl
+++ b/pkg/webui/components/sidebar/side-header/side-header.styl
@@ -19,8 +19,15 @@
   gap: $cs.m
 
   &.is-minimized
-    flex-direction: column
-    gap: $cs.xs
+    +media-query-min($bp.m)
+      flex-direction: column
+      gap: $cs.xs
+
+      .logo
+        display: none
+
+      .mini-logo
+        display: flex
 
   .minimize-button
     transition: none
@@ -34,4 +41,6 @@
     width: 9.57rem
 
   .mini-logo
+    display: none
     width: 2.8rem
+    padding: $cs.s 0
diff --git a/pkg/webui/components/sidebar/side-menu/item/link.js b/pkg/webui/components/sidebar/side-menu/item/link.js
index b81b6256c5e..12956e442fb 100644
--- a/pkg/webui/components/sidebar/side-menu/item/link.js
+++ b/pkg/webui/components/sidebar/side-menu/item/link.js
@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, { useCallback, useContext } from 'react'
+import React, { useCallback, useContext, useRef } from 'react'
 import { NavLink } from 'react-router-dom'
 import classnames from 'classnames'
 
@@ -28,6 +28,7 @@ import PropTypes from '@ttn-lw/lib/prop-types'
 import style from './item.styl'
 
 const MenuLink = ({ icon, title, path, onClick, exact, disabled }) => {
+  const ref = useRef()
   const { isMinimized } = useContext(SidebarContext)
 
   const className = useCallback(
@@ -35,21 +36,19 @@ const MenuLink = ({ icon, title, path, onClick, exact, disabled }) => {
       classnames(style.link, {
         [style.active]: isActive,
         [style.disabled]: disabled,
-        'j-center': isMinimized,
+        [style.isMinimized]: isMinimized,
       }),
     [disabled, isMinimized],
   )
 
   return (
-    <NavLink to={path} className={className} end={exact} onClick={onClick}>
+    <NavLink to={path} className={className} end={exact} onClick={onClick} ref={ref}>
       {icon && <Icon icon={icon} className={classnames(style.icon)} />}{' '}
-      {!isMinimized && <Message content={title} />}
+      <Message className={style.title} content={title} />
       {isMinimized && (
-        <div className={style.flyOutListContainer}>
-          <Dropdown open className={style.flyOutList} onItemsClick={onClick}>
-            <Dropdown.HeaderItem title={title.defaultMessage} />
-          </Dropdown>
-        </div>
+        <Dropdown.Attached attachedRef={ref} className={style.flyOutList} position="manual" hover>
+          <Dropdown.HeaderItem title={title.defaultMessage} />
+        </Dropdown.Attached>
       )}
     </NavLink>
   )
diff --git a/pkg/webui/components/sidebar/switcher/switcher.styl b/pkg/webui/components/sidebar/switcher/switcher.styl
index d3039557daa..e0160f6662e 100644
--- a/pkg/webui/components/sidebar/switcher/switcher.styl
+++ b/pkg/webui/components/sidebar/switcher/switcher.styl
@@ -14,7 +14,7 @@
 
 .switcher-container
   border-radius: $br.l
-  border: 1px solid $c.grey-100
+  border: 1px solid $c.grey-200
   background: white
   box-shadow: 0px 2px 7px 1px rgba(0, 0, 0, 0.06)
   display: flex
@@ -29,7 +29,9 @@
     display: flex
     justify-content: center
     width: 100%
-    transition: background 200ms ease-in-out
+    transition: background 80ms ease-in-out
+    position: relative
+    padding: $cs.s $cs.xxs
 
     &.active
       background: $c.grey-900
@@ -46,6 +48,37 @@
       &:not(.active)
         background: $c.grey-100
 
+  &.is-minimized
+    flex-direction: column
+
+    .link
+      padding: $cs.xs 0
+
+    .caption
+      display: none
+
+    .icon
+      display: block
+
   .icon
+    display: none
     font-size: $fs.xl
     font-weight: 300
+
+  .fly-out-list
+    margin: 0
+    top: - $cs.xs
+    left: calc(3.5rem - 1px)
+    position: absolute
+    z-index: $zi.dropdown
+    color: $c.grey-900
+
+    // 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%
diff --git a/pkg/webui/console/containers/header/index.js b/pkg/webui/console/containers/header/index.js
index 6ca6c5291ea..52354d33118 100644
--- a/pkg/webui/console/containers/header/index.js
+++ b/pkg/webui/console/containers/header/index.js
@@ -20,6 +20,7 @@ import Dropdown from '@ttn-lw/components/dropdown'
 
 import sharedMessages from '@ttn-lw/lib/shared-messages'
 import { selectAssetsRootPath, selectBrandingRootPath } from '@ttn-lw/lib/selectors/env'
+import PropTypes from '@ttn-lw/lib/prop-types'
 
 import selectAccountUrl from '@console/lib/selectors/app-config'
 import {
@@ -37,7 +38,7 @@ import Logo from '../logo'
 
 const accountUrl = selectAccountUrl()
 
-const Header = () => {
+const Header = ({ onMenuClick }) => {
   const dispatch = useDispatch()
 
   const handleLogout = useCallback(() => dispatch(logout()), [dispatch])
@@ -122,9 +123,13 @@ const Header = () => {
       starDropdownItems={[]}
       brandLogo={brandLogo}
       Logo={Logo}
-      onMenuClick={() => null}
+      onMenuClick={onMenuClick}
     />
   )
 }
 
+Header.propTypes = {
+  onMenuClick: PropTypes.func.isRequired,
+}
+
 export default Header
diff --git a/pkg/webui/console/containers/logo/index.js b/pkg/webui/console/containers/logo/index.js
index 00aed4c3a72..dd79fc2f80c 100644
--- a/pkg/webui/console/containers/logo/index.js
+++ b/pkg/webui/console/containers/logo/index.js
@@ -16,24 +16,16 @@ import React from 'react'
 
 import LogoComponent from '@ttn-lw/components/logo'
 
-import {
-  selectAssetsRootPath,
-  selectBrandingRootPath,
-  selectApplicationSiteName,
-} from '@ttn-lw/lib/selectors/env'
+import { selectAssetsRootPath, selectApplicationSiteName } from '@ttn-lw/lib/selectors/env'
 
 const logo = {
-  src: `${selectAssetsRootPath()}/logo.svg`,
+  src: `${selectAssetsRootPath()}/tts-logo.svg`,
   alt: `${selectApplicationSiteName()} Logo`,
 }
-const hasCustomBranding = selectBrandingRootPath() !== selectAssetsRootPath()
-const brandLogo = hasCustomBranding
-  ? {
-      src: `${selectBrandingRootPath()}/logo.svg`,
-      alt: 'Logo',
-    }
-  : undefined
-
-const Logo = props => <LogoComponent logo={logo} brandLogo={brandLogo} {...props} />
+const miniLogo = {
+  src: `${selectAssetsRootPath()}/tts-logo-icon.svg`,
+  alt: `${selectApplicationSiteName()} Logo`,
+}
+const Logo = props => <LogoComponent logo={logo} miniLogo={miniLogo} {...props} />
 
 export default Logo
diff --git a/pkg/webui/console/containers/side-bar/index.js b/pkg/webui/console/containers/side-bar/index.js
index 429c5422d7f..82ac94aa54b 100644
--- a/pkg/webui/console/containers/side-bar/index.js
+++ b/pkg/webui/console/containers/side-bar/index.js
@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { useLocation } from 'react-router-dom'
 import classnames from 'classnames'
 
@@ -31,15 +31,28 @@ import SwitcherContainer from './switcher'
 
 import style from './side-bar.styl'
 
-const getViewportWidth = () =>
-  Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
-
-const Sidebar = ({ isDrawerOpen }) => {
-  const viewportWidth = getViewportWidth()
-  const isMobile = viewportWidth <= LAYOUT.BREAKPOINTS.M
+const Sidebar = ({ isDrawerOpen, onDrawerCloseClick }) => {
   const { pathname } = useLocation()
   const [isMinimized, setIsMinimized] = useState(false)
 
+  // Reset minimized state when screen size changes to mobile.
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth < LAYOUT.BREAKPOINTS.M) {
+        setIsMinimized(false)
+      }
+    }
+
+    window.addEventListener('resize', handleResize)
+
+    return () => window.removeEventListener('resize', handleResize)
+  }, [])
+
+  // Close the drawer on navigation changes.
+  useEffect(() => {
+    onDrawerCloseClick()
+  }, [pathname, onDrawerCloseClick])
+
   const onMinimizeToggle = useCallback(async () => {
     setIsMinimized(prev => !prev)
   }, [])
@@ -58,36 +71,38 @@ const Sidebar = ({ isDrawerOpen }) => {
     'd-flex direction-column j-between gap-cs-m bg-tts-primary-050',
     {
       [style.sidebarMinimized]: isMinimized,
-      [style.sidebarOpen]: isMobile && isDrawerOpen,
+      [style.sidebarOpen]: isDrawerOpen,
       'p-cs-m': !isMinimized,
-      'p-vert-cs-l': isMinimized,
+      'p-vert-cs-s': isMinimized,
       'p-sides-cs-xs': isMinimized,
     },
   )
 
   return (
-    <div className={sidebarClassnames} id="sidebar">
-      <SidebarContext.Provider value={{ topEntities, onMinimizeToggle, isMinimized }}>
-        <div className="d-flex direction-column gap-cs-m">
-          <SideHeader />
-          <div className="d-flex direction-column gap-cs-m">
-            <SwitcherContainer />
-            <SearchButton onClick={() => null} />
+    <>
+      <div className={sidebarClassnames} id="sidebar">
+        <SidebarContext.Provider
+          value={{ topEntities, onMinimizeToggle, isMinimized, onDrawerCloseClick }}
+        >
+          <div className="d-flex direction-column gap-cs-l">
+            <SideHeader />
+            <div className="d-flex direction-column gap-cs-m">
+              <SwitcherContainer />
+              <SearchButton onClick={() => null} />
+            </div>
+            <SidebarNavigation />
           </div>
-          <SidebarNavigation />
-        </div>
-        <SideFooter />
-      </SidebarContext.Provider>
-    </div>
+          <SideFooter />
+        </SidebarContext.Provider>
+      </div>
+      <div className={style.sidebarBackdrop} onClick={onDrawerCloseClick} />
+    </>
   )
 }
 
 Sidebar.propTypes = {
-  isDrawerOpen: PropTypes.bool,
-}
-
-Sidebar.defaultProps = {
-  isDrawerOpen: false,
+  isDrawerOpen: PropTypes.bool.isRequired,
+  onDrawerCloseClick: PropTypes.func.isRequired,
 }
 
 export default Sidebar
diff --git a/pkg/webui/console/containers/side-bar/navigation/app-list-side-navigation.js b/pkg/webui/console/containers/side-bar/navigation/app-list-side-navigation.js
index 94fe0d55397..7990cb8015b 100644
--- a/pkg/webui/console/containers/side-bar/navigation/app-list-side-navigation.js
+++ b/pkg/webui/console/containers/side-bar/navigation/app-list-side-navigation.js
@@ -30,7 +30,7 @@ const AppListSideNavigation = () => {
 
   return (
     <div>
-      <SectionLabel label={sharedMessages.topApplications} icon="add" />
+      <SectionLabel label={sharedMessages.topApplications} icon="add" onClick={() => null} />
       <SideNavigation>
         {topEntities.map(({ path, entity, title }) => (
           <SideNavigation.Item title={title} path={path} icon={entity} key={path} />
diff --git a/pkg/webui/console/containers/side-bar/navigation/app-side-navigation.js b/pkg/webui/console/containers/side-bar/navigation/app-side-navigation.js
index 7db79a67709..25976ed9155 100644
--- a/pkg/webui/console/containers/side-bar/navigation/app-side-navigation.js
+++ b/pkg/webui/console/containers/side-bar/navigation/app-side-navigation.js
@@ -58,7 +58,11 @@ const AppSideNavigation = () => {
   const mqttDisabled = useSelector(selectMqttProviderDisabled)
   const { isMinimized } = useContext(SidebarContext)
 
-  const entityId = app ? app.name ?? appId : appId
+  if (!app) {
+    return null
+  }
+
+  const entityId = app && app.name ? app.name : appId
 
   return (
     <>
diff --git a/pkg/webui/console/containers/side-bar/navigation/gtw-side-navigation.js b/pkg/webui/console/containers/side-bar/navigation/gtw-side-navigation.js
index e8997706fb9..fdf98365f97 100644
--- a/pkg/webui/console/containers/side-bar/navigation/gtw-side-navigation.js
+++ b/pkg/webui/console/containers/side-bar/navigation/gtw-side-navigation.js
@@ -48,7 +48,11 @@ const GtwSideNavigation = () => {
   const rights = useSelector(selectGatewayRights)
   const { isMinimized } = useContext(SidebarContext)
 
-  const entityId = gtw ? gtw.name ?? gtwId : gtwId
+  if (!gtw) {
+    return null
+  }
+
+  const entityId = gtw && gtw.name ? gtw.name : gtwId
 
   return (
     <SideNavigation className="mb-cs-m">
diff --git a/pkg/webui/console/containers/side-bar/side-bar.styl b/pkg/webui/console/containers/side-bar/side-bar.styl
index 49ec1de3c56..808085d9abe 100644
--- a/pkg/webui/console/containers/side-bar/side-bar.styl
+++ b/pkg/webui/console/containers/side-bar/side-bar.styl
@@ -16,22 +16,44 @@
   border-normal(right)
   line-height: 1
   font-size: $fs.s
-  min-width: 19rem
+  min-width: 22rem
+  max-width: 24rem
+  box-sizing: border-box
   sidebar-transition(min-width)
   +media-query($bp.m)
-    sidebar-transition(left, box-shadow)
-    top: $header-height-mobile
-    left: -60vw
+    transition: left .4s cubic-bezier(0.220, 0.005, 0.295, 1.000)
+    position: absolute
+    top: 0
+    left: -90vw
     bottom: 0
-    width: 60vw
-    max-width: 20rem
-    min-width: 15rem
+    width: 90vw
+    min-width: 18rem
+    height: 100vh
+    z-index: $zi.nav
 
     &-open
-      box-shadow: 0 0 13rem 2rem rgba(0,0,0,.4)
+      transition: left .6s cubic-bezier(0.165, 0.840, 0.440, 1.000)
       left: 0
 
+      & + .sidebar-backdrop
+        opacity: 1
+        visibility: visible
+
+  &-backdrop
+    transition: opacity .4s ease-in-out, visibility .4s ease-in-out
+    opacity: 0
+    visibility: hidden
+    position: fixed
+    top: 0
+    left: 0
+    bottom: 0
+    right: 0
+    background: rgba(0, 0, 0, .7)
+    z-index: 1
+    cursor: pointer
+
   &-minimized
-    width: 3.5rem
-    min-width: initial
-    max-width: initial
+    +media-query-min($bp.m)
+      width: 4.5rem
+      min-width: initial
+      max-width: initial
diff --git a/pkg/webui/console/views/app/app.styl b/pkg/webui/console/views/app/app.styl
index 7bbb10c1ade..2968c28f064 100644
--- a/pkg/webui/console/views/app/app.styl
+++ b/pkg/webui/console/views/app/app.styl
@@ -15,6 +15,7 @@
 .container
   overflow: hidden
   height: 100%
+  min-width: 340px
 
 .content
   position: relative
@@ -27,15 +28,3 @@
 .stage
   display: flex
   flex-direction: column
-
-.mobile-breadcrumbs
-  +media-query-min($bp.s)
-    display: none
-  +media-query($bp.s)
-    display: block
-
-.desktop-breadcrumbs
-  +media-query-min($bp.s)
-    display: block
-  +media-query($bp.s)
-    display: none
diff --git a/pkg/webui/console/views/app/index.js b/pkg/webui/console/views/app/index.js
index 5cd722ca2e8..c483ed440c6 100644
--- a/pkg/webui/console/views/app/index.js
+++ b/pkg/webui/console/views/app/index.js
@@ -130,7 +130,7 @@ const Layout = () => {
           />
           <div id="modal-container" />
           <div className="d-flex">
-            <Sidebar isDrawerOpen={isDrawerOpen} />
+            <Sidebar isDrawerOpen={isDrawerOpen} onDrawerCloseClick={closeDrawer} />
             <div className="w-full h-vh">
               <Header onMenuClick={onDrawerExpandClick} />
               <main className={classnames(style.main, 'd-flex', 'flex-column', 'h-full')}>
diff --git a/pkg/webui/console/views/overview/index.js b/pkg/webui/console/views/overview/index.js
index 46fb48e7337..a5c6bc202da 100644
--- a/pkg/webui/console/views/overview/index.js
+++ b/pkg/webui/console/views/overview/index.js
@@ -12,21 +12,16 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, { useMemo, useCallback, useRef } from 'react'
+import React from 'react'
 import { Container, Col, Row } from 'react-grid-system'
 import { defineMessages } from 'react-intl'
 import { useSelector } from 'react-redux'
 
-import AppAnimation from '@assets/animations/illustrations/app.json'
-import GatewayAnimation from '@assets/animations/illustrations/gateway.json'
-
 import { useBreadcrumbs } from '@ttn-lw/components/breadcrumbs/context'
 import Breadcrumb from '@ttn-lw/components/breadcrumbs/breadcrumb'
-import Link from '@ttn-lw/components/link'
 
 import Message from '@ttn-lw/lib/components/message'
 import IntlHelmet from '@ttn-lw/lib/components/intl-helmet'
-import Animation from '@ttn-lw/lib/components/animation'
 import RequireRequest from '@ttn-lw/lib/components/require-request'
 
 import DeploymentComponentStatus from '@console/containers/deployment-component-status'
@@ -76,83 +71,9 @@ const Overview = () => {
   const mayCreateGtws = useSelector(state => checkFromState(mayCreateGateways, state))
   const supportLink = selectSupportLinkConfig()
   const documentationBaseUrl = selectDocumentationUrlConfig()
-  const appAnimationRef = useRef(null)
-  const gatewayAnimationRef = useRef(null)
 
   useBreadcrumbs('overview', <Breadcrumb path="/" content={sharedMessages.overview} />)
 
-  const handleAppChooserMouseEnter = useCallback(() => {
-    appAnimationRef.current.setDirection(1)
-    appAnimationRef.current.goToAndPlay(0)
-  }, [appAnimationRef])
-
-  const handleAppChooserMouseLeave = useCallback(() => {
-    appAnimationRef.current.setDirection(-1)
-  }, [appAnimationRef])
-
-  const handleGatewayChooserMouseEnter = useCallback(() => {
-    gatewayAnimationRef.current.setDirection(1)
-    gatewayAnimationRef.current.goToAndPlay(0)
-  }, [gatewayAnimationRef])
-
-  const handleGatewayChooserMouseLeave = useCallback(() => {
-    gatewayAnimationRef.current.setDirection(-1)
-  }, [gatewayAnimationRef])
-
-  const chooser = useMemo(() => {
-    const hasEntities = applicationCount + gatewayCount !== 0
-    const appPath = hasEntities ? '/applications' : '/applications/add'
-    const gatewayPath = hasEntities ? '/gateways' : '/gateways/add'
-
-    return (
-      <Row>
-        {mayViewApplications && (
-          <Col lg={mayViewGateways ? 6 : 12}>
-            <Link to={appPath} className={style.chooserNav}>
-              <div
-                onMouseEnter={handleAppChooserMouseEnter}
-                onMouseLeave={handleAppChooserMouseLeave}
-                className={style.chooser}
-              >
-                <Animation animationRef={appAnimationRef} animationData={AppAnimation} />
-                <Message
-                  component="span"
-                  content={hasEntities ? m.gotoApplications : m.createApplication}
-                />
-              </div>
-            </Link>
-          </Col>
-        )}
-        {mayViewGateways && (
-          <Col lg={mayViewApplications ? 6 : 12}>
-            <Link to={gatewayPath} className={style.chooserNav}>
-              <div
-                onMouseEnter={handleGatewayChooserMouseEnter}
-                onMouseLeave={handleGatewayChooserMouseLeave}
-                className={style.chooser}
-              >
-                <Animation animationRef={gatewayAnimationRef} animationData={GatewayAnimation} />
-                <Message
-                  component="span"
-                  content={hasEntities ? m.gotoGateways : m.createGateway}
-                />
-              </div>
-            </Link>
-          </Col>
-        )}
-      </Row>
-    )
-  }, [
-    appAnimationRef,
-    applicationCount,
-    gatewayAnimationRef,
-    gatewayCount,
-    handleAppChooserMouseEnter,
-    handleAppChooserMouseLeave,
-    handleGatewayChooserMouseEnter,
-    handleGatewayChooserMouseLeave,
-  ])
-
   const hasEntities = applicationCount + gatewayCount !== 0
   const mayCreateEntities = mayCreateApps || mayCreateGtws
   const mayNotViewEntities = !mayViewApps && !mayViewGtws
diff --git a/pkg/webui/lib/components/full-view-error/error.js b/pkg/webui/lib/components/full-view-error/error.js
index 96e0dca16b9..6d805967e8d 100644
--- a/pkg/webui/lib/components/full-view-error/error.js
+++ b/pkg/webui/lib/components/full-view-error/error.js
@@ -16,11 +16,10 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { Container, Row, Col } from 'react-grid-system'
 import clipboard from 'clipboard'
 import { Helmet } from 'react-helmet'
-import classnames from 'classnames'
 
 import Footer from '@ttn-lw/components/footer'
-import buttonStyle from '@ttn-lw/components/button/button.styl'
 import Icon from '@ttn-lw/components/icon'
+import Button from '@ttn-lw/components/button'
 
 import Message from '@ttn-lw/lib/components/message'
 import IntlHelmet from '@ttn-lw/lib/components/intl-helmet'
@@ -151,7 +150,6 @@ const FullViewErrorInner = ({ error, safe, action, unexpected }) => {
   const errorDetails = JSON.stringify(error, undefined, 2)
   const hasErrorDetails =
     (!isNotFound && Boolean(error) && errorDetails.length > 2) || (isFrontend && error.errorCode)
-  const buttonClasses = classnames(buttonStyle.button, style.actionButton)
 
   // Do not render anything when performing a redirect.
   if (doBlankRender) {
@@ -194,41 +192,44 @@ const FullViewErrorInner = ({ error, safe, action, unexpected }) => {
             </div>
             <div className={style.errorActions}>
               {isNotFound && (
-                <a href={appRoot} className={buttonClasses}>
-                  <Icon icon="keyboard_arrow_left" textPaddedRight nudgeDown />
-                  <Message content={sharedMessages.backToOverview} />
-                </a>
+                <Button.AnchorLink
+                  href={appRoot}
+                  className={style.actionButton}
+                  icon="keyboard_arrow_left"
+                  message={sharedMessages.backToOverview}
+                  secondary
+                />
               )}
               {isOAuthCallback && (
-                <a href={appRoot} className={buttonClasses}>
-                  <Icon icon="keyboard_arrow_left" textPaddedRight nudgeDown />
-                  <Message content={sharedMessages.backToLogin} />
-                </a>
+                <Button.AnchorLink
+                  href={appRoot}
+                  className={style.actionButton}
+                  icon="keyboard_arrow_left"
+                  message={sharedMessages.backToLogin}
+                  secondary
+                />
               )}
               {hasAction && (
-                <button
+                <Button
                   type="button"
-                  className={classnames(buttonClasses, buttonStyle.primary)}
+                  primary
+                  className={style.actionButton}
                   onClick={action.action}
-                >
-                  <Icon icon={action.icon} textPaddedRight nudgeDown />
-                  <Message content={action.message} />
-                </button>
+                  icon={action.icon}
+                  message={action.message}
+                  secondary
+                />
               )}
               {hasSupportLink && !isNotFound && (
                 <>
-                  <a
+                  <Button.AnchorLink
                     href={supportLink}
                     target="_blank"
-                    className={classnames(
-                      buttonStyle.button,
-                      buttonStyle.primary,
-                      style.actionButton,
-                    )}
-                  >
-                    <Icon icon="contact_support" textPaddedRight nudgeDown />
-                    <Message content={sharedMessages.getSupport} />
-                  </a>
+                    className={style.actionButton}
+                    icon="contact_support"
+                    message={sharedMessages.getSupport}
+                    secondary
+                  />
                   {hasErrorDetails && (
                     <Message component="span" content={errorMessages.attachToSupportInquiries} />
                   )}
@@ -276,19 +277,17 @@ const FullViewErrorInner = ({ error, safe, action, unexpected }) => {
                     <Message content={errorMessages.technicalDetails} />
                   </summary>
                   <pre>{errorDetails}</pre>
-                  <button
+                  <Button
                     onClick={handleCopyClick}
-                    className={classnames(buttonClasses)}
+                    className={style.actionButton}
                     data-clipboard-text={errorDetails}
                     ref={copyButton}
-                  >
-                    <Icon icon={copied ? 'done' : 'file_copy'} textPaddedRight />
-                    <Message
-                      content={
-                        copied ? sharedMessages.copiedToClipboard : sharedMessages.copyToClipboard
-                      }
-                    />
-                  </button>
+                    icon={copied ? 'done' : 'file_copy'}
+                    message={
+                      copied ? sharedMessages.copiedToClipboard : sharedMessages.copyToClipboard
+                    }
+                    secondary
+                  />
                 </details>
               </>
             )}
diff --git a/pkg/webui/locales/en.json b/pkg/webui/locales/en.json
index b1a734c3453..07963e3ffa1 100644
--- a/pkg/webui/locales/en.json
+++ b/pkg/webui/locales/en.json
@@ -145,7 +145,6 @@
   "components.key-value-map.index.addEntry": "Add entry",
   "components.link.index.glossaryTitle": "See \"{term}\" in the glossary",
   "components.link.index.defaultGlossaryTitle": "See in the glossary",
-  "components.mobile-menu.index.loggedInAs": "Logged in as <b>{userId}</b>",
   "components.notification.details.index.showDetails": "Show details",
   "components.notification.details.index.details": "Details",
   "components.notification.details.index.errorDetails": "Error details",
diff --git a/pkg/webui/locales/ja.json b/pkg/webui/locales/ja.json
index a9b1cc12016..1ca2b73a32c 100644
--- a/pkg/webui/locales/ja.json
+++ b/pkg/webui/locales/ja.json
@@ -145,7 +145,6 @@
   "components.key-value-map.index.addEntry": "エントリー追加",
   "components.link.index.glossaryTitle": "用語集「{term}」を参照してください",
   "components.link.index.defaultGlossaryTitle": "用語集を見る",
-  "components.mobile-menu.index.loggedInAs": "<b>{userId}</b>でログインしました",
   "components.notification.details.index.showDetails": "詳細を表示",
   "components.notification.details.index.details": "詳細",
   "components.notification.details.index.errorDetails": "エラー詳細",
diff --git a/pkg/webui/styles/variables/generic.styl b/pkg/webui/styles/variables/generic.styl
index 6ca958bebb0..55d2acef575 100644
--- a/pkg/webui/styles/variables/generic.styl
+++ b/pkg/webui/styles/variables/generic.styl
@@ -136,6 +136,7 @@ $font-family-mono = 'IBM Plex Mono', monospace
 // ## Size and spacing
 
 $font-size-base = 14px // Will be set on root element, so 1rem = 14px.
+$font-size-small = 12px
 $line-height-base = 1.6786 // ~ 23.5px
 $line-height-margin-factor = .3rem // Used for margin calculations on text elements.