Get nav into higher z-index, start to add the ADdLink control

packages/web/components/elements/icons/HighlightsIcon.tsx

@@ -16,7 +16,7 @@ export class HighlightsIcon extends React.Component<IconProps> {
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <g clip-path="url(#clip0_11629_6956)">
+        <g>
           <path
             d="M2.91113 18.5169H6.74447L16.807 8.45439C17.3153 7.94606 17.6009 7.25661 17.6009 6.53772C17.6009 5.81883 17.3153 5.12939 16.807 4.62106C16.2986 4.11273 15.6092 3.82715 14.8903 3.82715C14.1714 3.82715 13.482 4.11273 12.9736 4.62106L2.91113 14.6836V18.5169Z"
             fill={color}

packages/web/components/elements/icons/ShortcutFolderOpen.tsx

@@ -16,7 +16,7 @@ export class ShortcutFolderOpen extends React.Component<IconProps> {
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <g clip-path="url(#clip0_11426_11319)">
+        <g>
           <path
             d="M5.24447 20.4395L8.11634 12.7822C8.19075 12.5836 8.32397 12.4126 8.49819 12.2918C8.67241 12.171 8.87934 12.1062 9.09134 12.1061H21.9111M5.24447 20.4395H19.8549C20.3395 20.4393 20.809 20.2702 21.1824 19.9613C21.5558 19.6523 21.8098 19.2228 21.9007 18.7467L22.9382 13.3186C22.963 13.1695 22.955 13.0167 22.9149 12.8709C22.8747 12.7251 22.8032 12.5899 22.7055 12.4745C22.6077 12.3591 22.4861 12.2664 22.3489 12.2028C22.2117 12.1392 22.0623 12.1062 21.9111 12.1061M5.24447 20.4395C4.69193 20.4395 4.16203 20.22 3.77133 19.8293C3.38063 19.4386 3.16113 18.9087 3.16113 18.3561V6.89779C3.16113 6.34525 3.38063 5.81535 3.77133 5.42465C4.16203 5.03395 4.69193 4.81445 5.24447 4.81445H9.41113L12.5361 7.93945H19.8278C20.3803 7.93945 20.9102 8.15895 21.3009 8.54965C21.6916 8.94035 21.9111 9.47025 21.9111 10.0228V12.1061"
             stroke={color}

packages/web/components/templates/NavigationLayout.tsx

@@ -19,6 +19,12 @@ import { Button } from '../elements/Button'
 import { List } from '@phosphor-icons/react'
 import { usePersistedState } from '../../lib/hooks/usePersistedState'
 import { LIBRARY_LEFT_MENU_WIDTH } from './navMenu/LibraryLegacyMenu'
+import { AddLinkModal } from './AddLinkModal'
+import { saveUrlMutation } from '../../lib/networking/mutations/saveUrlMutation'
+import {
+  showErrorToast,
+  showSuccessToastWithAction,
+} from '../../lib/toastHelpers'
 
 export type NavigationSection =
   | 'home'
@@ -103,6 +109,25 @@ export function NavigationLayout(props: NavigationLayoutProps): JSX.Element {
     setShowLogoutConfirmation(true)
   }, [setShowLogoutConfirmation])
 
+  const [showAddLinkModal, setShowAddLinkModal] = useState(false)
+
+  const handleLinkAdded = useCallback(
+    async (link: string, timezone: string, locale: string) => {
+      const result = await saveUrlMutation(link, timezone, locale)
+      if (result) {
+        showSuccessToastWithAction('Link saved', 'Read now', async () => {
+          window.location.href = `/article?url=${encodeURIComponent(link)}`
+          return Promise.resolve()
+        })
+        // const id = result.url?.match(/[^/]+$/)?.[0] ?? ''
+        // performActionOnItem('refresh', undefined as unknown as any)
+      } else {
+        showErrorToast('Error saving link', { position: 'bottom-right' })
+      }
+    },
+    []
+  )
+
   useEffect(() => {
     document.addEventListener('logout', showLogout)
 
@@ -141,8 +166,7 @@ export function NavigationLayout(props: NavigationLayoutProps): JSX.Element {
         <>
           <NavigationMenu
             section={props.section}
-            // eslint-disable-next-line @typescript-eslint/no-empty-function
-            setShowAddLinkModal={() => {}}
+            setShowAddLinkModal={setShowAddLinkModal}
             showMenu={showNavMenu}
           />
           <SpanBox
@@ -156,18 +180,24 @@ export function NavigationLayout(props: NavigationLayoutProps): JSX.Element {
         </>
       )}
       {props.children}
-      {showLogoutConfirmation ? (
+      {showLogoutConfirmation && (
         <ConfirmationModal
           message={'Are you sure you want to log out?'}
           onAccept={logout}
           onOpenChange={() => setShowLogoutConfirmation(false)}
         />
-      ) : null}
-      {showKeyboardCommandsModal ? (
+      )}
+      {showKeyboardCommandsModal && (
         <KeyboardShortcutListModal
           onOpenChange={() => setShowKeyboardCommandsModal(false)}
         />
-      ) : null}
+      )}
+      {showAddLinkModal && (
+        <AddLinkModal
+          onOpenChange={setShowAddLinkModal}
+          handleLinkSubmission={handleLinkAdded}
+        />
+      )}
     </HStack>
   )
 }
@@ -183,7 +213,7 @@ const Header = (props: HeaderProps): JSX.Element => {
       alignment="start"
       distribution="center"
       css={{
-        zIndex: 5,
+        zIndex: 10,
         position: props.menuOpen ? 'fixed' : 'absolute',
         left: '0px',
         top: '0px',

packages/web/components/templates/navMenu/NavigationMenu.tsx

@@ -90,7 +90,7 @@ export function NavigationMenu(props: NavigationMenuProps): JSX.Element {
             boxShadow:
               'rgb(48, 54, 61) 0px 0px 0px 1px, rgba(1, 4, 9, 0.4) 0px 6px 12px -3px, rgba(1, 4, 9, 0.4) 0px 6px 18px 0px',
           },
-          zIndex: 2,
+          zIndex: 5,
         }}
       >
         <Box css={{ width: '100%', height: '60px' }}></Box>