mirror of
https://github.com/StepanovPlaton/AboutMe.git
synced 2026-04-05 21:30:51 +04:00
121 lines
3.6 KiB
Plaintext
121 lines
3.6 KiB
Plaintext
---
|
|
import { Icon } from "astro-icon/components";
|
|
import { NAVBAR_HEIGHT } from "@constants/constants";
|
|
import { i18n } from "@i18n/translation";
|
|
import I18nKey from "@i18n/i18nKey";
|
|
|
|
|
|
interface Props {
|
|
class?: string;
|
|
style?: string;
|
|
}
|
|
|
|
const { class: className, style } = Astro.props;
|
|
---
|
|
|
|
<table-of-contents data-is-floating="true" data-navbar-height={NAVBAR_HEIGHT} class={className} style={style}>
|
|
<div class="toc-floating-container">
|
|
<div class="toc-floating-btn-wrapper rounded-2xl overflow-hidden transition">
|
|
<button class="toc-floating-btn btn-card rounded-2xl p-0 flex items-center justify-center" aria-label="Table of Contents">
|
|
<Icon name="material-symbols:format-list-bulleted-rounded" size={24} />
|
|
</button>
|
|
</div>
|
|
<div class="toc-floating-panel hidden opacity-0 translate-y-4 pointer-events-none">
|
|
<div class="toc-panel-header">
|
|
<Icon name="material-symbols:format-list-bulleted-rounded" class="text-(--primary)" size={20} />
|
|
<span class="text-sm font-bold text-75">{i18n(I18nKey.tableOfContents)}</span>
|
|
</div>
|
|
<div class="toc-inner-content relative"></div>
|
|
</div>
|
|
</div>
|
|
</table-of-contents>
|
|
|
|
<script>
|
|
import "./sidebar/toc";
|
|
</script>
|
|
|
|
<style lang="stylus">
|
|
.toc-floating-container
|
|
position: fixed
|
|
right: 1rem
|
|
bottom: 6.78rem
|
|
z-index: 90
|
|
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)
|
|
pointer-events: none
|
|
|
|
.toc-floating-btn-wrapper
|
|
width: 3rem
|
|
height: 3rem
|
|
pointer-events: auto
|
|
box-shadow: 0 0 0 1px var(--btn-regular-bg), 0 0 1em var(--btn-regular-bg)
|
|
color: var(--primary)
|
|
|
|
.toc-floating-btn
|
|
width: 100%
|
|
height: 100%
|
|
cursor: pointer
|
|
color: inherit
|
|
border: none
|
|
transition: transform 0.2s, background-color 0.2s
|
|
|
|
&:active
|
|
scale: 0.9
|
|
|
|
.toc-floating-panel
|
|
position: absolute
|
|
bottom: 100%
|
|
right: 0
|
|
margin-bottom: 1rem
|
|
width: 16rem
|
|
max-height: 60vh
|
|
overflow-y: auto
|
|
background-color: var(--card-bg)
|
|
border-radius: 1rem
|
|
padding: 0.75rem
|
|
box-shadow: var(--shadow-lg)
|
|
border: 1px solid var(--btn-regular-bg)
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
|
|
z-index: 91
|
|
pointer-events: auto
|
|
|
|
/* Scrollbar styling */
|
|
scrollbar-width: thin
|
|
scrollbar-color: var(--toc-btn-hover) transparent
|
|
|
|
.toc-panel-header
|
|
display: flex
|
|
align-items: center
|
|
gap: 0.5rem
|
|
padding: 0.25rem 0.5rem 0.75rem 0.5rem
|
|
border-bottom: 1px solid var(--btn-regular-bg)
|
|
margin-bottom: 0.5rem
|
|
|
|
.toc-floating-panel::-webkit-scrollbar
|
|
width: 4px
|
|
.toc-floating-panel::-webkit-scrollbar-track
|
|
background: transparent
|
|
.toc-floating-panel::-webkit-scrollbar-thumb
|
|
background: var(--toc-btn-hover)
|
|
border-radius: 10px
|
|
|
|
.toc-floating-container.move-up
|
|
translate: 0 -4rem
|
|
|
|
.toc-floating-container.toc-hide
|
|
translate: 0 2rem
|
|
scale: 0.9
|
|
opacity: 0
|
|
pointer-events: none
|
|
|
|
/* Mobile adjustments */
|
|
@media (max-width: 768px)
|
|
.toc-floating-container
|
|
bottom: 5.5rem
|
|
right: 0.5rem
|
|
|
|
/* Highlighting for TOC items */
|
|
:global(.toc-floating-panel .toc-inner-content a.visible .text-50),
|
|
:global(.toc-floating-panel .toc-inner-content a.visible .text-30)
|
|
color: var(--primary)
|
|
font-weight: 500
|
|
</style> |