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

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

@@ -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>

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)=>{
@@ -16,14 +16,20 @@ export const SidebarHeader = (props:SidebarHeader)=>{
         toggleFlyout(!showFlyout())
     }
 
-    return <header class="sidebar__header">
+    const renderClanProfile = () => <div class={`sidebar__profile ${showFlyout() ? 'sidebar__profile--flyout' : ''}`}>
-        <div onClick={handleClick} class="sidebar__header__inner">
+        <Typography classes='sidebar__profile__character' tag='span' hierarchy='title' size='m' weight='bold' color='primary' inverted={true}>
-            <div class={`sidebar__profile ${showFlyout() ? 'sidebar__profile--flyout' : ''}`}>
+            {clanName.slice(0,1)}
-                <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>
+    
+
+    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">
+            {renderClanProfile()}
+            {renderClanTitle()}
         </div>
         { showFlyout() &&
             <SidebarFlyout/>

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;
+    title:string
-    delegateClick: () => void;
+    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>              
+        <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>
 }

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;

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

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

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);

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}) =>{
+export const SidebarSection = (props:{title: string, children: JSX.Element}) =>{
-    const {children} = props
+    const {title, children} = props
-    return <div class="sidebar__section">{children}</div>
+    
+    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 () => {
@@ -31,24 +46,26 @@ export const Sidebar = () => {
 
     return (
         <div class="sidebar bg-opacity-95">
-        <SidebarHeader clanName={query.data?.name}/>
+            <Show when={query.data} fallback={<SidebarHeader clanName={'Untitled'}/>}>
+                {(meta) => <SidebarHeader clanName={meta().name}/>}
+            </Show>
             <div class="sidebar__body">
-            <SidebarSection>    
+                <For each={routes.filter((r) => !r.hidden && r.path !="/clans" )}>
-                <List gapSize="small">
+                    {(route:AppRoute)=>(
-                    <SidebarListItem title="test" delegateClick={()=>{}}/>
+                        <Show when={route.children}>
-                    <SidebarListItem title="test" delegateClick={()=>{}}/>
+                            {(children)=>
-                    <SidebarListItem title="test" delegateClick={()=>{}}/>
+                                <SidebarSection title={route.label}>
-                    <SidebarListItem title="test" delegateClick={()=>{}}/>
+                                    <ul>
-                </List>
+                                        <For each={children().filter((r)=>!r.hidden)}>
-            </SidebarSection>
+                                            {(child)=><SidebarListItem href={`${route.path}${child.path}`} title={child.label} />}
-            <SidebarSection>    
+                                        </For>
-                <List gapSize="small">
+                                    </ul>
-                    <SidebarListItem title="test" delegateClick={()=>{}}/>
-                    <SidebarListItem title="test" delegateClick={()=>{}}/>
-                    <SidebarListItem title="test" delegateClick={()=>{}}/>
-                    <SidebarListItem title="test" delegateClick={()=>{}}/>
-                </List>
                                 </SidebarSection>
+                            }
+                        </Show>
+                        )
+                    }
+                </For>        
             </div>
         </div>
     )   

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));
 }

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%;
 }

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);
+}

pkgs/webview-ui/app/src/layout/layout.tsx

@@ -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/>
+          <SidebarUpdate />
-          <Sidebar {...props} />
         </div>
       </div>
     </div>