Merge pull request #83 from DarkFlorist/navbarfix

fix navbar on medium window size
DarkFlorist · Jan 26, 2024 · afbbbc6 · afbbbc6
2 parents b066a5b + 116aec4
commit afbbbc6
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 38 deletions.
diff --git a/src/components/NavBar/MenuDropdown.tsx b/src/components/NavBar/MenuDropdown.tsx
@@ -2,12 +2,12 @@ import { t, Trans } from '@lingui/macro'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import { Box } from 'nft/components/Box'
 import { Column, Row } from 'nft/components/Flex'
-import { DiscordIconMenu, EllipsisIcon, GithubIconMenu, PoolIcon, TwitterIconMenu } from 'nft/components/icons'
+import { DiscordIconMenu, EllipsisIcon, GithubIconMenu, TwitterIconMenu } from 'nft/components/icons'
 import { body, bodySmall } from 'nft/css/common.css'
 import { themeVars } from 'nft/css/sprinkles.css'
 import { ReactNode, useReducer, useRef } from 'react'
 import { NavLink, NavLinkProps } from 'react-router-dom'
-import styled, { useTheme } from 'styled-components'
+import styled from 'styled-components'
 
 import * as styles from './MenuDropdown.css'
 import { NavDropdown } from './NavDropdown'
@@ -74,10 +74,6 @@ const SecondaryLinkedText = ({
   )
 }
 
-const Separator = () => {
-  return <Box className={styles.Separator} />
-}
-
 const IconRow = ({ children }: { children: ReactNode }) => {
   return <Row className={styles.IconRow}>{children}</Row>
 }
@@ -106,7 +102,6 @@ const Icon = ({ href, children }: { href?: string; children: ReactNode }) => {
 }
 
 export const MenuDropdown = () => {
-  const theme = useTheme()
   const [isOpen, toggleOpen] = useReducer((s) => !s, false)
   const ref = useRef<HTMLDivElement>(null)
   useOnClickOutside(ref, isOpen ? toggleOpen : undefined)
@@ -119,21 +114,12 @@ export const MenuDropdown = () => {
         </NavIcon>
 
         {isOpen && (
-          <NavDropdown top={{ sm: 'unset', lg: '56' }} bottom={{ sm: '50', lg: 'unset' }} right="0">
+          <NavDropdown
+            top={{ sm: 'unset', md: '56', lg: '56' }}
+            bottom={{ sm: '50', md: 'unset', lg: 'unset' }}
+            right="0"
+          >
             <Column gap="16">
-              <Column paddingX="8" gap="4">
-                <Box display={{ sm: 'none', lg: 'flex', xxl: 'none' }}>
-                  <PrimaryMenuRow to="/pool" close={toggleOpen}>
-                    <Icon>
-                      <PoolIcon width={24} height={24} fill={theme.neutral1} />
-                    </Icon>
-                    <PrimaryMenuRow.Text>
-                      <Trans>Pool</Trans>
-                    </PrimaryMenuRow.Text>
-                  </PrimaryMenuRow>
-                </Box>
-              </Column>
-              <Separator />
               <Box
                 display="flex"
                 flexDirection={{ sm: 'row', md: 'column' }}

diff --git a/src/components/NavBar/index.tsx b/src/components/NavBar/index.tsx
@@ -36,7 +36,7 @@ const MenuItem = ({ href, dataTestId, id, isActive, children }: MenuItemProps) =
       to={href}
       className={isActive ? styles.activeMenuItem : styles.menuItem}
       id={id}
-      style={{ textDecoration: 'none' }}
+      style={{ textDecoration: 'none', overflow: 'hidden', whiteSpace: 'nowrap' }}
       data-testid={dataTestId}
     >
       {children}

diff --git a/src/nft/components/icons.tsx b/src/nft/components/icons.tsx
@@ -49,22 +49,6 @@ export const ChevronUpIcon = ({
   </svg>
 )
 
-export const PoolIcon = ({ width, height, ...props }: SVGProps) => (
-  <svg
-    width={width}
-    height={height}
-    viewBox={`0 0 ${width} ${height}`}
-    {...props}
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M5.19993 7.5915H12.3999V3.59138C12.3999 1.82406 13.8326 0.39143 15.5999 0.39143C17.3672 0.39143 18.8 1.82406 18.8 3.59138H17.1999C17.1999 2.70774 16.4835 1.99148 15.5999 1.99148C14.7162 1.99148 14 2.70774 14 3.59138V12.3915H12.3999V9.19155H5.19993V10.7915H3.59988V3.59145C3.59988 1.82413 5.03265 0.391498 6.79998 0.391498C8.5673 0.391498 9.99993 1.82413 9.99993 3.59145H8.39988C8.39988 2.70781 7.68362 1.99154 6.79998 1.99154C5.91633 1.99154 5.19993 2.70781 5.19993 3.59145V7.5915ZM1.49707 14.7342L0.902832 13.2487C3.75352 12.1084 6.88055 12.1084 10.2529 13.2325C13.2806 14.2417 16.0201 14.2417 18.5027 13.2487L19.097 14.7342C16.2463 15.8745 13.1192 15.8745 9.7469 14.7503C6.71916 13.7411 3.9797 13.7411 1.49707 14.7342ZM1.49707 18.734L0.902832 17.2485C3.75352 16.1082 6.88055 16.1082 10.2529 17.2324C13.2806 18.2416 16.0201 18.2416 18.5027 17.2485L19.097 18.734C16.2463 19.8743 13.1192 19.8743 9.7469 18.7502C6.71916 17.7411 3.9797 17.7411 1.49707 18.734Z"
-      fill="currentColor"
-    />
-  </svg>
-)
-
 export const EllipsisIcon = (props: SVGProps) => (
   <svg fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path

diff --git a/src/pages/WhatIsHorswap/index.tsx b/src/pages/WhatIsHorswap/index.tsx
@@ -21,6 +21,7 @@ const PageWrapper = styled(Container)`
   flex: 1;
   justify-content: center;
   gap: 50px;
+  padding: 10px;
 
   @media screen and (min-width: ${({ theme }) => theme.breakpoint.md}px) {
     justify-content: space-between;