Skip to content

feat(web): navbar auto-hide + responsif, blok install lebih flat #111

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
itsflaid merged 1 commit into from
Oct 19, 2026
Merged

feat(web): navbar auto-hide + responsif, blok install lebih flat #111

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions apps/web/src/components/docs/DocsSidebar.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,24 +99,26 @@ const tree = buildTree(headings);
<style>
.docs-sidebar {
position: sticky;
top: 2rem;
max-height: calc(100vh - 4rem);
top: calc(2rem + var(--sticky-offset));
max-height: calc(100vh - 4rem - var(--sticky-offset));
transition: top 260ms cubic-bezier(0.2, 0.7, 0.2, 1);
overflow-y: auto;
}

.docs-mobile-toc-wrap {
display: none;
}

@media (max-width: 760px) {
@media (max-width: 759px) {
.docs-sidebar {
display: none;
}

.docs-mobile-toc-wrap {
position: sticky;
top: 0;
top: var(--sticky-offset);
z-index: 40;
transition: top 260ms cubic-bezier(0.2, 0.7, 0.2, 1);
padding-block: 0.5rem;
background: var(--paper);
display: block;
Expand Down
3 changes: 2 additions & 1 deletion apps/web/src/components/landing/CommandsSection.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,8 @@ const commands = [

.commands__title {
position: sticky;
top: 2rem;
top: calc(2rem + var(--sticky-offset));
transition: top 260ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
}

Expand Down
134 changes: 86 additions & 48 deletions apps/web/src/components/landing/CopyCommand.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,17 @@ const { command, size = "base" } = Astro.props;
<span class="copy__text">{command}</span>
</code>
<button type="button" class="copy__button" aria-label={`Copy ${command}`}>
<span class="copy__idle">Copy</span>
<span class="copy__done" aria-hidden="true">Copied</span>
<svg class="copy__icon copy__icon--copy" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<rect x="5.25" y="5.25" width="8" height="8" rx="1.5" fill="none" stroke="currentColor" stroke-width="1.5" />
<path d="M10.75 3.5v-.25A1.5 1.5 0 0 0 9.25 1.75h-5.5a1.5 1.5 0 0 0-1.5 1.5v5.5a1.5 1.5 0 0 0 1.5 1.5H4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
</svg>
<svg class="copy__icon copy__icon--check" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path d="m3 8.5 3.25 3.25L13 4.75" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="copy__label">
<span class="copy__idle">Copy</span>
<span class="copy__done" aria-hidden="true">Copied</span>
</span>
</button>
</div>

Expand All @@ -29,94 +38,123 @@ const { command, size = "base" } = Astro.props;
</script>

<style>
/*
* One line of type sitting on a rule, not a box. The whole row is the click
* target (the button stretches over it), and the rule turns blue on hover.
*/
.copy {
display: inline-flex;
align-items: stretch;
max-width: 100%;
border: 1px solid var(--ink);
border-radius: var(--radius);
background: var(--paper);
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
width: min(100%, 30rem);
padding-bottom: 0.7rem;
border-bottom: 1px solid var(--ink);
transition: border-color 150ms ease;
}

.copy:hover,
.copy:has(.copy__button:focus-visible) {
border-bottom-color: var(--accent);
}

.copy__line {
display: flex;
align-items: center;
gap: 0.75ch;
min-width: 0;
padding: 0.8rem 1rem;
font-size: 0.9375rem;
font-size: 1.0625rem;
color: var(--ink);
overflow-x: auto;
white-space: nowrap;
overflow-wrap: anywhere;
}

.copy__prompt {
color: var(--accent);
margin-right: 0.9ch;
color: var(--muted);
}

.copy__button {
flex: none;
min-width: 5.5rem;
padding: 0 1rem;
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0;
border: 0;
border-left: 1px solid var(--ink);
border-radius: 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0;
background: var(--ink);
color: var(--paper);
background: none;
color: var(--muted);
font-family: var(--font-body);
font-size: 0.9375rem;
font-weight: 500;
cursor: pointer;
transition: background 150ms ease;
transition: color 150ms ease;
}

.copy__button:hover {
background: var(--accent);
/* Stretch the hit area over the whole row. */
.copy__button::after {
content: "";
position: absolute;
inset: -0.5rem 0 0;
}

.copy__button:focus-visible {
outline: none;
}

.copy__button:focus-visible::after {
outline: 2px solid var(--accent);
outline-offset: 4px;
}

.copy:hover .copy__button {
color: var(--accent);
}

.copy__icon {
flex: none;
}

.copy__icon--check,
.copy__done,
.copy__button[data-copied] .copy__icon--copy,
.copy__button[data-copied] .copy__idle {
display: none;
}

.copy__button[data-copied] {
color: var(--accent);
}

.copy__button[data-copied] .copy__icon--check {
display: block;
}

.copy__button[data-copied] .copy__done {
display: inline;
}

/* On narrow screens let the command wrap instead of hiding its tail. */
@media (max-width: 40rem) {
.copy__line {
align-items: flex-start;
padding: 0.75rem;
font-size: 0.8125rem;
white-space: normal;
overflow-wrap: anywhere;
}

.copy__button {
min-width: 4.5rem;
padding: 0 0.75rem;
}
/* Large: the command is the headline of its section. */
.copy--large {
width: min(100%, 52rem);
padding-bottom: 1.1rem;
}

.copy--large .copy__line {
padding: 1.1rem 1.4rem;
font-size: clamp(1rem, 2.6vw, 1.75rem);
font-size: clamp(1.25rem, 4.6vw, 2.75rem);
letter-spacing: -0.03em;
}

.copy--large .copy__button {
min-width: 7rem;
font-size: 1.0625rem;
}

@media (max-width: 40rem) {
.copy--large .copy__line {
padding: 0.9rem 0.75rem;
font-size: 1rem;
.copy {
gap: 1rem;
}

.copy--large .copy__button {
min-width: 4.5rem;
.copy__line {
font-size: 0.9375rem;
}

.copy--large .copy__line {
font-size: clamp(0.9375rem, 4.2vw, 1.5rem);
}
}
</style>
8 changes: 4 additions & 4 deletions apps/web/src/components/landing/HeroSection.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import CopyCommand from "./CopyCommand.astro";
<a class="link" href="https://github.com/itsflaid/devmap">Source on GitHub</a>
</div>

<p class="hero__note">Needs Node 22 or newer. No account or API key to analyze.</p>
<p class="hero__note">Needs Node 22 or newer. An API key is optional and only adds the AI layer.</p>
</section>

<style>
Expand Down Expand Up @@ -74,9 +74,9 @@ import CopyCommand from "./CopyCommand.astro";
.hero__install {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem 2rem;
margin-top: 2rem;
align-items: baseline;
gap: 1.25rem 2.5rem;
margin-top: 2.25rem;
}

.hero__note {
Expand Down
Loading
Loading