Commit 16e501b4 authored by Christophe Benz's avatar Christophe Benz
Browse files

Internalize AppBar, Tags and TabButton from Smelte

parent f870cf31
<script>
export let color = "bg-primary-300"
let className = ""
export { className as class }
export let classes =
"items-center flex-wrap flex z-30 p-0 h-16 elevation-3 fixed left-0 right-0 top-0"
</script>
<header class="{className} {color} {classes}">
<slot />
</header>
<script>
import { Icon } from "smelte"
import createRipple from "smelte/src/components/Ripple/ripple.js"
import utils from "smelte/src/utils/classes.js"
export let icon = ""
export let id = ""
export let text = ""
export let to = ""
export let selected = ""
export let color = "primary"
export let notSelectedColor = "white"
let className = ""
export { className as class }
const ripple = createRipple(color)
const defaultClasses =
"relative overflow-hidden text-center p-4 cursor-pointer flex mx-auto items-center opacity-75 text-sm h-full"
const { border, txt } = utils(color)
$: textColor = selected === id ? txt() : "text-" + notSelectedColor
$: borderClasses = selected === id ? `border-b-2 ${border()}` : ""
</script>
<a
use:ripple
href={to}
class="{className}
{defaultClasses}
{textColor}
{borderClasses}"
on:click
class:uppercase={icon}>
<div class="flex flex-col items-center content-center mx-auto">
{#if icon}
<Icon class="mb-1" color={textColor}>{icon}</Icon>
{/if}
<div>
<slot>{text}</slot>
</div>
</div>
</a>
<script>
import TabButton from "./TabButton.svelte"
export let selected = null
export let navigation = false
export let items = []
export let indicator = true
export let color = "white"
export let notSelectedColor = "white"
let className = ""
export { className as class }
</script>
<div
class="{className} py-0 h-full {navigation ? 'hidden md:flex' : 'flex'}
items-center relative mx-auto z-20">
{#each items as item, i}
<slot name="item" {color} {item}>
<TabButton bind:selected {...item} {color} {notSelectedColor}>
{item.text}
</TabButton>
</slot>
{/each}
</div>
<slot {selected} name="content" />
<script>
import { stores } from "@sapper/app"
import {
AppBar,
Button,
List,
ListItem,
NavigationDrawer,
Tabs,
Spacer,
ProgressLinear
} from "smelte"
import { breakpoint } from "../stores.js"
import Footer from "../../content/Footer.svelte"
import AppBar from "../components/AppBar.svelte"
import StickyFooterLayout from "../components/StickyFooterLayout.svelte"
import Tabs from "../components/Tabs.svelte"
const { preloading, page, session } = stores()
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment