From d9973a3d12d87c29a55130d836b9ef8d429c0476 Mon Sep 17 00:00:00 2001 From: Timo Date: Tue, 19 Nov 2024 12:52:49 +0100 Subject: [PATCH] ui/sidebar: adds full height to drawer and min-width to new sidebar component --- .../Sidebar/SidebarFlyout/index.tsx | 2 +- .../src/components/Sidebar/SidebarHeader.tsx | 22 ++++-- .../components/Sidebar/SidebarListItem.tsx | 15 ++-- .../Sidebar/css/sidebar-list-item.css | 8 +- .../Sidebar/css/sidebar-profile.css | 4 + .../src/components/Sidebar/css/sidebar.css | 2 + .../app/src/components/Sidebar/index.tsx | 77 +++++++++++-------- .../Typography/css/typography-color.css | 12 +-- .../typography-hierarchy/typography-body.css | 4 +- pkgs/webview-ui/app/src/index.css | 21 ++++- pkgs/webview-ui/app/src/layout/layout.tsx | 6 +- 11 files changed, 116 insertions(+), 57 deletions(-) diff --git a/pkgs/webview-ui/app/src/components/Sidebar/SidebarFlyout/index.tsx b/pkgs/webview-ui/app/src/components/Sidebar/SidebarFlyout/index.tsx index 0ee49eb8d..bf047e246 100644 --- a/pkgs/webview-ui/app/src/components/Sidebar/SidebarFlyout/index.tsx +++ b/pkgs/webview-ui/app/src/components/Sidebar/SidebarFlyout/index.tsx @@ -5,7 +5,7 @@ export const SidebarFlyout= () =>{ return
- {}} /> +
diff --git a/pkgs/webview-ui/app/src/components/Sidebar/SidebarHeader.tsx b/pkgs/webview-ui/app/src/components/Sidebar/SidebarHeader.tsx index 8bc0a7be2..9631865db 100644 --- a/pkgs/webview-ui/app/src/components/Sidebar/SidebarHeader.tsx +++ b/pkgs/webview-ui/app/src/components/Sidebar/SidebarHeader.tsx @@ -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 = () =>
+ + {clanName.slice(0,1)} + +
+ + + const renderClanTitle = () => + {clanName} return
-
- - {clanName?.slice(0,1) || 'U'} - -
- {clanName || 'Untitled'} + {renderClanProfile()} + {renderClanTitle()}
{ showFlyout() && diff --git a/pkgs/webview-ui/app/src/components/Sidebar/SidebarListItem.tsx b/pkgs/webview-ui/app/src/components/Sidebar/SidebarListItem.tsx index 96e380ec3..db2d1331d 100644 --- a/pkgs/webview-ui/app/src/components/Sidebar/SidebarListItem.tsx +++ b/pkgs/webview-ui/app/src/components/Sidebar/SidebarListItem.tsx @@ -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
  • - {title} -
    • + + {title} + + } \ No newline at end of file diff --git a/pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-list-item.css b/pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-list-item.css index 9951ad633..c6dc62e0f 100644 --- a/pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-list-item.css +++ b/pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-list-item.css @@ -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; diff --git a/pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-profile.css b/pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-profile.css index 9c5ffeb94..e476394a9 100644 --- a/pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-profile.css +++ b/pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-profile.css @@ -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; } \ No newline at end of file diff --git a/pkgs/webview-ui/app/src/components/Sidebar/css/sidebar.css b/pkgs/webview-ui/app/src/components/Sidebar/css/sidebar.css index f33e28443..3dea60651 100644 --- a/pkgs/webview-ui/app/src/components/Sidebar/css/sidebar.css +++ b/pkgs/webview-ui/app/src/components/Sidebar/css/sidebar.css @@ -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); diff --git a/pkgs/webview-ui/app/src/components/Sidebar/index.tsx b/pkgs/webview-ui/app/src/components/Sidebar/index.tsx index a1aef1be1..a472b7de4 100644 --- a/pkgs/webview-ui/app/src/components/Sidebar/index.tsx +++ b/pkgs/webview-ui/app/src/components/Sidebar/index.tsx @@ -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
    {children}
    +export const SidebarSection = (props:{title: string, children: JSX.Element}) =>{ + const {title, children} = props + + return
    + + {title} + +
    {children}
    +
    } -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 ( -
    - -
    - - - {}}/> - {}}/> - {}}/> - {}}/> - - - - - {}}/> - {}}/> - {}}/> - {}}/> - - + return ( +
    + }> + {(meta) => } + +
    + !r.hidden && r.path !="/clans" )}> + {(route:AppRoute)=>( + + {(children)=> + +
      + !r.hidden)}> + {(child)=>} + +
    +     + } +     + ) + } +     +
    -
    - ) + ) } \ No newline at end of file diff --git a/pkgs/webview-ui/app/src/components/Typography/css/typography-color.css b/pkgs/webview-ui/app/src/components/Typography/css/typography-color.css index 9d0d170dd..886828664 100644 --- a/pkgs/webview-ui/app/src/components/Typography/css/typography-color.css +++ b/pkgs/webview-ui/app/src/components/Typography/css/typography-color.css @@ -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)); } \ No newline at end of file diff --git a/pkgs/webview-ui/app/src/components/Typography/css/typography-hierarchy/typography-body.css b/pkgs/webview-ui/app/src/components/Typography/css/typography-hierarchy/typography-body.css index df601ba41..6988b7276 100644 --- a/pkgs/webview-ui/app/src/components/Typography/css/typography-hierarchy/typography-body.css +++ b/pkgs/webview-ui/app/src/components/Typography/css/typography-hierarchy/typography-body.css @@ -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%; } \ No newline at end of file diff --git a/pkgs/webview-ui/app/src/index.css b/pkgs/webview-ui/app/src/index.css index e735a6311..a0c645673 100644 --- a/pkgs/webview-ui/app/src/index.css +++ b/pkgs/webview-ui/app/src/index.css @@ -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); +} diff --git a/pkgs/webview-ui/app/src/layout/layout.tsx b/pkgs/webview-ui/app/src/layout/layout.tsx index 8d7ee1bb7..e67ea5e30 100644 --- a/pkgs/webview-ui/app/src/layout/layout.tsx +++ b/pkgs/webview-ui/app/src/layout/layout.tsx @@ -7,6 +7,7 @@ import { redirect, RouteSectionProps, useNavigate } from "@solidjs/router"; export const Layout: Component = (props) => { const navigate = useNavigate(); + + createEffect(() => { console.log("Layout props", props.location); console.log( @@ -20,7 +21,7 @@ export const Layout: Component = (props) => { return (
    -
    +
    = (props) => { aria-label="close sidebar" class="drawer-overlay" > - - +