-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
10 changed files
with
163 additions
and
152 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,108 +1,97 @@ | ||
| <script lang="ts"> | ||
| import { page } from "$app/stores"; | ||
| import Scrim from "./Scrim.svelte"; | ||
| import TabListItemHorizontal from "./TabListItemHorizontal.svelte"; | ||
| import TabListItemVertical from "./TabListItemVertical.svelte"; | ||
| import TopBar from "./TopBar.svelte"; | ||
| import { page } from "$app/stores"; | ||
| import type { DrawerItem } from "./IDrawerItem"; | ||
| import Scrim from "./Scrim.svelte"; | ||
| import TabListItemHorizontal from "./TabListItemHorizontal.svelte"; | ||
| import TabListItemVertical from "./TabListItemVertical.svelte"; | ||
| import TopBar from "./TopBar.svelte"; | ||
| function openMenu() { | ||
| document | ||
| .getElementById("drawer") | ||
| ?.classList.replace("-translate-x-full", "translate-x-0"); | ||
| document | ||
| .getElementById("scrim") | ||
| ?.classList.replace("hidden", "visible"); | ||
| } | ||
| const drawerItems: Array<DrawerItem> = [ | ||
| { | ||
| href: "/unitto", | ||
| titls: "Overview", | ||
| icon: "home", | ||
| }, | ||
| { | ||
| href: "/unitto/privacy", | ||
| titls: "Privacy", | ||
| icon: "policy", | ||
| }, | ||
| { | ||
| href: "/unitto/terms", | ||
| titls: "Terms and Conditions", | ||
| icon: "privacy_tip", | ||
| }, | ||
| { | ||
| href: "/unitto/help", | ||
| titls: "Help", | ||
| icon: "help", | ||
| }, | ||
| ]; | ||
| function closeMenu() { | ||
| document | ||
| .getElementById("drawer") | ||
| ?.classList.replace("translate-x-0", "-translate-x-full"); | ||
| document | ||
| .getElementById("scrim") | ||
| ?.classList.replace("visible", "hidden"); | ||
| } | ||
| function openMenu() { | ||
| document | ||
| .getElementById("drawer") | ||
| ?.classList.replace("-translate-x-full", "translate-x-0"); | ||
| document.getElementById("scrim")?.classList.replace("hidden", "visible"); | ||
| } | ||
| function closeMenu() { | ||
| document | ||
| .getElementById("drawer") | ||
| ?.classList.replace("translate-x-0", "-translate-x-full"); | ||
| document.getElementById("scrim")?.classList.replace("visible", "hidden"); | ||
| } | ||
| console.log($page.route.id) | ||
| </script> | ||
|
|
||
| <div class="relative bg-unitto-dark-background text-unitto-dark-onBackground"> | ||
| <!-- Top bar --> | ||
| <TopBar on:menuClick={openMenu} /> | ||
| <!-- Top bar --> | ||
| <TopBar on:menuClick={openMenu} /> | ||
|
|
||
| <!-- Scrim --> | ||
| <Scrim on:menuClick={closeMenu} /> | ||
|
|
||
| <!-- Scrim --> | ||
| <Scrim on:menuClick={closeMenu} /> | ||
| <!-- Nav bar --> | ||
| <div | ||
| class="lg:hidden z-20 fixed top-0 h-full transition-transform -translate-x-full px-2 w-80 rounded-e-3xl bg-unitto-dark-surface text-unitto-dark-onSurface" | ||
| id="drawer" | ||
| > | ||
| <button on:click={closeMenu}> | ||
| <span | ||
| class="material-symbols-outlined hover:bg-unitto-dark-surfaceContainer-inactive-hover rounded-full p-3 m-2" | ||
| > | ||
| menu_open | ||
| </span> | ||
| </button> | ||
| {#each drawerItems as item} | ||
| <TabListItemHorizontal | ||
| title={item.titls} | ||
| icon={item.icon} | ||
| isSelected={$page.route.id === item.href} | ||
| href={item.href} | ||
| on:onNavigate={closeMenu} | ||
| /> | ||
| {/each} | ||
| </div> | ||
|
|
||
| <!-- Nav bar --> | ||
| <div class="flex flex-row relative"> | ||
| <div | ||
| class="lg:hidden z-20 fixed top-0 h-full transition-transform -translate-x-full px-2 w-80 rounded-e-3xl bg-unitto-dark-surface text-unitto-dark-onSurface" | ||
| id="drawer" | ||
| class="hidden lg:block sticky top-0 h-screen bg-unitto-dark-surface text-unitto-dark-onSurface" | ||
| > | ||
| <button on:click={closeMenu}> | ||
| <span | ||
| class="material-symbols-outlined hover:bg-unitto-dark-surfaceContainer-inactive-hover rounded-full p-3 m-2" | ||
| > | ||
| menu_open | ||
| </span> | ||
| </button> | ||
| <TabListItemHorizontal | ||
| title="Overview" | ||
| icon="home" | ||
| isSelected={$page.url.pathname === "/unitto"} | ||
| href="/unitto" | ||
| on:onNavigate={closeMenu} | ||
| /> | ||
| <TabListItemHorizontal | ||
| title="Privacy" | ||
| icon="policy" | ||
| isSelected={$page.url.pathname === "/unitto/privacy"} | ||
| href="/unitto/privacy" | ||
| on:onNavigate={closeMenu} | ||
| /> | ||
| <TabListItemHorizontal | ||
| title="Terms and Conditions" | ||
| icon="privacy_tip" | ||
| isSelected={$page.url.pathname === "/unitto/terms"} | ||
| href="/unitto/terms" | ||
| on:onNavigate={closeMenu} | ||
| /> | ||
| <TabListItemHorizontal | ||
| title="FAQ" | ||
| icon="help" | ||
| isSelected={$page.url.pathname === "/unitto/faq"} | ||
| href="/unitto/faq" | ||
| on:onNavigate={closeMenu} | ||
| /> | ||
| </div> | ||
|
|
||
| <div class="flex flex-row relative"> | ||
| <div class="hidden lg:block sticky top-0 h-screen bg-unitto-dark-surface text-unitto-dark-onSurface"> | ||
| <!-- Navigation rail --> | ||
| <div class="flex flex-col gap-4 pt-6"> | ||
| <TabListItemVertical | ||
| title="Overview" | ||
| icon="home" | ||
| isSelected={$page.url.pathname === "/unitto"} | ||
| href="/unitto" | ||
| /> | ||
| <TabListItemVertical | ||
| title="Privacy" | ||
| icon="policy" | ||
| isSelected={$page.url.pathname === "/unitto/privacy"} | ||
| href="/unitto/privacy" | ||
| /> | ||
| <TabListItemVertical | ||
| title="Terms and Conditions" | ||
| icon="privacy_tip" | ||
| isSelected={$page.url.pathname === "/unitto/terms"} | ||
| href="/unitto/terms" | ||
| /> | ||
| <TabListItemVertical | ||
| title="FAQ" | ||
| icon="help" | ||
| isSelected={$page.url.pathname === "/unitto/faq"} | ||
| href="/unitto/faq" | ||
| /> | ||
| </div> | ||
| </div> | ||
| <slot /> | ||
| <!-- Navigation rail --> | ||
| <div class="flex flex-col gap-4 pt-6"> | ||
| {#each drawerItems as item} | ||
| <TabListItemVertical | ||
| title={item.titls} | ||
| icon={item.icon} | ||
| isSelected={$page.route.id === item.href} | ||
| href={item.href} | ||
| /> | ||
| {/each} | ||
| </div> | ||
| </div> | ||
| <slot /> | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| export interface DrawerItem { | ||
| href: string, | ||
| titls: string, | ||
| icon: string, | ||
| } |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,34 +1,36 @@ | ||
| <script lang="ts"> | ||
| export let title: string; | ||
| export let icon: string; | ||
| export let isSelected: Boolean = false; | ||
| export let href: string; | ||
| import { createEventDispatcher } from "svelte"; | ||
| export let title: string; | ||
| export let icon: string; | ||
| export let isSelected: Boolean = false; | ||
| export let href: string; | ||
| $: background = isSelected | ||
| ? "bg-unitto-dark-secondaryContainer hover:bg-unitto-dark-surfaceContainer-active-hover" | ||
| : "hover:bg-unitto-dark-surfaceContainer-inactive-hover" | ||
| const dispatch = createEventDispatcher(); | ||
| $: icon_state_class = isSelected | ||
| ? "text-unitto-on-secondary-container" | ||
| : "text-unitto-on-surface-variant"; | ||
| $: background = isSelected | ||
| ? "bg-unitto-dark-secondaryContainer hover:bg-unitto-dark-surfaceContainer-active-hover" | ||
| : "hover:bg-unitto-dark-surfaceContainer-inactive-hover"; | ||
| $: text_state_class = isSelected | ||
| ? "text-unitto-on-secondary-container" | ||
| : "text-unitto-on-surface-variant"; | ||
| $: icon_state_class = isSelected | ||
| ? "text-unitto-on-secondary-container" | ||
| : "text-unitto-on-surface-variant"; | ||
| import { createEventDispatcher } from "svelte"; | ||
| const dispatch = createEventDispatcher(); | ||
| $: text_state_class = isSelected | ||
| ? "text-unitto-on-secondary-container" | ||
| : "text-unitto-on-surface-variant"; | ||
| function click() { | ||
| dispatch("onNavigate"); | ||
| } | ||
| function click() { | ||
| dispatch("onNavigate"); | ||
| } | ||
| </script> | ||
|
|
||
| <a {href} on:click={click}> | ||
| <div | ||
| class="px-4 py-2 flex flex-row w-full gap-4 rounded-full place-items-center {background}" | ||
| <div | ||
| class="px-4 py-2 flex flex-row w-full gap-4 rounded-full place-items-center {background}" | ||
| > | ||
| <span class="material-symbols-outlined text-3xl {icon_state_class}" | ||
| >{icon}</span | ||
| > | ||
| <span class="material-symbols-outlined text-3xl {icon_state_class}">{icon}</span> | ||
| <p class="text-lg {text_state_class}">{title}</p> | ||
| </div> | ||
| <p class="text-lg {text_state_class}">{title}</p> | ||
| </div> | ||
| </a> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,37 +1,38 @@ | ||
| <script lang="ts"> | ||
| export let title: string; | ||
| export let icon: string; | ||
| export let isSelected: Boolean = false; | ||
| export let href: string; | ||
| import { createEventDispatcher } from "svelte"; | ||
| export let title: string; | ||
| export let icon: string; | ||
| export let isSelected: Boolean = false; | ||
| export let href: string; | ||
| $: background = isSelected | ||
| const dispatch = createEventDispatcher(); | ||
| $: background = isSelected | ||
| ? "bg-unitto-dark-secondaryContainer hover:bg-unitto-dark-surfaceContainer-active-hover" | ||
| : "hover:bg-unitto-dark-surfaceContainer-inactive-hover" | ||
| : "hover:bg-unitto-dark-surfaceContainer-inactive-hover"; | ||
| $: icon_state_class = isSelected | ||
| ? "text-unitto-on-secondary-container bg-unitto-secondaryContainer group-hover/item:bg-unitto-surfaceContainer-active-hover" | ||
| : "text-unitto-on-surface-variant group-hover/item:bg-unitto-surfaceContainer-inactive-hover"; | ||
| $: icon_state_class = isSelected | ||
| ? "text-unitto-on-secondary-container bg-unitto-secondaryContainer group-hover/item:bg-unitto-surfaceContainer-active-hover" | ||
| : "text-unitto-on-surface-variant group-hover/item:bg-unitto-surfaceContainer-inactive-hover"; | ||
| $: text_state_class = isSelected | ||
| $: text_state_class = isSelected | ||
| ? "text-unitto-on-secondary-container" | ||
| : "text-unitto-on-surface-variant"; | ||
| import { createEventDispatcher } from "svelte"; | ||
| const dispatch = createEventDispatcher(); | ||
| function click() { | ||
| dispatch("onNavigate", href); | ||
| } | ||
| function click() { | ||
| dispatch("onNavigate", href); | ||
| } | ||
| </script> | ||
|
|
||
| <a href={href} | ||
| class="group/item flex flex-col place-items-center text-center w-24 gap-2" | ||
| on:click={click} | ||
| <a | ||
| {href} | ||
| class="group/item flex flex-col place-items-center text-center w-24 gap-2" | ||
| on:click={click} | ||
| > | ||
| <span | ||
| class="material-symbols-outlined px-4 rounded-full group-hover/item:font-semibold transition-all text-2xl {icon_state_class} {background}" | ||
| >{icon}</span | ||
| > | ||
| <span | ||
| class="material-symbols-outlined px-4 rounded-full group-hover/item:font-semibold transition-all text-2xl {icon_state_class} {background}" | ||
| >{icon}</span | ||
| > | ||
|
|
||
| <p class="text-xs font-semibold {text_state_class}">{title}</p> | ||
| <p class="text-xs font-semibold {text_state_class}">{title}</p> | ||
| </a> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,21 @@ | ||
| <script lang="ts"> | ||
| export let id: string = ""; | ||
| import { page } from "$app/stores"; | ||
| export let id: string = ""; | ||
| function copyAnchor() { | ||
| navigator.clipboard.writeText($page.url + "#" + id); | ||
| } | ||
| </script> | ||
|
|
||
| <p class="text-3xl md:text-4xl py-2 w-fit font-medium" id={id}> | ||
| <slot></slot> | ||
| </p> | ||
| <div class="group flex flex-row items-center"> | ||
| <p class="text-3xl md:text-4xl py-2 w-fit font-medium" {id}> | ||
| <slot /> | ||
| </p> | ||
| <button on:click={copyAnchor} class:hidden={id === ""}> | ||
| <span | ||
| class="transition-transform group-hover:opacity-100 opacity-0 material-symbols-outlined rounded-full p-3 m-2 hover:bg-unitto-dark-surfaceContainer-inactive-hover" | ||
| class:rotate-180={copyAnchor}>link</span | ||
| > | ||
| </button> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters