Skip to content

Updated navigation bar and general layout in the home page #13

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

Open
wants to merge 11 commits into
base: feat/initial-page
Choose a base branch
from
Open

Updated navigation bar and general layout in the home page #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
95e1068
Update Navbar.svelte
Abstra208 Jul 1, 2025
37bc778
feat: enhance Navbar mobile menu and improve hero section styling
Abstra208 Jul 1, 2025
0bf5153
fix: update ninja-i18n-action to use the latest version
Abstra208 Jul 1, 2025
dc71548
feat: update styling for LanguageSwitcher and footer, add new SVG ico…
Abstra208 Jul 2, 2025
6c3b3dd
feat: add new navigation sections for features, about, community, and…
Abstra208 Jul 2, 2025
e8e8c83
fix: adjust scroll threshold for navbar visibility and update backgro…
Abstra208 Jul 3, 2025
7f5582b
fix: update footer copyright text to include "All rights reserved."
Abstra208 Jul 3, 2025
941dfb7
fix: update LightSwitch button styles for better visibility in light …
Abstra208 Jul 3, 2025
a089794
fix: update LanguageSwitcher icon color and footer styles for improve…
Abstra208 Jul 4, 2025
ab38da5
fix: add dark mode support for footer border color
Abstra208 Jul 4, 2025
4f3b1be
fix: update footer border color for improved contrast in light mode
Abstra208 Jul 4, 2025
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
2 changes: 1 addition & 1 deletion .github/workflows/ninja_i18n.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,6 @@ jobs:

steps:
- name: Run Ninja i18n
uses: opral/ninja-i18n-action@0.3.20
uses: opral/ninja-i18n-action@main
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
2 changes: 1 addition & 1 deletion messages/de.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -257,5 +257,5 @@
"footer_link_privacyPolicy": "Datenschutz",
"footer_link_github": "GitHub",
"footer_link_discord": "Discord",
"footer_copyright": "© {year} Axonotes"
"footer_copyright": "© {year} Axonotes. Alle Rechte vorbehalten."
}
2 changes: 1 addition & 1 deletion messages/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -257,5 +257,5 @@
"footer_link_privacyPolicy": "Privacy Policy",
"footer_link_github": "GitHub",
"footer_link_discord": "Discord",
"footer_copyright": "© {year} Axonotes"
"footer_copyright": "© {year} Axonotes. All rights reserved."
}
4 changes: 2 additions & 2 deletions src/lib/components/LightSwitch.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
{#if checked}
<button
type="button"
class="btn-icon preset-filled scheme-light"
class="btn-icon preset-filled scheme-light bg-transparent text-white"
onclick={() => onCheckedChange({checked: false})}
aria-label="Switch to light mode"
>
Expand All @@ -49,7 +49,7 @@
{:else}
<button
type="button"
class="btn-icon preset-filled scheme-dark"
class="btn-icon preset-filled scheme-dark bg-transparent text-black"
onclick={() => onCheckedChange({checked: true})}
aria-label="Switch to dark mode"
>
Expand Down
54 changes: 33 additions & 21 deletions src/lib/components/Navbar.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@
import {X, Menu} from "@lucide/svelte";
import {Modal} from "@skeletonlabs/skeleton-svelte";
import * as m from "$lib/paraglide/messages.js";
import { onMount } from "svelte";
import { writable } from "svelte/store";

// Reconstruct the structured data from the flat message strings
const navLinks = [
Expand All @@ -23,10 +25,24 @@
function isCurrentPage(href: string): boolean {
return page.url.pathname === href;
}

// Track if the page is scrolled
const scrolled = writable(false);

function handleScroll() {
scrolled.set(window.scrollY > 200);
}

onMount(() => {
handleScroll();
window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll);
});
</script>

<nav
class="border-surface-200/50 dark:border-surface-700/50 bg-surface-50/80 dark:bg-surface-950/80 sticky top-0 z-50 border-b backdrop-blur-md"
class="sticky top-4 z-50 rounded-4xl mx-4 lg:mx-25 backdrop-blur-xs transition-all
{ $scrolled ? 'bg-surface-100/80 dark:bg-surface-800/80' : 'bg-surface-50/80 dark:bg-surface-950/80' }"
aria-label={m.nav_aria_label()}
>
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
Expand All @@ -42,7 +58,7 @@
class="h-8 w-8"
loading="eager"
/>
<span class="hidden sm:block">{m.nav_logo_text()}</span>
<span>{m.nav_logo_text()}</span>
</a>

<!-- Desktop Navigation -->
Expand All @@ -53,12 +69,8 @@
<a
href={link.href}
class="text-surface-800 dark:text-surface-200 hover:text-primary-600 dark:hover:text-primary-400 rounded-lg px-3 py-2 text-sm font-medium transition-colors
{isCurrentPage(link.href)
? 'bg-primary-200/80 dark:bg-primary-800/80'
: ''}"
aria-current={isCurrentPage(link.href)
? "page"
: undefined}
{isCurrentPage(link.href) ? 'bg-primary-200/80 dark:bg-primary-800/80' : ''}"
aria-current={isCurrentPage(link.href) ? "page" : undefined}
>
{link.label}
</a>
Expand All @@ -81,48 +93,47 @@

<!-- Mobile Controls -->
<div class="flex items-center gap-3 md:hidden">
<LightSwitch />
<Modal
open={isMobileMenuOpen}
onOpenChange={(e) => (isMobileMenuOpen = e.open)}
triggerBase="text-surface-700 dark:text-surface-300 hover:text-primary-600 dark:hover:text-primary-400 rounded-lg p-2 transition-colors"
contentBase="bg-surface-50 dark:bg-surface-950 fixed inset-y-0 right-0 z-50 w-80 max-w-[85vw] border-l border-surface-200 dark:border-surface-700 p-6 shadow-xl"
contentBase="bg-surface-50 dark:bg-surface-950 fixed inset-y-0 right-0 z-50 w-full h-full border-l border-surface-200 dark:border-surface-700 p-6 shadow-xl"
positionerJustify="justify-end"
positionerAlign=""
positionerPadding=""
transitionsPositionerIn={{x: 320, duration: 250}}
transitionsPositionerOut={{x: 320, duration: 200}}
transitionsPositionerIn={{y: -200, duration: 250}}
transitionsPositionerOut={{y: -200, duration: 200}}
>
{#snippet trigger()}
<Menu class="h-6 w-6" />
<span class="sr-only">{m.nav_mobile_openMenu_sr()}</span
>
{/snippet}
{#snippet content()}
<div class="flex h-full flex-col">
<div class="flex items-center h-full flex-col">
<!-- Mobile Header -->
<div class="flex items-center justify-between pb-6">
<div class="w-[90vw] flex items-center justify-between pb-4 mb-6 border-b border-surface-200 dark:border-surface-700">
<div
class="text-primary-600 dark:text-primary-400 flex items-center gap-2 text-lg font-bold"
class="px-4 py-2 text-primary-600 dark:text-primary-400 flex items-center gap-2 text-lg font-bold"
>
<img
src="/favicon.svg"
alt={m.nav_logo_alt()}
class="h-6 w-6"
class="h-8 w-8"
/>
{m.nav_logo_text()}
<h1 class="text-lg font-bold">{m.nav_logo_text()}</h1>
</div>
<button
onclick={closeMobileMenu}
class="text-surface-700 dark:text-surface-300 hover:text-primary-600 dark:hover:text-primary-400 rounded-lg p-2 transition-colors"
class="text-surface-700 dark:text-surface-300 hover:text-primary-600 dark:hover:text-primary-400 transition-colors"
aria-label={m.nav_mobile_closeMenu_aria()}
>
<X class="h-6 w-6" />
<X class="h-8 w-8" />
</button>
</div>

<!-- Mobile Navigation -->
<nav class="flex-1">
<nav class="flex-1 w-[80vw]">
<ul class="space-y-2">
{#each navLinks as link (link.href)}
<li>
Expand All @@ -144,11 +155,12 @@
</li>
{/each}
</ul>
<LightSwitch />
</nav>

<!-- Mobile CTA -->
<div
class="border-surface-200 dark:border-surface-700 border-t pt-6"
class="w-[80vw] mt-6 flex items-center justify-center"
>
<a
href="https://discord.gg/myBMaaDeQu"
Expand Down
123 changes: 76 additions & 47 deletions src/routes/+layout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,15 +31,15 @@
</main>

<footer
class="border-surface-200 dark:border-surface-700 bg-surface-100/50 dark:bg-surface-900/50 border-t py-8"
class="bg-surface-100/80 dark:bg-surface-800/80 backdrop-blur-xs rounded-4xl mx-4 py-6 lg:mx-25 mb-5"
>
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div
class="flex flex-col items-center justify-between gap-6 sm:flex-row"
>
<!-- Logo & Tagline -->
<div
class="text-primary-600 dark:text-primary-400 flex items-center gap-2 text-sm font-medium"
class="text-black dark:text-white flex items-center gap-2 text-sm font-medium"
>
<img
src="/favicon.svg"
Expand All @@ -48,55 +48,84 @@
/>
<span>{m.footer_tagline()}</span>
</div>
<LanguageSwitcher />
</div>

<!-- Links & Controls -->
<div
class="flex flex-wrap items-center justify-center gap-x-6 gap-y-4 text-sm"
>
<a
href="/legal/imprint"
class="text-surface-600 dark:text-surface-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors"
>
{m.footer_link_imprint()}
</a>
<a
href="/legal/privacy-policy"
class="text-surface-600 dark:text-surface-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors"
>
{m.footer_link_privacyPolicy()}
</a>
<a
href="https://github.com/axonotes/AxonotesCore"
target="_blank"
rel="noopener noreferrer"
class="text-surface-600 dark:text-surface-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors"
>
{m.footer_link_github()}
</a>
<a
href="https://discord.gg/myBMaaDeQu"
target="_blank"
rel="noopener noreferrer"
class="text-surface-600 dark:text-surface-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors"
>
{m.footer_link_discord()}
</a>
<!-- Dezenter, aber funktionaler Language Switcher -->
<LanguageSwitcher />
<div class="flex flex-col sm:flex-row justify-between gap-6 mt-8 text-black dark:text-white">
<div class="flex flex-col">
<h1 class="font-bold">{m.nav_link_features()}</h1>
<div>
<h2>1</h2>
<h2>2</h2>
</div>
</div>
<div>
<h1 class="font-bold">{m.nav_link_about()}</h1>
<div>
<h2>1</h2>
<h2>2</h2>
</div>
</div>
<div>
<h1 class="font-bold">{m.nav_link_community()}</h1>
<div>
<h2>1</h2>
<h2>2</h2>
</div>
</div>
<div>
<h1 class="font-bold">{m.nav_link_pricing()}</h1>
<div>
<h2>1</h2>
<h2>2</h2>
</div>
</div>
</div>

<!-- Copyright -->
<div
class="border-surface-200 dark:border-surface-700 mt-6 border-t pt-4 text-center"
>
<span
class="text-surface-500 dark:text-surface-500 text-xs"
>
{m.footer_copyright({
year: new Date().getFullYear(),
})}
</span>
<div>
<div class="border-b-2 border-black dark:border-white pb-5 pt-5 mb-7">
<div class="text-black dark:text-white flex items-center gap-2 text-lg font-bold">
<img
src="/favicon.svg"
alt={m.nav_logo_alt()}
class="h-20 w-20"
/>
<h1 class="text-4xl font-bold">{m.nav_logo_text()}</h1>
</div>
</div>
<div class="flex flex-col sm:flex-row items-center justify-between gap-5">
<div class="text-black dark:text-white flex flex-wrap items-center gap-x-6 gap-y-4 text-xs">
<a
href="/legal/imprint"
class="hover:underline transition-colors"
>
{m.footer_link_imprint()}
</a>
<a
href="/legal/privacy-policy"
class="hover:underline transition-colors"
>
{m.footer_link_privacyPolicy()}
</a>
</div>
<div class="flex items-center gap-5">
<a href="https://discord.com/invite/your-invite-code" target="_blank" rel="noopener noreferrer">
<img src="/discord-dark.svg" alt={m.footer_logo_alt()} class="h-5 w-5 hidden dark:block" />
<img src="/discord.svg" alt={m.footer_logo_alt()} class="h-5 w-5 dark:hidden" />
</a>
<a href="https://github.com/your-repo" target="_blank" rel="noopener noreferrer">
<img src="/github-dark.svg" alt={m.footer_logo_alt()} class="h-5 w-5 hidden dark:block" />
<img src="/github.svg" alt={m.footer_logo_alt()} class="h-5 w-5 dark:hidden" />
</a>
</div>
</div>
<div class="mt-2 text-black dark:text-white">
<span class="text-xs">
{m.footer_copyright({
year: new Date().getFullYear(),
})}
</span>
</div>
</div>
</div>
</footer>
Expand Down
10 changes: 5 additions & 5 deletions src/routes/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,11 +63,11 @@

<div class="container mx-auto px-4 py-6 sm:py-8 lg:py-12">
<!-- Hero Section -->
<section class="mb-16 sm:mb-32 md:mb-48">
<div class="mx-auto max-w-4xl text-center">
<section class="mb-16 sm:mb-16 md:mb-20 mt-16 sm:mt-16 lg:mt-20">
<div class="mx-auto max-w-5xl text-center">
<!-- Main Headline -->
<h1
class="text-primary-600 dark:text-primary-400 mb-4 text-2xl leading-tight font-bold sm:mb-6 sm:text-3xl md:text-4xl lg:text-5xl"
class="text-primary-600 dark:text-primary-400 mb-4 text-5xl leading-tight font-bold sm:mb-6 sm:text-5xl md:text-6xl lg:text-7xl"
>
{@html m.home_hero_title()}
</h1>
Expand Down Expand Up @@ -164,7 +164,7 @@
<div class="grid gap-6 sm:gap-8 lg:grid-cols-2">
<!-- Before: The Problem -->
<div
class="card border-warning-200 dark:border-warning-800 bg-warning-50 dark:bg-warning-950/20 border p-4 sm:p-6"
class="card border-warning-200 dark:border-warning-800 bg-warning-50 dark:bg-warning-950/20 border p-4 sm:p-6 motion-safe:hover:-m-2 motion-safe:hover:p-8 transition-ease duration-300"
>
<div class="mb-3 flex items-center gap-2 sm:mb-4 sm:gap-3">
<h3
Expand All @@ -189,7 +189,7 @@

<!-- After: The Solution -->
<div
class="card border-success-200 dark:border-success-800 bg-success-50 dark:bg-success-950/20 border p-4 sm:p-6"
class="card border-success-200 dark:border-success-800 bg-success-50 dark:bg-success-950/20 border p-4 sm:p-6 motion-safe:hover:-m-2 motion-safe:hover:p-8 transition-ease duration-300"
>
<div class="mb-3 flex items-center gap-2 sm:mb-4 sm:gap-3">
<h3
Expand Down
7 changes: 7 additions & 0 deletions static/discord-dark.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Loading