mirror of
https://github.com/TheTaz25/denis.ergin.git
synced 2025-07-12 22:08:48 +00:00
feat(knowledge-base): Rewrite Navigation, add utils, initial page for knowledge-base
This commit is contained in:
parent
20d548bec6
commit
d207c35805
11 changed files with 283 additions and 58 deletions
55
src/components/atoms/Button.astro
Normal file
55
src/components/atoms/Button.astro
Normal file
|
@ -0,0 +1,55 @@
|
|||
---
|
||||
import { clx } from '../../utils/classes';
|
||||
type Props = {
|
||||
className?: string;
|
||||
type?: 'primary' | 'ghost';
|
||||
}
|
||||
|
||||
const { className, type, ...props } = Astro.props;
|
||||
const buttonType = type ?? 'primary'
|
||||
---
|
||||
|
||||
<button class={clx({
|
||||
[buttonType]: true,
|
||||
}, className)} {...props}>
|
||||
<slot />
|
||||
</button>
|
||||
|
||||
<style lang="scss">
|
||||
button {
|
||||
border: none;
|
||||
font-size: 1rem;
|
||||
background-color: unset;
|
||||
color: var(--foreground-color);
|
||||
border-radius: 0.5rem 0;
|
||||
padding: 0.5rem 0.75rem;
|
||||
|
||||
&.primary {
|
||||
color: var(--button-fg-color);
|
||||
background-color: var(--button-background-color);
|
||||
border: 2px solid #8da9c4;
|
||||
|
||||
&:focus-within, &:hover {
|
||||
background-color: var(--button-hover-color);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--button-active-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.ghost {
|
||||
&:hover, &:focus-within {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
23
src/components/atoms/Card.astro
Normal file
23
src/components/atoms/Card.astro
Normal file
|
@ -0,0 +1,23 @@
|
|||
---
|
||||
interface Props {
|
||||
to: string;
|
||||
class?: string;
|
||||
}
|
||||
|
||||
const { to, class: className, ...rest } = Astro.props;
|
||||
---
|
||||
|
||||
<a class:list={["card", className]} href={to} {...rest}>
|
||||
<slot />
|
||||
</a>
|
||||
|
||||
<style>
|
||||
.card {
|
||||
background-color: var(--navigation-background-color);
|
||||
display: inline-block;
|
||||
padding: 1rem;
|
||||
border-radius: 0.25rem;
|
||||
max-width: 80vw;
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
19
src/components/atoms/HorizontalSlider.astro
Normal file
19
src/components/atoms/HorizontalSlider.astro
Normal file
|
@ -0,0 +1,19 @@
|
|||
<div class="module-slider">
|
||||
<div class="slider-content">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.module-slider {
|
||||
overflow-x: auto;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.slider-content {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
flex-wrap: nowrap;
|
||||
overflow-y: visible;
|
||||
}
|
||||
</style>
|
|
@ -15,58 +15,34 @@ const currentPath = new URL(Astro.url).pathname.split('/')[1];
|
|||
a {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
font-size: larger;
|
||||
font-size: large;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "{";
|
||||
transform: translateX(-2rem);
|
||||
left: 0;
|
||||
position: absolute;
|
||||
transition-property: transform, opacity;
|
||||
transition-duration: 150ms;
|
||||
transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "}";
|
||||
transform: translateX(2rem);
|
||||
right: 0;
|
||||
position: absolute;
|
||||
font-family: monospace;
|
||||
content: ".clickable";
|
||||
transition-property: transform, opacity;
|
||||
transition-duration: 150ms;
|
||||
transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
|
||||
}
|
||||
|
||||
&:not(.current) {
|
||||
&::after,
|
||||
&::before {
|
||||
&::after {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus-within {
|
||||
&::before,
|
||||
&::after {
|
||||
opacity: 1;
|
||||
}
|
||||
&::before { transform: translateX(-1rem); }
|
||||
&::after { transform: translateX(1rem); }
|
||||
}
|
||||
}
|
||||
|
||||
&.current {
|
||||
&::before {
|
||||
transition: transform 100ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
|
||||
transform: translateX(-2rem);
|
||||
}
|
||||
|
||||
&:hover::before,
|
||||
&:focus-visible::before {
|
||||
transform: translateX(-1rem);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '.current';
|
||||
transform: translateX(2rem);
|
||||
transition: transform 100ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
|
||||
}
|
||||
|
|
77
src/components/nav.astro
Normal file
77
src/components/nav.astro
Normal file
|
@ -0,0 +1,77 @@
|
|||
---
|
||||
import { Icon } from 'astro-icon/components';
|
||||
import Button from './atoms/Button.astro';
|
||||
import Link from './atoms/Link.astro';
|
||||
---
|
||||
|
||||
<div class="nav-wrapper">
|
||||
<Button className="nav-open">
|
||||
<Icon name="ham" />
|
||||
Menü
|
||||
</Button>
|
||||
</div>
|
||||
<nav aria-hidden="true" class="main">
|
||||
<Button className="nav-close" aria-label="Navigation schließen" type="ghost">
|
||||
Menü schließen
|
||||
</Button>
|
||||
<ul>
|
||||
<li><Link to="/">Startseite</Link></li>
|
||||
<li><Link to="/knowledge-base">Knowledge-Base</Link></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<script>
|
||||
function toggleMenu() {
|
||||
const targetAttr = 'aria-hidden';
|
||||
const nav = document.querySelector('nav.main') as HTMLElement;
|
||||
const nextState = nav.getAttribute(targetAttr) === 'true' ? 'false' : 'true';
|
||||
nav.setAttribute(targetAttr, nextState);
|
||||
}
|
||||
|
||||
const openbutton = document.querySelector('button.nav-open') as HTMLButtonElement;
|
||||
openbutton.addEventListener('click', toggleMenu);
|
||||
const closeButton = document.querySelector('button.nav-close') as HTMLButtonElement;
|
||||
closeButton.addEventListener('click', toggleMenu);
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
div.nav-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
nav.main {
|
||||
position: absolute;
|
||||
height: calc(100vh - 2rem);
|
||||
max-width: 90vw;
|
||||
width: 300px;
|
||||
top: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
transition: left 150ms ease-out;
|
||||
background-color: var(--navigation-background-color);
|
||||
border-right: 2px solid #8da9c4;
|
||||
padding-left: 2rem;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
nav.main ul {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
line-height: 2.5rem;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
nav.main[aria-hidden="true"] {
|
||||
left: -100vw;
|
||||
}
|
||||
|
||||
nav.main[aria-hidden="false"] {
|
||||
left: 0rem;
|
||||
}
|
||||
|
||||
button.nav-open {
|
||||
display: inline-flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
Loading…
Add table
Add a link
Reference in a new issue