Skip to content

Commit dd31035

Browse files
sadelliesadellie
committed
Add indexxo
1 parent ab43a98 commit dd31035

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

61 files changed

+6086
-761
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,4 @@ node_modules
1010
.output
1111
vite.config.js.timestamp-*
1212
vite.config.ts.timestamp-*
13+
.idea

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
# Sad Ellie's cool website
22

3-
```
3+
```bash
44
npm run dev
55
```

‎src/components/AdaptiveLayout.svelte‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<script lang="ts">
2+
import { page } from "$app/stores";
3+
import type { DrawerItem } from "./IDrawerItem";
4+
import type M3Theme from "./M3Theme";
5+
import Scrim from "./Scrim.svelte";
6+
import NavigationDrawerItem from "./NavigationDrawerItem.svelte";
7+
import NavigationRailItem from "./NavigationRailItem.svelte";
8+
import TopAppBarSmall from "./TopAppBarSmall.svelte";
9+
import NavigationRail from "./NavigationRail.svelte";
10+
import NavigationDrawer from "./NavigationDrawer.svelte";
11+
12+
export let theme: M3Theme;
13+
export let drawerItems: Array<DrawerItem>;
14+
export let title: string;
15+
export let logo: string
16+
export let homeHref: string;
17+
18+
const drawerId = "drawer";
19+
const scrimId = "scrim";
20+
21+
function openMenu() {
22+
document
23+
.getElementById(drawerId)
24+
?.classList.replace("-translate-x-full", "translate-x-0");
25+
document.getElementById(scrimId)?.classList.replace("hidden", "visible");
26+
}
27+
28+
function closeMenu() {
29+
document
30+
.getElementById(drawerId)
31+
?.classList.replace("translate-x-0", "-translate-x-full");
32+
document.getElementById(scrimId)?.classList.replace("visible", "hidden");
33+
}
34+
35+
console.log($page.route.id);
36+
</script>
37+
38+
<div class="relative {theme.background} {theme.onBackgroundText} min-h-screen">
39+
<!-- Top bar -->
40+
<TopAppBarSmall
41+
on:menuClick={openMenu}
42+
{theme}
43+
title={title}
44+
logo={logo}
45+
logoHref={homeHref}
46+
/>
47+
48+
<!-- Scrim -->
49+
<Scrim on:menuClick={closeMenu} id={scrimId} />
50+
51+
<NavigationDrawer {theme} on:menuClick={closeMenu} id={drawerId}>
52+
{#each drawerItems as item}
53+
<NavigationDrawerItem
54+
title={item.titls}
55+
icon={item.icon}
56+
isSelected={$page.route.id === item.href}
57+
href={item.href}
58+
{theme}
59+
on:onTabClick={closeMenu}
60+
/>
61+
{/each}
62+
</NavigationDrawer>
63+
64+
<div class="flex flex-row relative">
65+
<NavigationRail {theme}>
66+
{#each drawerItems as item}
67+
<NavigationRailItem
68+
title={item.titls}
69+
icon={item.icon}
70+
isSelected={$page.route.id === item.href}
71+
href={item.href}
72+
{theme}
73+
/>
74+
{/each}
75+
</NavigationRail>
76+
<slot />
77+
</div>
78+
</div>

‎src/routes/unitto/IDrawerItem.ts‎ renamed to ‎src/components/IDrawerItem.ts‎

File renamed without changes.

‎src/components/M3Theme.ts‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
export default interface M3Theme {
2+
primary: string;
3+
primaryHover: string;
4+
primaryGroupHover: string;
5+
surfaceTint: string;
6+
surfaceTintHover: string;
7+
surfaceTintGroupHover: string;
8+
onPrimary: string;
9+
onPrimaryHover: string;
10+
onPrimaryGroupHover: string;
11+
onPrimaryText: string;
12+
primaryContainer: string;
13+
primaryContainerHover: string;
14+
primaryContainerGroupHover: string;
15+
onPrimaryContainer: string;
16+
onPrimaryContainerHover: string;
17+
onPrimaryContainerGroupHover: string;
18+
onPrimaryContainerText: string;
19+
secondary: string;
20+
secondaryHover: string;
21+
secondaryGroupHover: string;
22+
onSecondary: string;
23+
onSecondaryHover: string;
24+
onSecondaryGroupHover: string;
25+
onSecondaryText: string;
26+
secondaryContainer: string;
27+
secondaryContainerHover: string;
28+
secondaryContainerGroupHover: string;
29+
onSecondaryContainer: string;
30+
onSecondaryContainerHover: string;
31+
onSecondaryContainerGroupHover: string;
32+
onSecondaryContainerText: string;
33+
tertiary: string;
34+
tertiaryHover: string;
35+
tertiaryGroupHover: string;
36+
onTertiary: string;
37+
onTertiaryHover: string;
38+
onTertiaryGroupHover: string;
39+
onTertiaryText: string;
40+
tertiaryContainer: string;
41+
tertiaryContainerHover: string;
42+
tertiaryContainerGroupHover: string;
43+
onTertiaryContainer: string;
44+
onTertiaryContainerHover: string;
45+
onTertiaryContainerGroupHover: string;
46+
onTertiaryContainerText: string;
47+
error: string;
48+
errorHover: string;
49+
errorGroupHover: string;
50+
onError: string;
51+
onErrorHover: string;
52+
onErrorGroupHover: string;
53+
onErrorText: string;
54+
errorContainer: string;
55+
errorContainerHover: string;
56+
errorContainerGroupHover: string;
57+
onErrorContainer: string;
58+
onErrorContainerHover: string;
59+
onErrorContainerGroupHover: string;
60+
onErrorContainerText: string;
61+
background: string;
62+
backgroundHover: string;
63+
backgroundGroupHover: string;
64+
onBackground: string;
65+
onBackgroundHover: string;
66+
onBackgroundGroupHover: string;
67+
onBackgroundText: string;
68+
surface: string;
69+
surfaceHover: string;
70+
surfaceGroupHover: string;
71+
onSurface: string;
72+
onSurfaceHover: string;
73+
onSurfaceGroupHover: string;
74+
onSurfaceText: string;
75+
surfaceVariant: string;
76+
surfaceVariantHover: string;
77+
surfaceVariantGroupHover: string;
78+
onSurfaceVariant: string;
79+
onSurfaceVariantHover: string;
80+
onSurfaceVariantGroupHover: string;
81+
onSurfaceVariantText: string;
82+
outline: string;
83+
outlineHover: string;
84+
outlineGroupHover: string;
85+
outlineBorder: string;
86+
outlineVariant: string;
87+
outlineVariantHover: string;
88+
outlineVariantGroupHover: string;
89+
outlineVariantBorder: string;
90+
shadow: string;
91+
shadowHover: string;
92+
shadowGroupHover: string;
93+
scrim: string;
94+
scrimHover: string;
95+
scrimGroupHover: string;
96+
inverseSurface: string;
97+
inverseSurfaceHover: string;
98+
inverseSurfaceGroupHover: string;
99+
inverseOnSurface: string;
100+
inverseOnSurfaceHover: string;
101+
inverseOnSurfaceGroupHover: string;
102+
inverseOnSurfaceText: string;
103+
inversePrimary: string;
104+
inversePrimaryHover: string;
105+
inversePrimaryGroupHover: string;
106+
primaryFixed: string;
107+
primaryFixedHover: string;
108+
primaryFixedGroupHover: string;
109+
onPrimaryFixed: string;
110+
onPrimaryFixedHover: string;
111+
onPrimaryFixedGroupHover: string;
112+
onPrimaryFixedText: string;
113+
primaryFixedDim: string;
114+
primaryFixedDimHover: string;
115+
primaryFixedDimGroupHover: string;
116+
onPrimaryFixedVariant: string;
117+
onPrimaryFixedVariantHover: string;
118+
onPrimaryFixedVariantGroupHover: string;
119+
onPrimaryFixedVariantText: string;
120+
secondaryFixed: string;
121+
secondaryFixedHover: string;
122+
secondaryFixedGroupHover: string;
123+
onSecondaryFixed: string;
124+
onSecondaryFixedHover: string;
125+
onSecondaryFixedGroupHover: string;
126+
onSecondaryFixedText: string;
127+
secondaryFixedDim: string;
128+
secondaryFixedDimHover: string;
129+
secondaryFixedDimGroupHover: string;
130+
onSecondaryFixedVariant: string;
131+
onSecondaryFixedVariantHover: string;
132+
onSecondaryFixedVariantGroupHover: string;
133+
onSecondaryFixedVariantText: string;
134+
tertiaryFixed: string;
135+
tertiaryFixedHover: string;
136+
tertiaryFixedGroupHover: string;
137+
onTertiaryFixed: string;
138+
onTertiaryFixedHover: string;
139+
onTertiaryFixedGroupHover: string;
140+
onTertiaryFixedText: string;
141+
tertiaryFixedDim: string;
142+
tertiaryFixedDimHover: string;
143+
tertiaryFixedDimGroupHover: string;
144+
onTertiaryFixedVariant: string;
145+
onTertiaryFixedVariantHover: string;
146+
onTertiaryFixedVariantGroupHover: string;
147+
onTertiaryFixedVariantText: string;
148+
surfaceDim: string;
149+
surfaceDimHover: string;
150+
surfaceDimGroupHover: string;
151+
surfaceBright: string;
152+
surfaceBrightHover: string;
153+
surfaceBrightGroupHover: string;
154+
surfaceContainerLowest: string;
155+
surfaceContainerLowestHover: string;
156+
surfaceContainerLowestGroupHover: string;
157+
surfaceContainerLow: string;
158+
surfaceContainerLowHover: string;
159+
surfaceContainerLowGroupHover: string;
160+
surfaceContainer: string;
161+
surfaceContainerHover: string;
162+
surfaceContainerGroupHover: string;
163+
surfaceContainerHigh: string;
164+
surfaceContainerHighHover: string;
165+
surfaceContainerHighGroupHover: string;
166+
surfaceContainerHighest: string;
167+
surfaceContainerHighestHover: string;
168+
surfaceContainerHighestGroupHover: string;
169+
}

‎src/components/NavigationDrawer.svelte‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<script lang="ts">
2+
import { createEventDispatcher } from "svelte";
3+
import type M3Theme from "./M3Theme";
4+
export let theme: M3Theme;
5+
export let id: string;
6+
7+
const dispatch = createEventDispatcher();
8+
function click() {
9+
dispatch("menuClick");
10+
}
11+
</script>
12+
13+
<div
14+
class="lg:hidden z-20 fixed top-0 h-full transition-transform -translate-x-full px-2 w-80 rounded-e-3xl {theme.surface} {theme.onSurfaceText}"
15+
id={id}
16+
>
17+
<button on:click={click}>
18+
<span
19+
class="material-symbols-outlined {theme.onSurfaceHover} rounded-full p-3 m-2"
20+
>
21+
menu_open
22+
</span>
23+
</button>
24+
<slot />
25+
</div>

‎src/components/NavigationDrawerItem.svelte‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<script lang="ts">
2+
import { createEventDispatcher } from "svelte";
3+
import type M3Theme from "./M3Theme";
4+
export let title: string;
5+
export let icon: string;
6+
export let isSelected: Boolean = false;
7+
export let href: string;
8+
export let theme: M3Theme;
9+
10+
const dispatch = createEventDispatcher();
11+
12+
$: background = isSelected ? theme.secondaryContainer : "";
13+
14+
$: hover = isSelected
15+
? theme.onSecondaryHover
16+
: theme.onSurfaceHover;
17+
18+
$: textColor = isSelected
19+
? theme.onSecondaryContainerText
20+
: theme.onSurfaceVariantText;
21+
22+
$: iconColor = textColor;
23+
24+
function click() {
25+
dispatch("onTabClick");
26+
}
27+
</script>
28+
29+
<a {href} on:click={click}>
30+
<div class="rounded-full overflow-hidden {background}">
31+
<div class="flex flex-row gap-3 h-14 items-center p-4 {hover}">
32+
<span class="material-symbols-outlined w-6 h-6 {iconColor}">{icon}</span>
33+
<p class="{textColor}">{title}</p>
34+
</div>
35+
</div>
36+
37+
</a>

‎src/components/NavigationRail.svelte‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<script lang="ts">
2+
import type M3Theme from "./M3Theme";
3+
export let theme: M3Theme
4+
</script>
5+
6+
<div
7+
class="hidden lg:block sticky top-0 h-screen w-20 {theme.surfaceContainerLow} {theme.onSurfaceText}"
8+
>
9+
<!-- Navigation rail -->
10+
<div class="flex flex-col gap-4 pt-6">
11+
<slot />
12+
</div>
13+
</div>

‎src/components/NavigationRailItem.svelte‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<script lang="ts">
2+
import { createEventDispatcher } from "svelte";
3+
import type M3Theme from "./M3Theme";
4+
export let title: string;
5+
export let icon: string;
6+
export let isSelected: Boolean = false;
7+
export let href: string;
8+
export let theme: M3Theme;
9+
10+
const dispatch = createEventDispatcher();
11+
12+
$: iconBackground = isSelected ? theme.secondaryContainer : "";
13+
14+
$: iconBackgroundOnHover = isSelected
15+
? theme.onSecondaryGroupHover
16+
: theme.onSurfaceGroupHover;
17+
18+
function click() {
19+
dispatch("onNavigate", href);
20+
}
21+
</script>
22+
23+
<a {href} class="group flex flex-col gap-1 items-center" on:click={click}>
24+
<div class="rounded-full overflow-hidden {iconBackground}">
25+
<div
26+
class="flex items-center justify-center w-14 h-8 {iconBackgroundOnHover}"
27+
>
28+
<span class="material-symbols-outlined w-6 h-6">{icon}</span>
29+
</div>
30+
</div>
31+
32+
<p class="text-xs text-center">
33+
{title}
34+
</p>
35+
</a>

‎src/components/Scrim.svelte‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<script lang="ts">
2+
import { createEventDispatcher } from "svelte";
3+
export let id: string;
4+
const dispatch = createEventDispatcher();
5+
6+
function click() {
7+
dispatch("menuClick");
8+
}
9+
</script>
10+
11+
<!-- svelte-ignore a11y-no-static-element-interactions -->
12+
<!-- svelte-ignore a11y-click-events-have-key-events -->
13+
<div
14+
class="hidden z-20 lg:hidden fixed top-0 w-full h-full bg-black opacity-25"
15+
id={id}
16+
on:click={click}
17+
/>

0 commit comments

Comments
 (0)