feat(ui): ✨ add page header
This commit is contained in:
parent
f769619705
commit
684a996226
102
components/Header.css
Normal file
102
components/Header.css
Normal file
|
@ -0,0 +1,102 @@
|
|||
header {
|
||||
width: 100%;
|
||||
padding: var(--_gap);
|
||||
display: flex;
|
||||
gap: var(--_gap);
|
||||
margin: 0;
|
||||
background-color: var(--_translucent);
|
||||
color: var(--_font-color);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
header span {
|
||||
text-wrap: nowrap;
|
||||
padding: var(--_gap);
|
||||
font-size: large;
|
||||
font-weight: bolder;
|
||||
|
||||
& a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
header nav {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
gap: var(--_gap);
|
||||
align-items: center;
|
||||
|
||||
& > li {
|
||||
padding: var(--_gap-half) var(--_gap);
|
||||
list-style: none;
|
||||
border: var(--_border-size) solid transparent;
|
||||
transition: border var(--_transition-delay) ease;
|
||||
|
||||
& > a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
& > li:hover {
|
||||
border: var(--_border-size) solid currentColor;
|
||||
}
|
||||
|
||||
& > li:has(details[open]) {
|
||||
border: var(--_border-size) solid currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
header details {
|
||||
cursor: pointer;
|
||||
|
||||
& summary {
|
||||
display: flex;
|
||||
gap: var(--_gap);
|
||||
list-style: none;
|
||||
|
||||
&::after {
|
||||
display: inline-block;
|
||||
content: '▽';
|
||||
transition: all var(--_transition-delay) ease;
|
||||
}
|
||||
}
|
||||
|
||||
&[open] summary::after {
|
||||
transform: rotate(60deg);
|
||||
}
|
||||
|
||||
& ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
background-color: var(--_translucent);
|
||||
backdrop-filter: blur(var(--_blur));
|
||||
border: var(--_border-size) solid currentColor;
|
||||
border-top: none;
|
||||
transform: translate(
|
||||
calc(-1 * var(--_gap) - 2px),
|
||||
calc(var(--_gap-half) + 2px)
|
||||
);
|
||||
}
|
||||
|
||||
& li {
|
||||
list-style: none;
|
||||
border: none;
|
||||
padding: var(--_gap) calc(var(--_gap) + 0.4rem);
|
||||
}
|
||||
|
||||
& li:hover {
|
||||
background-color: var(--_translucent);
|
||||
}
|
||||
}
|
||||
|
||||
header input {
|
||||
padding: var(--_gap-half) var(--_gap);
|
||||
align-self: center;
|
||||
border: none;
|
||||
background-color: var(--_translucent);
|
||||
}
|
32
components/Header.tsx
Normal file
32
components/Header.tsx
Normal file
|
@ -0,0 +1,32 @@
|
|||
export function Header() {
|
||||
return (
|
||||
<header>
|
||||
<span>
|
||||
<a href='/'>Coh@bit 2.0 POC</a>
|
||||
</span>
|
||||
<nav>
|
||||
<li>
|
||||
<a href='/machines'>Machines</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='/projets'>Projets</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='/blog'>Blog</a>
|
||||
</li>
|
||||
<li>
|
||||
<details>
|
||||
<summary>Fablab</summary>
|
||||
<ul>
|
||||
<li>Équipes</li>
|
||||
<li>Redmine</li>
|
||||
<li>Git</li>
|
||||
<li>Matrix</li>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
</nav>
|
||||
<input type='search' name='' id='' placeholder='Rechercher' />
|
||||
</header>
|
||||
)
|
||||
}
|
|
@ -1,17 +1,32 @@
|
|||
:root {
|
||||
/* font */
|
||||
--_font-size: var(--font-size-1);
|
||||
--_font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
|
||||
Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
--_font-color: var(--choco-12);
|
||||
|
||||
/* border */
|
||||
--_border-size: var(--border-size-2);
|
||||
|
||||
/* size */
|
||||
--_gap: var(--size-3);
|
||||
--_gap-half: calc(var(--_gap) / 2);
|
||||
|
||||
/* color */
|
||||
--_accent-color: var(--lime-6);
|
||||
accent-color: var(--_accent-color);
|
||||
--_translucent: hsl(from var(--_font-color) h s l / 0.1);
|
||||
|
||||
/* other */
|
||||
--_background: url('assets/css_bg_stardust.png') repeat top left / 800px;
|
||||
--_blur: var(--size-1);
|
||||
--_transition-delay: 0.2s;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--_font-family);
|
||||
font-size: var(--_font-size);
|
||||
accent-color: var(--_accent-color);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
|
1
src/stylesheets/components.css
Normal file
1
src/stylesheets/components.css
Normal file
|
@ -0,0 +1 @@
|
|||
@import url('../../components/Header.css');
|
|
@ -5,4 +5,5 @@ layer(reset);
|
|||
layer(framework);
|
||||
@import url('./base.css') layer(base);
|
||||
@import url('./layout.css') layer(layout);
|
||||
@import url('./components.css') layer(components);
|
||||
@layer reset, framework, base, layout, components, utilities;
|
||||
|
|
Loading…
Reference in a new issue