mirror of
https://github.com/tabler/tabler.git
synced 2026-08-29 13:21:29 +04:00
50 lines
2.0 KiB
Plaintext
50 lines
2.0 KiB
Plaintext
---
|
|
// Wraps the page body in a card with a left settings-nav column; the active
|
|
// nav item is driven by the `active` prop.
|
|
|
|
import Subheader from '@ui/Subheader.astro'
|
|
import DefaultLayout from './DefaultLayout.astro'
|
|
import ListGroup from '@ui/ListGroup.astro'
|
|
import ListGroupItem from '@ui/ListGroupItem.astro'
|
|
|
|
interface Props {
|
|
/** current page slug for the active nav item: 'settings' | 'settings-plan' */
|
|
active?: string
|
|
/** <title> — falls back to "Settings" */
|
|
title?: string
|
|
}
|
|
|
|
const { active, title = 'Settings' } = Astro.props
|
|
---
|
|
|
|
<DefaultLayout title={title} pageHeader="Account Settings">
|
|
<div class="card">
|
|
<div class="row g-0">
|
|
<!-- BEGIN SETTINGS NAV -->
|
|
<div class="col-12 col-md-3 border-end">
|
|
<div class="card-body">
|
|
<Subheader as="h4">Business settings</Subheader>
|
|
|
|
<ListGroup as="nav" aria-label="Business settings" transparent>
|
|
<ListGroupItem as="a" action active={active === 'settings'} class="d-flex align-items-center" href="./settings.html">My Account</ListGroupItem>
|
|
<ListGroupItem as="a" action class="d-flex align-items-center" href="#">My Notifications</ListGroupItem>
|
|
<ListGroupItem as="a" action class="d-flex align-items-center" href="#">Connected Apps</ListGroupItem>
|
|
<ListGroupItem as="a" action active={active === 'settings-plan'} class="d-flex align-items-center" href="./settings-plan.html">Plans</ListGroupItem>
|
|
<ListGroupItem as="a" action class="d-flex align-items-center" href="#">Billing & Invoices</ListGroupItem>
|
|
</ListGroup>
|
|
|
|
<Subheader as="h4" class="mt-4">Experience</Subheader>
|
|
|
|
<ListGroup as="nav" aria-label="Experience" transparent>
|
|
<ListGroupItem as="a" action href="#">Give Feedback</ListGroupItem>
|
|
</ListGroup>
|
|
</div>
|
|
</div>
|
|
<!-- END SETTINGS NAV -->
|
|
<div class="col-12 col-md-9 d-flex flex-column">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</DefaultLayout>
|