tabler/preview/pages/scroll-spy.astro

---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import { slugifyWord as slug } from '@shared/lib/string-format'

const articles: [string, string[]][] = [
  [
    'Home',
    [
      "Welcome back. Here's a quick look at what's new since your last visit — three updates shipped, two conversations are waiting for a reply, and your weekly summary is ready below.",
      'The dashboard pulls together everything you touched this week: recent files, comments left on your work, and the tasks you marked to revisit. Nothing here requires action unless you want it to.',
    ],
  ],
  [
    'Profile',
    [
      "Your profile is what teammates see when they open your card — name, role, and a short line about what you're working on. Keep it current; it's the first thing a new collaborator checks before reaching out.",
      "Profile photos update automatically from your workspace avatar. If you'd rather use a different image, upload one from the settings page and it will sync across every app connected to this account.",
    ],
  ],
  [
    'Messages',
    [
      'Conversations are grouped by project, so a thread never gets lost between unrelated channels. Mentions are highlighted, and anything addressed directly to you moves to the top of the list.',
      "Replies you haven't read yet are marked with a dot. Archiving a conversation doesn't delete it — it just clears it from the active list until someone posts in it again.",
    ],
  ],
  [
    'Settings',
    [
      'Most defaults here are fine for everyday use, but a few are worth reviewing: notification frequency, default timezone, and who can see your activity status.',
      "Changes save immediately — there's no separate 'apply' step. If something looks wrong after a change, the history tab keeps the last ten versions of your settings so you can roll back.",
    ],
  ],
  [
    'About',
    [
      'This project started as an internal tool for a five-person team and grew from there. The goal has stayed the same the whole time: make the boring parts of daily work take less time.',
      'We ship small updates often rather than large releases a few times a year. That means the product changes gradually, but it also means feedback turns into fixes faster.',
    ],
  ],
  [
    'Contact',
    [
      'The fastest way to reach the team is the in-app chat — most questions get a reply within a few hours during business days. For anything urgent, use the priority line in your account settings.',
      'Bug reports and feature requests both go to the same inbox, so include a short description of what you expected versus what happened. Screenshots help more than long explanations.',
    ],
  ],
  [
    'Services',
    [
      'Onboarding, migration, and training are available as add-ons for teams moving from another tool. A specialist walks through your existing setup and maps it to the equivalent here before anything is switched over.',
      "Ongoing support plans include a monthly check-in call, priority responses, and early access to features still in testing. Most teams start on the standard plan and upgrade once they've settled in.",
    ],
  ],
  [
    'Team',
    [
      'The team is spread across four time zones, which means someone is usually online to help. Each person owns a specific part of the product, listed on their profile.',
      "We hire slowly and keep the team small on purpose — it's easier to keep quality high and response times short when fewer people need to stay in sync.",
    ],
  ],
  ['Work', ['A selection of recent projects is listed below, newest first. Each entry links to a short write-up covering the problem, the approach, and what changed as a result.', 'Older work is archived rather than deleted, so nothing here disappears — it just moves further down the list as new projects are added.']],
]
---

<DefaultLayout title="Scroll Spy" pageMenu="base.scroll-spy">
  <div class="row g-5">
    <div class="col-sm-2">
      <div class="sticky-top">
        <h3>Menu</h3>
        <nav class="nav nav-vertical nav-pills" id="pills">
          {
            articles.map(([header]) => (
              <a class="nav-link" href={`#pills-${slug(header)}`}>
                {header}
              </a>
            ))
          }
        </nav>
      </div>
    </div>
    <div class="col-sm" data-bs-spy="scroll" data-bs-target="#pills" data-bs-offset="0">
      <div class="card card-lg">
        <div class="card-body">
          {
            articles.map(([header, paragraphs]) => (
              <Fragment>
                <h3 id={`pills-${slug(header)}`}>{header}</h3>
                {paragraphs.map((paragraph, index) => (
                  <p class={index === paragraphs.length - 1 ? 'mb-6' : undefined}>{paragraph}</p>
                ))}
              </Fragment>
            ))
          }
        </div>
      </div>
    </div>
  </div>
</DefaultLayout>