web-next: Replace AppSidebar with responsive Navigation

web-next/src/components/Footer.tsx

@@ -0,0 +1,45 @@
+import { useLingui } from "~/lib/i18n/macro.d.ts";
+import { Trans } from "./Trans.tsx";
+
+export interface FooterProps {
+  class?: string;
+}
+
+export function Footer(props: FooterProps) {
+  const { t } = useLingui();
+
+  return (
+    <footer
+      class={`p-4 text-xs text-muted-foreground ${props.class ?? ""}`}
+    >
+      <p class="underline mb-2">
+        <a href="/coc">{t`Code of conduct`}</a>
+      </p>
+      <p>
+        <Trans
+          message={t`The source code of this website is available on ${"GITHUB_REPOSITORY"} under the ${"AGPL-3.0"} license.`}
+          values={{
+            GITHUB_REPOSITORY: () => (
+              <a
+                href="https://github.com/hackers-pub/hackerspub"
+                target="_blank"
+                class="underline"
+              >
+                {t`GitHub repository`}
+              </a>
+            ),
+            "AGPL-3.0": () => (
+              <a
+                href="https://www.gnu.org/licenses/agpl-3.0.en.html"
+                target="_blank"
+                class="underline"
+              >
+                AGPL 3.0
+              </a>
+            ),
+          }}
+        />
+      </p>
+    </footer>
+  );
+}

web-next/src/components/Navigation.tsx

