Bugfix/dropdown component and navbar bottom line

package.json

@@ -98,6 +98,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.6.3",
+    "@floating-ui/react": "^0.26.28",
     "@fortawesome/fontawesome-free": "^5.10.2",
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
     "@fortawesome/free-regular-svg-icons": "^5.15.3",

src/lib/components/dropdown/Dropdown.component.tsx

@@ -1,7 +1,5 @@
 // @ts-nocheck
-import { useState, useCallback } from 'react';
-import styled, { css } from 'styled-components';
-
+import styled from 'styled-components';
 import {
   ButtonStyled,
   ButtonIcon,
@@ -14,6 +12,9 @@ import { getThemePropSelector } from '../../utils';
 import { Icon } from '../icon/Icon.component';
 import { useSelect } from 'downshift';
 import { FocusVisibleStyle } from '../buttonv2/Buttonv2.component';
+import { flip, offset, Placement, shift } from '@floating-ui/dom';
+import { useFloating, useInteractions, autoUpdate } from '@floating-ui/react';
+
 export type Item = {
   label: string;
   name?: string;
@@ -29,6 +30,7 @@ type Props = {
   items: Items;
   icon?: JSX.Element;
   caret?: boolean;
+  placement?: Placement;
 };
 const DropdownStyled = styled.div`
   position: relative;
@@ -39,6 +41,7 @@ const DropdownStyled = styled.div`
     border-radius: 0;
   }
 `;
+
 const DropdownMenuStyled = styled.ul`
   position: absolute;
   margin: 0;
@@ -49,9 +52,9 @@ const DropdownMenuStyled = styled.ul`
   max-height: 200px;
   min-width: 100%;
   overflow: auto;
-  border-bottom: 0.3px solid ${getThemePropSelector('border')};
   display: ${(props) => (props.isOpen ? 'auto' : 'none')};
 `;
+
 const DropdownMenuItemStyled = styled.li`
   display: flex;
   align-items: center;
@@ -97,6 +100,7 @@ function Dropdown({
   variant = 'buttonSecondary',
   title,
   caret = true,
+  placement = 'bottom',
   ...rest
 }: Props) {
   const {
@@ -109,19 +113,29 @@ function Dropdown({
     items,
     itemToString: (item) => item?.label || '',
   });
+
+  const { refs, floatingStyles } = useFloating({
+    middleware: [offset(10), flip(), shift()],
+    placement: placement,
+    whileElementsMounted: autoUpdate,
+  });
+
+  const { getReferenceProps, getFloatingProps } = useInteractions();
+
   return (
     <DropdownStyled
-      active={open}
       variant={variant}
       className="sc-dropdown"
       {...rest}
+      ref={refs.setReference}
     >
       <TriggerStyled
         variant={variant}
         size={size}
         className="trigger"
         title={title}
         {...getToggleButtonProps()}
+        {...getReferenceProps()}
       >
         {icon && (
           <ButtonIcon text={text} size={size}>
@@ -134,32 +148,33 @@ function Dropdown({
             <Icon name="Dropdown-down" />
           </Caret>
         )}
-
-        <DropdownMenuStyled
-          className="menu-item"
-          isOpen={isOpen}
-          {...getMenuProps()}
-        >
-          {items.map((item, index) => {
-            return (
-              <DropdownMenuItemStyled
-                className="menu-item-label"
-                key={item.label}
-                variant={item.variant}
-                {...item}
-                {...getItemProps({
-                  item,
-                  index,
-                  onClick: item.onClick,
-                })}
-                isSelected={index === highlightedIndex}
-              >
-                {item.label}
-              </DropdownMenuItemStyled>
-            );
-          })}
-        </DropdownMenuStyled>
       </TriggerStyled>
+      <DropdownMenuStyled
+        className="menu-item"
+        isOpen={isOpen}
+        style={floatingStyles}
+        {...getFloatingProps()}
+        {...getMenuProps({ ref: refs.setFloating })}
+      >
+        {items.map((item, index) => {
+          return (
+            <DropdownMenuItemStyled
+              className="menu-item-label"
+              key={item.label}
+              variant={item.variant}
+              {...item}
+              {...getItemProps({
+                item,
+                index,
+                onClick: item.onClick,
+              })}
+              isSelected={index === highlightedIndex}
+            >
+              {item.label}
+            </DropdownMenuItemStyled>
+          );
+        })}
+      </DropdownMenuStyled>
     </DropdownStyled>
   );
 }

src/lib/components/navbar/Navbar.component.tsx

@@ -36,8 +36,8 @@ const NavbarContainer = styled.div`
     .sc-trigger-text {
       color: ${getThemePropSelector('textPrimary')};
     }
-    border-bottom: 0.5px solid ${(props) => props.theme.backgroundLevel3};
     box-sizing: border-box;
+    border-bottom: 0.5px solid ${(props) => props.theme.backgroundLevel2};
   `};
 `;
 const NavbarMenu = styled.div`
@@ -122,7 +122,7 @@ const NavbarMenuItem = styled.div`
       &:hover {
         background-color: ${getThemePropSelector('highlight')};
       }
-      height: ${navbarHeight};
+      height: auto;
       font-size: ${fontSize.base};
     }
     .menu-item {