Browse Source

feat(topbar): add basic topbar

tags/v1.5.0
Dany Sluijk 2 months ago
parent
commit
f285c5f6f2
Signed by: dsluijk GPG Key ID: EEEBA79CCB6729B0
9 changed files with 138 additions and 88 deletions
  1. +62
    -63
      example/src/Main.tsx
  2. +14
    -0
      src/base/index.tsx
  3. +14
    -1
      src/base/style.scss
  4. +2
    -1
      src/index.ts
  5. +1
    -3
      src/layout/container/index.tsx
  6. +0
    -13
      src/layout/container/style.scss
  7. +31
    -0
      src/topbar/index.tsx
  8. +14
    -0
      src/topbar/style.scss
  9. +0
    -7
      src/typography/index.tsx

+ 62
- 63
example/src/Main.tsx View File

@@ -1,86 +1,85 @@
import { h, FunctionalComponent } from "preact";
import { useState } from "preact/hooks";
import { Router } from "preact-router";
import { sidebar, Base, TopBar } from "teenyui";
import {
faBalanceScale,
faBolt,
faEye,
faMouse,
faHome,
faBars,
} from "@fortawesome/free-solid-svg-icons";
import { layout, sidebar, Typography } from "teenyui";

import { Home } from "~pages/Home";
import { Overview } from "~pages/Overview";
import { Button } from "~pages/components/Button";

const { Container } = layout;
const { Item, Sidebar } = sidebar;

export const Main: FunctionalComponent = () => {
const [route, setRoute] = useState("");
const [open, setOpen] = useState(true);
const [open, setOpen] = useState(false);

return (
<Typography>
<Container pillar>
<Sidebar open={open}>
<h3>General</h3>
<Item
href="/"
title="Main page"
icon={faHome}
current={route}
onClick={() => setOpen(false)}
>
Main
</Item>
<Item
href="/overview"
title="An overview of all components."
icon={faEye}
current={route}
onClick={() => setOpen(false)}
>
Overview
</Item>
<h3>Components</h3>
<Item
href="/components/button"
title="Button component"
icon={faMouse}
current={route}
onClick={() => setOpen(false)}
>
Button
</Item>
<h3>Important Links</h3>
<Item
href="https://git.dany.dev/dsluijk/teenyui"
title="TeenyUI Git page"
icon={faBalanceScale}
target="_blank"
>
TeenyUI
</Item>
<Item
href="https://dany.dev"
title="My website!"
icon={faBolt}
target="_blank"
>
About Me
</Item>
</Sidebar>
<main>
<Router onChange={(e) => setRoute(e.url)}>
<Home path="/" />
<Overview path="/overview" />
<Button path="/components/button" />
<div default>404!!1!</div>
</Router>
</main>
</Container>
</Typography>
<Base pillar>
<Sidebar open={open}>
<h3>General</h3>
<Item
href="/"
title="Main page"
icon={faHome}
current={route}
onClick={() => setOpen(false)}
>
Main
</Item>
<Item
href="/overview"
title="An overview of all components."
icon={faEye}
current={route}
onClick={() => setOpen(false)}
>
Overview
</Item>
<h3>Components</h3>
<Item
href="/components/button"
title="Button component"
icon={faMouse}
current={route}
onClick={() => setOpen(false)}
>
Button
</Item>
<h3>Important Links</h3>
<Item
href="https://git.dany.dev/dsluijk/teenyui"
title="TeenyUI Git page"
icon={faBalanceScale}
target="_blank"
>
TeenyUI
</Item>
<Item
href="https://dany.dev"
title="My website!"
icon={faBolt}
target="_blank"
>
About Me
</Item>
</Sidebar>
<main>
<TopBar icon={faBars} onOpen={() => setOpen(true)}></TopBar>
<Router onChange={(e) => setRoute(e.url)}>
<Home path="/" />
<Overview path="/overview" />
<Button path="/components/button" />
<div default>404!!1!</div>
</Router>
</main>
</Base>
);
};

+ 14
- 0
src/base/index.tsx View File

@@ -0,0 +1,14 @@
import { h, FunctionalComponent, RenderableProps } from "preact";

import style from "./style.scss";

export const Base: FunctionalComponent<RenderableProps<Props>> = (props) => {
const pillars = props.pillar ? style.pillar : "";
const styles = `${style.base} ${pillars}`;

return <div class={styles}>{props.children}</div>;
};

interface Props {
pillar?: boolean;
}

src/typography/style.scss → src/base/style.scss View File

@@ -1,4 +1,7 @@
.typography {
@import "../mixins";

.base {
display: flex;
height: 100%;
font-size: 16px;
letter-spacing: 0.5px;
@@ -60,4 +63,14 @@
color: var(--text-color-header);
text-decoration: underline;
}

> * {
flex: 1;
}
}

@include breakpoint(min, large) {
.pillar {
padding: 0 10%;
}
}

+ 2
- 1
src/index.ts View File

@@ -1,6 +1,7 @@
export * from "./base";
export * from "./button";
export * from "./icon";
export * from "./typography";
export * from "./topbar";
export * as card from "./card";
export * as layout from "./layout";
export * as sidebar from "./sidebar";

+ 1
- 3
src/layout/container/index.tsx View File

@@ -6,13 +6,11 @@ export const Container: FunctionalComponent<RenderableProps<Props>> = (
props,
) => {
const direction = style[props.direction || "row"];
const pillars = props.pillar ? style.pillar : "";
const styles = `${style.container} ${direction} ${pillars}`;
const styles = `${style.container} ${direction}`;

return <div class={styles}>{props.children}</div>;
};

interface Props {
direction?: "row" | "column";
pillar?: boolean;
}

+ 0
- 13
src/layout/container/style.scss View File

@@ -1,5 +1,3 @@
@import "../../mixins";

.container {
display: flex;
flex-wrap: wrap;
@@ -7,17 +5,6 @@
height: 100%;
width: 100%;
margin: 0 auto;
background: var(--background);

> * {
flex: 1;
}
}

@include breakpoint(min, large) {
.pillar {
width: 80%;
}
}

.row {


+ 31
- 0
src/topbar/index.tsx View File

@@ -0,0 +1,31 @@
import { h, FunctionalComponent, RenderableProps } from "preact";
import { IconDefinition } from "@fortawesome/free-solid-svg-icons";

import { Button } from "~button";
import { Icon } from "~icon";

import style from "./style.scss";

export const TopBar: FunctionalComponent<RenderableProps<Props>> = (props) => {
let openButton;

if (props.onOpen && props.icon) {
openButton = (
<Button ghost onClick={props.onOpen}>
<Icon icon={props.icon} />
</Button>
);
}

return (
<div class={style.topbar}>
{openButton}
{props.children}
</div>
);
};

interface Props {
icon?: IconDefinition;
onOpen?: () => void;
}

+ 14
- 0
src/topbar/style.scss View File

@@ -0,0 +1,14 @@
@import "../mixins";

.topbar {
display: flex;
flex-wrap: nowrap;
align-items: center;
margin: 6px 4px 0;

@include breakpoint(min, small) {
> button {
display: none;
}
}
}

+ 0
- 7
src/typography/index.tsx View File

@@ -1,7 +0,0 @@
import { h, FunctionalComponent } from "preact";

import style from "./style.scss";

export const Typography: FunctionalComponent = (props) => (
<div class={style.typography}>{props.children}</div>
);

Loading…
Cancel
Save