1
0
Fork 0
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:
Denis Ergin 2024-10-18 11:51:16 +02:00
parent 20d548bec6
commit d207c35805
11 changed files with 283 additions and 58 deletions

View 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>

View 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>

View 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>

View file

@ -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
View 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>