UI: fix responsive sidebar

pkgs/webview-ui/app/gtk.webview.js

@@ -52,7 +52,7 @@ fs.readFile(manifestPath, { encoding: "utf8" }, (err, data) => {
                 console.log(`Rewriting CSS url(): ${asset.url} to ${res}`);
                 return res;
               },
-            })
+            }),
           )
           .process(css, {
             from: `dist/${cssEntry}`,

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

@@ -1,27 +1,20 @@
-import { createSignal, Show } from "solid-js";
-
+import { createSignal } from "solid-js";
 import { Typography } from "@/src/components/Typography";
 import { SidebarFlyout } from "./SidebarFlyout";
+import "./css/sidebar.css";
 
-interface SidebarHeader {
+interface SidebarProps {
   clanName: string;
+  showFlyout?: () => boolean;
 }
 
-export const SidebarHeader = (props: SidebarHeader) => {
-  const { clanName } = props;
-
-  const [showFlyout, toggleFlyout] = createSignal(false);
-
-  function handleClick() {
-    toggleFlyout(!showFlyout());
-  }
-
-  const renderClanProfile = () => (
+const ClanProfile = (props: SidebarProps) => {
+  return (
     <div
-      class={`sidebar__profile ${showFlyout() ? "sidebar__profile--flyout" : ""}`}
+      class={`sidebar__profile ${props.showFlyout?.() ? "sidebar__profile--flyout" : ""}`}
     >
       <Typography
-        classes="sidebar__profile__character"
+        class="sidebar__profile__character"
         tag="span"
         hierarchy="title"
         size="m"
@@ -29,14 +22,15 @@ export const SidebarHeader = (props: SidebarHeader) => {
         color="primary"
         inverted={true}
       >
-        {clanName.slice(0, 1).toUpperCase()}
+        {props.clanName.slice(0, 1).toUpperCase()}
       </Typography>
     </div>
   );
+};
 
-  const renderClanTitle = () => (
+const ClanTitle = (props: SidebarProps) => {
+  return (
     <Typography
-      classes="sidebar__title"
       tag="h3"
       hierarchy="body"
       size="default"
@@ -44,15 +38,23 @@ export const SidebarHeader = (props: SidebarHeader) => {
       color="primary"
       inverted={true}
     >
-      {clanName}
+      {props.clanName}
     </Typography>
   );
+};
+
+export const SidebarHeader = (props: SidebarProps) => {
+  const [showFlyout, toggleFlyout] = createSignal(false);
+
+  function handleClick() {
+    toggleFlyout(!showFlyout());
+  }
 
   return (
     <header class="sidebar__header">
       <div onClick={handleClick} class="sidebar__header__inner">
-        {renderClanProfile()}
-        {renderClanTitle()}
+        <ClanProfile clanName={props.clanName} showFlyout={showFlyout} />
+        <ClanTitle clanName={props.clanName} />
       </div>
       {showFlyout() && <SidebarFlyout />}
     </header>

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

@@ -14,7 +14,7 @@ export const SidebarListItem = (props: SidebarListItem) => {
     <li class="sidebar__list__item">
       <A class="sidebar__list__link" href={href}>
         <Typography
-          classes="sidebar__list__content"
+          class="sidebar__list__content"
           tag="span"
           hierarchy="body"
           size="s"

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

@@ -19,7 +19,7 @@ export const SidebarSection = (props: {
     <details class="sidebar__section accordeon" open>
       <summary class="accordeon__header">
         <Typography
-          classes="uppercase"
+          class="uppercase"
           tag="p"
           hierarchy="body"
           size="xs"
@@ -47,7 +47,7 @@ export const Sidebar = (props: RouteSectionProps) => {
       const curr = activeURI();
       if (curr) {
         const result = await callApi("show_clan_meta", { uri: curr });
-
+        console.log("refetched meta for ", curr);
         if (result.status === "error") throw new Error("Failed to fetch data");
 
         return result.data;