fix broken float menu logic

src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.module.scss

@@ -15,9 +15,9 @@
 
   .menuHolder {
     background: #fff;
-    left: calc(100% + 1rem);
+    left: 40px;
     position: absolute;
-    top: -0.8rem;
+    top: -0.4rem;
     min-width: 64vw;
   }
 }

src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.tsx

@@ -32,7 +32,7 @@ const validateEmbed = async (value) => {
 
 export const EditorFloatingMenu = (props: FloatingMenuProps) => {
   const { t } = useLocalize()
-  const [selectedMenuItem, setSelectedMenuItem] = createSignal<MenuItem | null>(null)
+  const [selectedMenuItem, setSelectedMenuItem] = createSignal<MenuItem | undefined>()
   const [menuOpen, setMenuOpen] = createSignal<boolean>(false)
   const handleEmbedFormSubmit = async (value: string) => {
     // TODO: add support instagram embed (blockquote)
@@ -53,14 +53,19 @@ export const EditorFloatingMenu = (props: FloatingMenuProps) => {
     }
   })
   const closeUploadModalHandler = () => {
-    setSelectedMenuItem(null)
+    setSelectedMenuItem()
     setMenuOpen(false)
   }
 
   return (
     <>
       <div ref={props.ref} class={styles.editorFloatingMenu}>
-        <button type="button" onClick={() => setMenuOpen(!menuOpen())}>
+        <button
+          type="button"
+          onClick={() => {
+            setMenuOpen(!menuOpen())
+          }}
+        >
           <Icon name="editor-plus" />
         </button>
         <Show when={menuOpen()}>
@@ -73,7 +78,7 @@ export const EditorFloatingMenu = (props: FloatingMenuProps) => {
                 placeholder={t('Paste Embed code')}
                 showInput={true}
                 onClose={closeUploadModalHandler}
-                onClear={() => setSelectedMenuItem(null)}
+                onClear={() => setSelectedMenuItem()}
                 validate={validateEmbed}
                 onSubmit={handleEmbedFormSubmit}
                 errorMessage={t('Error')}
@@ -83,7 +88,7 @@ export const EditorFloatingMenu = (props: FloatingMenuProps) => {
         </Show>
       </div>
       <Modal variant="narrow" name="uploadImage" onClose={closeUploadModalHandler}>
-        <UploadModalContent closeCallback={() => setSelectedMenuItem(null)} editor={props.editor} />
+        <UploadModalContent closeCallback={() => setSelectedMenuItem()} editor={props.editor} />
       </Modal>
     </>
   )

src/components/Editor/EditorFloatingMenu/Menu/Menu.tsx

@@ -2,6 +2,7 @@ import styles from './Menu.module.scss'
 import { Icon } from '../../../_shared/Icon'
 
 export type MenuItem = 'image' | 'embed' | 'horizontal-rule'
+
 type Props = {
   selectedItem: (value: string) => void
 }

src/components/Editor/UploadModal/UploadModalContent.tsx

@@ -44,6 +44,7 @@ export const UploadModalContent = (props: Props) => {
       setIsUploading(true)
       const fileUrl = await handleFileUpload(file)
       setIsUploading(false)
+      props.closeCallback()
       renderImage(fileUrl)
     } catch (error) {
       console.error('[upload image] error', error)

src/components/Feed/Sidebar/Sidebar.tsx

@@ -1,4 +1,4 @@
-import { createSignal, For } from 'solid-js'
+import { For } from 'solid-js'
 import type { Author } from '../../../graphql/types.gen'
 import { useAuthorsStore } from '../../../stores/zine/authors'
 import { Icon } from '../../_shared/Icon'
@@ -29,10 +29,6 @@ export const Sidebar = (props: FeedSidebarProps) => {
   const { articlesByTopic } = useArticlesStore()
   const { topicEntities } = useTopicsStore()
 
-  createSignal(() => {
-    console.log('!!! topicEntities:', topicEntities())
-  })
-
   const checkTopicIsSeen = (topicSlug: string) => {
     return articlesByTopic()[topicSlug]?.every((article) => Boolean(seen()[article.slug]))
   }

src/components/Nav/Header.module.scss

@@ -484,12 +484,16 @@
       width: 100%;
     }
   }
+  .icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
 
     img {
       height: 20px;
-    vertical-align: middle;
       width: auto;
     }
+  }
 
   .textLabel {
     display: none;

src/components/_shared/Icon/Icon.module.scss

@@ -5,6 +5,7 @@
   img {
     width: 100%;
     height: 100%;
+    display: block;
   }
 }