Add mobile header sidebar trigger

Author: yihyunjoon

web-next/src/locales/en-US/messages.po

@@ -628,11 +628,16 @@ msgstr "Go to My Drafts"
 
 #: src/components/AppSidebar.tsx:125
 #: src/components/AppSidebar.tsx:216
+#: src/routes/(root).tsx:82
 #: src/routes/(root)/coc.tsx:47
 #: src/routes/(root)/markdown.tsx:47
 msgid "Hackers' Pub"
 msgstr "Hackers' Pub"
 
+#: src/routes/(root).tsx:74
+msgid "Hackers' Pub home"
+msgstr "Hackers' Pub home"
+
 #: src/components/AboutHackersPub.tsx:232
 msgid "Hackers' Pub is a place for software engineers to share their knowledge and experience with each other. It's also an ActivityPub-enabled social network, so you can follow your favorite hackers in the fediverse and get their latest posts in your feed."
 msgstr "Hackers' Pub is a place for software engineers to share their knowledge and experience with each other. It's also an ActivityPub-enabled social network, so you can follow your favorite hackers in the fediverse and get their latest posts in your feed."
@@ -1423,6 +1428,10 @@ msgstr "Title cannot be empty"
 msgid "To follow {0}, enter your Fediverse handle."
 msgstr "To follow {0}, enter your Fediverse handle."
 
+#: src/routes/(root).tsx:72
+msgid "Toggle sidebar"
+msgstr "Toggle sidebar"
+
 #. placeholder {0}: "LANGUAGE"
 #: src/components/ArticleCard.tsx:173
 msgid "Translated from {0}"

web-next/src/locales/ja-JP/messages.po

@@ -624,11 +624,16 @@ msgstr "マイ下書きへ"
 
 #: src/components/AppSidebar.tsx:125
 #: src/components/AppSidebar.tsx:216
+#: src/routes/(root).tsx:82
 #: src/routes/(root)/coc.tsx:47
 #: src/routes/(root)/markdown.tsx:47
 msgid "Hackers' Pub"
 msgstr "Hackers' Pub"
 
+#: src/routes/(root).tsx:74
+msgid "Hackers' Pub home"
+msgstr "Hackers' Pubホーム"
+
 #: src/components/AboutHackersPub.tsx:232
 msgid "Hackers' Pub is a place for software engineers to share their knowledge and experience with each other. It's also an ActivityPub-enabled social network, so you can follow your favorite hackers in the fediverse and get their latest posts in your feed."
 msgstr "Hackers' Pubは、ソフトウェアエンジニアが知識と経験を共有する場所です。また、ActivityPubに対応したソーシャルネットワークでもあり、フェディバース（fediverse）で気に入ったハッカーをフォローして、最新のコンテンツをフィードで受け取ることができます。"
@@ -1418,6 +1423,10 @@ msgstr "タイトルは空にできません"
 msgid "To follow {0}, enter your Fediverse handle."
 msgstr "{0}さんをフォローするには、フェディバースのハンドルを入力してください。"
 
+#: src/routes/(root).tsx:72
+msgid "Toggle sidebar"
+msgstr "サイドバーを切り替える"
+
 #. placeholder {0}: "LANGUAGE"
 #: src/components/ArticleCard.tsx:173
 msgid "Translated from {0}"

web-next/src/locales/ko-KR/messages.po

@@ -624,11 +624,16 @@ msgstr "내 임시 보관으로"
 
 #: src/components/AppSidebar.tsx:125
 #: src/components/AppSidebar.tsx:216
+#: src/routes/(root).tsx:82
 #: src/routes/(root)/coc.tsx:47
 #: src/routes/(root)/markdown.tsx:47
 msgid "Hackers' Pub"
 msgstr "Hackers' Pub"
 
+#: src/routes/(root).tsx:74
+msgid "Hackers' Pub home"
+msgstr "Hackers' Pub 홈"
+
 #: src/components/AboutHackersPub.tsx:232
 msgid "Hackers' Pub is a place for software engineers to share their knowledge and experience with each other. It's also an ActivityPub-enabled social network, so you can follow your favorite hackers in the fediverse and get their latest posts in your feed."
 msgstr "Hackers' Pub은 소프트웨어 프로그래머들이 지식과 경험을 서로 나누는 곳입니다. 또한 ActivityPub을 지원하는 소셜 네트워크이기도 하며, 연합우주(fediverse)에서 즐겨찾는 소프트웨어 프로그래머들을 팔로하고 최신 콘텐츠를 받아 볼 수 있습니다."
@@ -1418,6 +1423,10 @@ msgstr "제목은 비워둘 수 없습니다"
 msgid "To follow {0}, enter your Fediverse handle."
 msgstr "{0}님을 팔로하려면 연합우주 핸들을 입력해 주세요."
 
+#: src/routes/(root).tsx:72
+msgid "Toggle sidebar"
+msgstr "사이드바 전환"
+
 #. placeholder {0}: "LANGUAGE"
 #: src/components/ArticleCard.tsx:173
 msgid "Translated from {0}"

web-next/src/locales/zh-CN/messages.po

@@ -624,11 +624,16 @@ msgstr "前往我的草稿"
 
 #: src/components/AppSidebar.tsx:125
 #: src/components/AppSidebar.tsx:216
+#: src/routes/(root).tsx:82
 #: src/routes/(root)/coc.tsx:47
 #: src/routes/(root)/markdown.tsx:47
 msgid "Hackers' Pub"
 msgstr "Hackers' Pub"
 