@@ -0,0 +1,162 @@
+import { A, useLocation } from "@solidjs/router";
+import { graphql } from "relay-runtime";
+import { Show } from "solid-js";
+import { createFragment } from "solid-relay";
+import { useNoteCompose } from "~/contexts/NoteComposeContext.tsx";
+import { useLingui } from "~/lib/i18n/macro.d.ts";
+import IconBell from "~icons/lucide/bell";
+import IconList from "~icons/lucide/list";
+import IconSearch from "~icons/lucide/search";
+import IconSquarePen from "~icons/lucide/square-pen";
+import type { Navigation_signedAccount$key } from "./__generated__/Navigation_signedAccount.graphql.ts";
+import { Footer } from "./Footer.tsx";
+import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar.tsx";
+
+export interface NavigationProps {
+  $signedAccount: Navigation_signedAccount$key;
+}
+
+export function Navigation(props: NavigationProps) {
+  const { t } = useLingui();
+  const { open: openNoteCompose } = useNoteCompose();
+  const location = useLocation();
+
+  const signedAccount = createFragment(
+    graphql`
+      fragment Navigation_signedAccount on Account {
+        username
+        avatarUrl
+      }
+    `,
+    () => props.$signedAccount,
+  );
+
+  const isActive = (path: string) => {
+    return location.pathname === path ||
+      location.pathname.startsWith(path + "/");
+  };
+
+  return (
+    <Show when={signedAccount()} keyed>
+      {(account) => (
+        <nav
+          class="fixed sm:flex sm:flex-col z-50 border-border bg-background/95 bottom-0 left-0 right-0 border-t sm:sticky sm:top-0 sm:h-screen sm:w-16 sm:shrink-0 sm:border-t-0 sm:border-r lg:w-50 sm:py-3"
+          role="navigation"
+          aria-label={t`Main navigation`}
+        >
+          <A
+            href="/"
+            class="hidden sm:flex items-center justify-center p-3 lg:px-4"
+            aria-label={t`Home`}
+          >
+            <img
+              src="/pubnyan-normal-border.svg"
+              alt="Hackers' Pub"
+              class="size-9 lg:hidden"
+            />
+            <picture class="hidden lg:block">
+              <source
+                srcset="/logo-dark.svg"
+                media="(prefers-color-scheme: dark)"
+              />
+              <img
+                src="/logo-light.svg"
+                alt="Hackers' Pub"
+                class="h-10"
+              />
+            </picture>
+          </A>
+          <ul class="flex h-13 items-center justify-around px-2 sm:h-auto sm:flex-col sm:justify-start sm:gap-1 sm:px-0 sm:py-2 lg:pl-6">
+            <li class="flex-1 sm:flex-none sm:w-full">
+              <A
+                href="/feed"
+                class="flex items-center justify-center py-3 text-muted-foreground transition-colors sm:p-3 lg:justify-start lg:gap-3 lg:rounded-full lg:hover:bg-accent"
+                classList={{
+                  "text-foreground": isActive("/feed"),
+                }}
+                aria-label={t`Feed`}
+                aria-current={isActive("/feed") ? "page" : undefined}
+              >
+                <IconList class="size-6 shrink-0" aria-hidden="true" />
+                <span class="hidden lg:inline">{t`Feed`}</span>
+              </A>
+            </li>
+            <li class="flex-1 sm:flex-none sm:w-full">
+              <A
+                href="/notifications"
+                class="flex items-center justify-center py-3 text-muted-foreground transition-colors sm:p-3 lg:justify-start lg:gap-3 lg:rounded-full lg:hover:bg-accent"
+                classList={{
+                  "text-foreground": isActive("/notifications"),
+                }}
+                aria-label={t`Notifications`}
+                aria-current={isActive("/notifications") ? "page" : undefined}
+              >
+                <IconBell class="size-6 shrink-0" aria-hidden="true" />
+                <span class="hidden lg:inline">{t`Notifications`}</span>
+              </A>
+            </li>
+            <li class="flex-1 sm:hidden">
+              <button
+                type="button"
+                onClick={openNoteCompose}
+                class="flex w-full items-center justify-center py-3 text-muted-foreground transition-colors sm:p-3"
+                aria-label={t`Create Note`}
+              >
+                <IconSquarePen class="size-6 shrink-0" aria-hidden="true" />
+              </button>
+            </li>
+            <li class="flex-1 sm:flex-none sm:w-full">
+              <A
+                href="/search"
+                class="flex items-center justify-center py-3 text-muted-foreground transition-colors sm:p-3 lg:justify-start lg:gap-3 lg:rounded-full lg:hover:bg-accent"
+                classList={{
+                  "text-foreground": isActive("/search"),
+                }}
+                aria-label={t`Search`}
+                aria-current={isActive("/search") ? "page" : undefined}
+              >
+                <IconSearch class="size-6 shrink-0" aria-hidden="true" />
+                <span class="hidden lg:inline">{t`Search`}</span>
+              </A>
+            </li>
+            <li class="flex-1 sm:flex-none sm:w-full">
+              <A
+                href={`/@${account.username}`}
+                class="flex items-center justify-center py-3 sm:p-3 lg:justify-start lg:gap-3 lg:rounded-full lg:hover:bg-accent"
+                aria-label={t`Profile`}
+                aria-current={location.pathname === `/@${account.username}`
+                  ? "page"
+                  : undefined}
+              >
+                <Avatar
+                  class="size-6 shrink-0"
+                  classList={{
+                    "ring-2 ring-foreground": location.pathname ===
+                      `/@${account.username}`,
+                  }}
+                >
+                  <AvatarImage src={account.avatarUrl} alt={account.username} />
+                  <AvatarFallback>
+                    {account.username.slice(0, 2).toUpperCase()}
+                  </AvatarFallback>
+                </Avatar>
+                <span class="hidden lg:inline">{t`Profile`}</span>
+              </A>
+            </li>
+          </ul>
+          <div class="hidden sm:flex w-full px-2 mt-5">
+            <button
+              type="button"
+              onClick={openNoteCompose}
+              class="flex lg:flex-1 items-center justify-center p-3 rounded-full bg-primary text-primary-foreground transition-colors hover:bg-primary/90"
+              aria-label={t`Create Note`}
+            >
+              <IconSquarePen class="size-5" aria-hidden="true" />
+            </button>
+          </div>
+          <Footer class="hidden lg:block sm:mt-auto" />
+        </nav>
+      )}
+    </Show>
+  );
+}