Prototype: Mobile channel nav - dialog switcher

src/views/Home/Channel/DropdownDialog/index.tsx

@@ -0,0 +1,99 @@
+import classnames from 'classnames'
+import { useState } from 'react'
+import { useEffect } from 'react'
+
+import { ReactComponent as IconUp } from '@/public/static/icons/24px/up.svg'
+import { Icon } from '~/components'
+
+import styles from './styles.module.css'
+
+type DropdownDialogProps = {
+  items: {
+    id: string
+    title: string
+    link: string
+  }[]
+  toggleDropdown: () => void
+}
+
+const DropdownDialog = ({ items, toggleDropdown }: DropdownDialogProps) => {
+  const [hash, setHash] = useState('')
+
+  useEffect(() => {
+    // Function to update the hash state
+    const updateHash = () => {
+      setHash(window.location.hash)
+    }
+
+    // Set the initial hash
+    updateHash()
+
+    // Add an event listener to update the hash when it changes
+    window.addEventListener('hashchange', updateHash)
+
+    // Clean up the event listener on component unmount
+    return () => {
+      window.removeEventListener('hashchange', updateHash)
+    }
+  }, [])
+
+  const [selectedChannel, setSelectedChannel] = useState(1)
+
+  useEffect(() => {
+    if (hash) {
+      const channel = parseInt(hash.split('=')[1], 10)
+      setSelectedChannel(channel)
+    }
+  }, [hash])
+
+  const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    // click in container but not in content
+    const target = event.target as HTMLElement
+    if (target.closest('#channel-dropdown-dialog-content') === null) {
+      toggleDropdown()
+    }
+  }
+  return (
+    <div className={styles.container} onClick={handleClick}>
+      <div className={styles.content} id="channel-dropdown-dialog-content">
+        <div className={styles.contentInner}>
+          <div className={styles.header}>
+            <div className={styles.title}>選擇頻道</div>
+            <button className={styles.closeBtn} onClick={toggleDropdown}>
+              <Icon
+                aria-label="Close"
+                icon={IconUp}
+                size={16}
+                color="greyDarker"
+              />
+            </button>
+          </div>
+          <div className={styles.body}>
+            <div className={styles.grid}>
+              {items.map((item) => (
+                <a
+                  key={item.id}
+                  href={item.link}
+                  onClick={() => {
+                    if (selectedChannel === parseInt(item?.id || '1', 10)) {
+                      return
+                    }
+                    toggleDropdown()
+                  }}
+                  className={classnames(styles.gridItem, {
+                    [styles.selectedChannel]:
+                      selectedChannel === parseInt(item?.id || '1', 10),
+                  })}
+                >
+                  {item.title}
+                </a>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default DropdownDialog

src/views/Home/Channel/DropdownDialog/styles.module.css

@@ -0,0 +1,60 @@
+.container {
+  position: fixed;
+  top: 66px;
+  right: 0;
+  left: 0;
+  z-index: 1000;
+  height: calc(100vh - 66px);
+  background-color: rgb(0 0 0 / 40%);
+}
+
+.content {
+  padding: var(--sp8) var(--sp16) var(--sp20);
+  background-color: var(--color-white);
+
+  & .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    & .title {
+      font-size: var(--font-size-16);
+      font-weight: var(--font-semibold);
+    }
+  }
+
+  & .body {
+    margin-top: var(--sp12);
+
+    & .grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
+      gap: var(--sp12);
+
+      & .gridItem {
+        @mixin line-clamp;
+
+        padding: var(--sp4) var(--sp10);
+        font-size: var(--text14);
+        color: var(--color-grey-darker);
+
+        /* display: flex; */
+
+        /* align-items: center; */
+
+        /* justify-content: center; */
+        text-align: center;
+
+        /* white-space: nowrap; */
+        background-color: var(--color-grey-lighter);
+        border-radius: var(--sp8);
+
+        &.selectedChannel {
+          font-weight: var(--font-semibold);
+          color: var(--color-white);
+          background-color: var(--color-black);
+        }
+      }
+    }
+  }
+}

src/views/Home/Channel/Page/Carousel/styles.module.css

@@ -55,12 +55,15 @@
     }
 
     & a {
+      @mixin line-clamp;
+
       padding: var(--sp4) var(--sp10);
       font-size: var(--text14);
       line-height: 1.375rem;
       color: var(--color-grey-darker);
       text-align: center;
-      white-space: nowrap;
+
+      /* white-space: nowrap; */
 
       &.selectedChannel {
         font-weight: var(--font-semibold);

src/views/Home/Channel/SingleLine/index.tsx

@@ -2,6 +2,9 @@ import classnames from 'classnames'
 import { useState } from 'react'
 import { useEffect } from 'react'
 
+import { ReactComponent as IconDown } from '@/public/static/icons/24px/down.svg'
+import { Icon } from '~/components'
+
 import styles from './styles.module.css'
 
 type SingleLineProps = {
@@ -10,9 +13,10 @@ type SingleLineProps = {
     title: string
     link: string
   }[]
+  toggleDropdown: () => void
 }
 
-const SingleLine = ({ items }: SingleLineProps) => {
+const SingleLine = ({ items, toggleDropdown }: SingleLineProps) => {
   const [hash, setHash] = useState('')
 
   useEffect(() => {
@@ -72,6 +76,9 @@ const SingleLine = ({ items }: SingleLineProps) => {
           {item.title}
         </a>
       ))}
+      <button className={styles.moreBtn} onClick={toggleDropdown}>
+        <Icon aria-label="More" icon={IconDown} size={16} />
+      </button>
     </section>
     // </div>
   )

src/views/Home/Channel/SingleLine/styles.module.css

@@ -41,3 +41,13 @@
     }
   }
 }
+
+.moreBtn {
+  position: sticky;
+  right: 0;
+  z-index: 1; /* ensure button stays on top */
+  padding: 8px 16px; /* expand button area */
+  color: var(--color-grey-darker);
+  cursor: pointer;
+  background: var(--color-white);
+}