yadunut/clan-core
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

ui/sidebar: adds full height to drawer and min-width to new sidebar component

Browse Source
This commit is contained in:
Timo
2024-11-19 12:52:49 +01:00
parent d79e30ee7f
commit 93d4d180af
11 changed files with 116 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pkgs/webview-ui/app/src/components/Sidebar/SidebarFlyout/index.tsx
View File

@@ -5,7 +5,7 @@ export const SidebarFlyout= () =>{
return <div class="sidebar__flyout">
<div class="sidebar__flyout__inner">
<List gapSize='small'>
<SidebarListItem title='Settings' delegateClick={()=>{}} />
<SidebarListItem href='/settings' title='Settings' />
</List>
</div>
</div>

22
pkgs/webview-ui/app/src/components/Sidebar/SidebarHeader.tsx
View File

@@ -1,10 +1,10 @@
import {createSignal} from 'solid-js'
import {createSignal, Show} from 'solid-js'
import {Typography} from '@/src/components/Typography'
import {SidebarFlyout} from './SidebarFlyout'
interface SidebarHeader {
clanName?: string
clanName: string
}
export const SidebarHeader = (props:SidebarHeader)=>{
@@ -15,15 +15,21 @@ export const SidebarHeader = (props:SidebarHeader)=>{
function handleClick(){
toggleFlyout(!showFlyout())
}
const renderClanProfile = () => <div class={`sidebar__profile ${showFlyout() ? 'sidebar__profile--flyout' : ''}`}>
<Typography classes='sidebar__profile__character' tag='span' hierarchy='title' size='m' weight='bold' color='primary' inverted={true}>
{clanName.slice(0,1)}
</Typography>
</div>
const renderClanTitle = () =>
<Typography classes='sidebar__title' tag='h3' hierarchy='body' size='default' weight='medium' color='primary' inverted={true}>{clanName}</Typography>
return <header class="sidebar__header">
<div onClick={handleClick} class="sidebar__header__inner">
<div class={`sidebar__profile ${showFlyout() ? 'sidebar__profile--flyout' : ''}`}>
<Typography classes='sidebar__title' tag='span' hierarchy='title' size='m' weight='bold' color='primary' inverted={!showFlyout()}>
{clanName?.slice(0,1) || 'U'}
</Typography>
</div>
<Typography classes='sidebar__title' tag='h3' hierarchy='body' size='default' weight='medium' color='primary' inverted={true}>{clanName || 'Untitled'}</Typography>
{renderClanProfile()}
{renderClanTitle()}
</div>
{ showFlyout() &&
<SidebarFlyout/>

15
pkgs/webview-ui/app/src/components/Sidebar/SidebarListItem.tsx
View File

@@ -1,14 +1,19 @@
import { A } from "@solidjs/router";
import {Typography} from '@/src/components/Typography'
interface SidebarListItem {
title:string;
delegateClick: () => void;
title:string
href:string
}
export const SidebarListItem = (props: SidebarListItem) =>{
const {title} = props;
const {title, href} = props;
return <li class="sidebar__list__item">
<Typography classes='sidebar__list__content' tag='span' hierarchy='body' size='default' weight='normal' color="primary" inverted={true}>{title}</Typography>
</li>
<A class="sidebar__list__link" href={href}>
<Typography classes='sidebar__list__content' tag='span' hierarchy='body' size='s' weight='normal' color="primary" inverted={true}>{title}</Typography>
</A>
</li>
}

8
pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-list-item.css
View File

@@ -1,6 +1,5 @@
.sidebar__list__item {
position: relative;
padding: theme(padding.3);
cursor: theme(cursor.pointer);
&:after {
@@ -34,6 +33,13 @@
}
}
.sidebar__list__link {
position: relative;
z-index: 20;
display: block;
padding: theme(padding.3);
}
.sidebar__list__content {
position: relative;
z-index: 20;

4
pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-profile.css
View File

@@ -12,4 +12,8 @@
.sidebar__profile--flyout{
background: rgb(var(--clr-bg-def-2));
}
.sidebar__profile--flyout > .sidebar__profile__character{
color: rgb(var(--clr-fg-def-1)) !important;
}

2
pkgs/webview-ui/app/src/components/Sidebar/css/sidebar.css
View File

@@ -8,6 +8,8 @@
/* Sidebar Structure */
.sidebar {
min-width: theme(width.72);
height: 100%;
background-color: rgb(var(--clr-bg-inv-2));
border: 1px solid rgb(var(--clr-border-inv-2));
border-radius: theme(borderRadius.xl);

77
pkgs/webview-ui/app/src/components/Sidebar/index.tsx
View File

@@ -1,20 +1,35 @@
import { type JSX } from "solid-js"
import {For, createEffect, Show, type JSX, children } from "solid-js"
import { A, RouteSectionProps } from "@solidjs/router";
import { activeURI } from "@/src/App"
import { createQuery } from "@tanstack/solid-query";
import { callApi } from "@/src/api";
import {AppRoute, routes} from '@/src/index'
import { List } from "../Helpers";
import {List} from '../Helpers';
import {SidebarHeader} from "./SidebarHeader";
import {SidebarHeader} from "./SidebarHeader"
import "./css/sidebar.css";
import { SidebarListItem } from "./SidebarListItem";
import "./css/sidebar.css";
import { Typography } from "../Typography";
export const SidebarSection = (props:{children: JSX.Element}) =>{
const {children} = props
return <div class="sidebar__section">{children}</div>
export const SidebarSection = (props:{title: string, children: JSX.Element}) =>{
const {title, children} = props
return <details class="sidebar__section accordeon" open>
<summary class="accordeon__header">
<Typography classes="uppercase" tag="p" hierarchy="body" size="xs" weight="normal" color="tertiary" inverted={true}>{title}</Typography>
</summary>
<div class="accordeon__body">{children}</div>
</details>
}
export const Sidebar = () => {
export const Sidebar = (props: RouteSectionProps) => {
createEffect(()=>{
console.log('machines')
console.log(routes)
})
const query = createQuery(() => ({
queryKey: [activeURI(), "meta"],
queryFn: async () => {
@@ -29,27 +44,29 @@ export const Sidebar = () => {
},
}));
return (
<div class="sidebar bg-opacity-95">
<SidebarHeader clanName={query.data?.name}/>
<div class="sidebar__body">
<SidebarSection>
<List gapSize="small">
<SidebarListItem title="test" delegateClick={()=>{}}/>
<SidebarListItem title="test" delegateClick={()=>{}}/>
<SidebarListItem title="test" delegateClick={()=>{}}/>
<SidebarListItem title="test" delegateClick={()=>{}}/>
</List>
</SidebarSection>
<SidebarSection>
<List gapSize="small">
<SidebarListItem title="test" delegateClick={()=>{}}/>
<SidebarListItem title="test" delegateClick={()=>{}}/>
<SidebarListItem title="test" delegateClick={()=>{}}/>
<SidebarListItem title="test" delegateClick={()=>{}}/>
</List>
</SidebarSection>
return (
<div class="sidebar bg-opacity-95">
<Show when={query.data} fallback={<SidebarHeader clanName={'Untitled'}/>}>
{(meta) => <SidebarHeader clanName={meta().name}/>}
</Show>
<div class="sidebar__body">
<For each={routes.filter((r) => !r.hidden && r.path !="/clans" )}>
{(route:AppRoute)=>(
<Show when={route.children}>
{(children)=>
<SidebarSection title={route.label}>
<ul>
<For each={children().filter((r)=>!r.hidden)}>
{(child)=><SidebarListItem href={`${route.path}${child.path}`} title={child.label} />}
</For>
</ul>
</SidebarSection>
}
</Show>
)
}
</For>
</div>
</div>
</div>
)
)
}

12
pkgs/webview-ui/app/src/components/Typography/css/typography-color.css
View File

@@ -1,23 +1,23 @@
.fnt-clr-primary {
color: var(--clr-fg-def-1);
color:( rgb(--clr-fg-def-1));
}
.fnt-clr-secondary {
color: var(--clr-fg-def-2);
color: rgb(var(--clr-fg-def-2));
}
.fnt-clr-tertiary {
color: var(--clr-fg-def-3);
color: rgb(var(--clr-fg-def-3));
}
.fnt-clr-primary.fnt-clr--inverted {
color: var(--clr-fg-inv-1);
color: rgb(var(--clr-fg-inv-1));
}
.fnt-clr-secondary.fnt-clr--inverted {
color: var(--clr-fg-inv-2);
color: rgb(var(--clr-fg-inv-2));
}
.fnt-clr-tertiary.fnt-clr--inverted {
color: var(--clr-fg-inv-3);
color: rgb(var(--clr-fg-inv-3));
}

4
pkgs/webview-ui/app/src/components/Typography/css/typography-hierarchy/typography-body.css
View File

@@ -5,13 +5,13 @@
}
.fnt-body-s {
font-size: 0.875rem;
font-size: 0.925rem;
line-height: 132%;
letter-spacing: 3%;
}
.fnt-body-xs {
font-size: 0.75rem;
font-size: 0.875rem;
line-height: 132%;
letter-spacing: 3%;
}

21
pkgs/webview-ui/app/src/index.css
View File

@@ -56,7 +56,7 @@
--clr-fg-def-3: theme(colors.clan-secondary.700);
--clr-fg-def-4: theme(colors.clan-secondary.500);
--clr-fg-inv-1: theme(colors.white);
--clr-fg-inv-1: 255 255 255;
--clr-fg-inv-2: theme(colors.clan-secondary.100);
--clr-fg-inv-3: theme(colors.clan-secondary.300);
--clr-fg-inv-4: theme(colors.clan-secondary.400);
@@ -67,3 +67,22 @@ html {
overflow-x: hidden;
overflow-y: scroll;
}
.accordeon {
display: flex;
flex-direction: column;
gap: theme(gap.3);
}
.accordeon__header {
padding: theme(padding.2) theme(padding[1.5]);
cursor: pointer;
}
.accordeon__header::-webkit-details-marker {
display: none;
}
.accordeon__body {
padding: theme(padding.2) 0 theme(padding.1);
}

6
pkgs/webview-ui/app/src/layout/layout.tsx
View File

@@ -7,6 +7,7 @@ import { redirect, RouteSectionProps, useNavigate } from "@solidjs/router";
export const Layout: Component<RouteSectionProps> = (props) => {
const navigate = useNavigate();
+
createEffect(() => {
console.log("Layout props", props.location);
console.log(
@@ -20,7 +21,7 @@ export const Layout: Component<RouteSectionProps> = (props) => {
return (
<div class="h-screen bg-base-100 p-4">
<div class="drawer lg:drawer-open ">
<div class="drawer h-full lg:drawer-open ">
<input
id="toplevel-drawer"
type="checkbox"
@@ -44,8 +45,7 @@ export const Layout: Component<RouteSectionProps> = (props) => {
aria-label="close sidebar"
class="drawer-overlay"
></label>
<SidebarUpdate/>
<Sidebar {...props} />
<SidebarUpdate />
</div>
</div>
</div>