+#: src/routes/(root).tsx:74
+msgid "Hackers' Pub home"
+msgstr "Hackers' Pub 首页"
+
 #: src/components/AboutHackersPub.tsx:232
 msgid "Hackers' Pub is a place for software engineers to share their knowledge and experience with each other. It's also an ActivityPub-enabled social network, so you can follow your favorite hackers in the fediverse and get their latest posts in your feed."
 msgstr "Hackers' Pub 是个为软件工程师共同分享知识和经验的地方。它也是启用了 ActivityPub 的社交网络，这样你可以在联邦宇宙里关注你喜爱的黑客，并获取最新的帖子。"
@@ -1418,6 +1423,10 @@ msgstr "标题不能为空"
 msgid "To follow {0}, enter your Fediverse handle."
 msgstr "要关注{0}，请输入你的联邦宇宙用户名。"
 
+#: src/routes/(root).tsx:72
+msgid "Toggle sidebar"
+msgstr "切换侧边栏"
+
 #. placeholder {0}: "LANGUAGE"
 #: src/components/ArticleCard.tsx:173
 msgid "Translated from {0}"

web-next/src/locales/zh-TW/messages.po

@@ -624,11 +624,16 @@ msgstr "前往我的草稿"
 
 #: src/components/AppSidebar.tsx:125
 #: src/components/AppSidebar.tsx:216
+#: src/routes/(root).tsx:82
 #: src/routes/(root)/coc.tsx:47
 #: src/routes/(root)/markdown.tsx:47
 msgid "Hackers' Pub"
 msgstr "Hackers' Pub"
 
+#: src/routes/(root).tsx:74
+msgid "Hackers' Pub home"
+msgstr "Hackers' Pub 首頁"
+
 #: src/components/AboutHackersPub.tsx:232
 msgid "Hackers' Pub is a place for software engineers to share their knowledge and experience with each other. It's also an ActivityPub-enabled social network, so you can follow your favorite hackers in the fediverse and get their latest posts in your feed."
 msgstr "Hackers' Pub 是個為軟體工程師共同分享知識和經驗的地方。它也是啟用了 ActivityPub 的社交網路，這樣你可以在聯邦宇宙裡關注你喜愛的駭客，並獲取最新的貼文。"
@@ -1418,6 +1423,10 @@ msgstr "標題不能為空"
 msgid "To follow {0}, enter your Fediverse handle."
 msgstr "要關注{0}，請輸入你的聯邦宇宙使用者名稱。"
 
+#: src/routes/(root).tsx:72
+msgid "Toggle sidebar"
+msgstr "切換側邊欄"
+
 #. placeholder {0}: "LANGUAGE"
 #: src/components/ArticleCard.tsx:173
 msgid "Translated from {0}"

web-next/src/routes/(root).tsx

@@ -1,6 +1,7 @@
 import {
+  A,
   query,
-  RouteDefinition,
+  type RouteDefinition,
   type RouteSectionProps,
 } from "@solidjs/router";
 import { graphql } from "relay-runtime";
@@ -12,7 +13,7 @@ import {
 import { AppSidebar } from "~/components/AppSidebar.tsx";
 import { FloatingComposeButton } from "~/components/FloatingComposeButton.tsx";
 import { NoteComposeModal } from "~/components/NoteComposeModal.tsx";
-import { SidebarProvider } from "~/components/ui/sidebar.tsx";
+import { SidebarProvider, SidebarTrigger } from "~/components/ui/sidebar.tsx";
 import { Toaster } from "~/components/ui/toast.tsx";
 import { NoteComposeProvider } from "~/contexts/NoteComposeContext.tsx";
 import { ViewerProvider } from "~/contexts/ViewerContext.tsx";
@@ -47,7 +48,7 @@ const loadRootLayoutQuery = query(
 );
 
 export default function RootLayout(props: RouteSectionProps) {
-  const { i18n } = useLingui();
+  const { i18n, t } = useLingui();
   const signedAccount = createPreloadedQuery<RootLayoutQuery>(
     RootLayoutQuery,
     () => loadRootLayoutQuery(),
@@ -64,9 +65,33 @@ export default function RootLayout(props: RouteSectionProps) {
             $signedAccount={signedAccount()?.viewer}
             signedAccountLoaded={!signedAccount.pending}
           />
+          <header class="fixed inset-x-0 top-0 z-40 border-b bg-background/80 backdrop-blur md:hidden">
+            <div class="flex h-14 items-center justify-between px-4">
+              <SidebarTrigger
+                class="size-9 rounded-full"
+                aria-label={t`Toggle sidebar`}
+              />
+              <A href="/" aria-label={t`Hackers' Pub home`}>
+                <picture>
+                  <source
+                    srcset="/logo-dark.svg"
+                    media="(prefers-color-scheme: dark)"
+                  />
+                  <img
+                    src="/logo-light.svg"
+                    alt={t`Hackers' Pub`}
+                    width={111}
+                    height={28}
+                    class="h-7 w-auto"
+                  />
+                </picture>
+              </A>
+              <div class="size-9" aria-hidden="true" />
+            </div>
+          </header>
           <main
             lang={new Intl.Locale(i18n.locale).minimize().baseName}
-            class="w-full"
+            class="w-full pt-14 md:pt-0"
             classList={{
               "bg-[url(/dev-bg-light.svg)]": import.meta.env.DEV,
               "dark:bg-[url(/dev-bg-dark.svg)]": import.meta.env.DEV,