Skip to content

docs: assign fixed header to layout #558

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
merged 2 commits into from
May 31, 2022
Merged

docs: assign fixed header to layout #558

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d8e0e64
docs: assign fixed header to layout
adamdbradley May 31, 2022
8a0d729
🎬
adamdbradley May 31, 2022
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
38 changes: 31 additions & 7 deletions packages/docs/src/components/header/header.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,16 @@
header {
height: calc(var(--header-height));
margin-bottom: 6px;
color: white;
background: var(--qwik-blue);
box-shadow: 0px 2px 7px #0000003d;
box-shadow: 0px 2px 5px #0000003d;
}

.fixed-header header {
position: fixed;
top: 0;
width: 100%;
z-index: 40;
}

header li {
Expand All @@ -17,9 +26,15 @@ header li a:hover svg {
opacity: 0.8;
}

header .mobile-menu {
position: absolute;
right: 0;
@apply p-3 md:hidden;
}

header ul {
@apply hidden md:block;
@apply pt-14 pb-6 md:pt-0;
@apply pt-0 pb-6 md:pt-0;
}

header .more-icon {
Expand All @@ -32,8 +47,12 @@ header .close-icon {

@media (max-width: 767px) {
.header-open header ul {
position: absolute;
z-index: 10;
display: block;
background: #0099ff;
top: var(--header-height);
width: 100%;
background: var(--qwik-blue);
}

.header-open header .more-icon {
Expand All @@ -46,17 +65,22 @@ header .close-icon {
}

header .header-inner {
@apply max-w-[1400px] mx-auto;
max-width: 1400px;
margin-left: auto;
margin-right: auto;
}

.full-width header .header-inner {
@apply max-w-[100%];
max-width: 100%;
}

header .header-logo {
@apply fixed top-[5px] left-[max(0px,calc(50%-45rem))] pl-4;
position: absolute;
top: 5px;
left: max(0px, calc(50% - 45rem));
padding-left: 1rem;
}

.full-width header .header-logo {
@apply left-[0px];
left: 0;
}
6 changes: 3 additions & 3 deletions packages/docs/src/components/header/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,15 @@ export const Header = component$(
});

return (
<Host className="fixed top-0 z-40 w-full h-[56px]">
<Host>
<div class="header-inner">
<div className="header-logo">
<div class="header-logo">
<a href="/">
<span className="sr-only">Qwik Homepage</span>
<QwikLogo width={110} height={50} />
</a>
</div>
<button onClickQrl={toggleMenu} class="p-3 md:hidden fixed right-0" type="button">
<button onClickQrl={toggleMenu} class="mobile-menu" type="button">
<span class="more-icon">
<MoreIcon width={30} height={30} />
</span>
Expand Down
2 changes: 1 addition & 1 deletion packages/docs/src/layouts/docs/docs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const DocsLayout = component$(() => {
useScopedStyles$(styles);

return (
<Host class="docs">
<Host class="docs fixed-header">
<Header />
<SideBar />
<main>
Expand Down
2 changes: 1 addition & 1 deletion packages/docs/src/layouts/examples/examples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ const Examples = component$((props: ExamplesProp) => {
useScopedStyles$(styles);

return (
<Host class="examples full-width">
<Host class="examples full-width fixed-header">
<Header />

<div class="examples-menu-container">
Expand Down
7 changes: 6 additions & 1 deletion packages/docs/src/layouts/playground/playground.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,12 @@ const Playground = component$(() => {

return (
<Host
class={{ 'full-width': true, playground: true, 'repl-resize-active': store.colResizeActive }}
class={{
playground: true,
'full-width': true,
'fixed-header': true,
'repl-resize-active': store.colResizeActive,
}}
>
<Header />

Expand Down
2 changes: 1 addition & 1 deletion packages/docs/src/layouts/tutorial/tutorial.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ const Tutorial = component$(() => {
const next = tutorials[currentIndex + 1];

return (
<Host class="full-width tutorial">
<Host class="tutorial full-width fixed-header">
<Header />
<main>
<div class="tutorial-content-panel">
Expand Down