@sybilion/uilib 1.2.5 → 1.2.8

package/src/components/ui/NavUserHeader/NavUserHeader.tsx

@@ -1,5 +1,6 @@
 import cn from 'classnames';
 
+import { useTheme } from '#uilib/docs/contexts/theme-context';
 import {
   MoonIcon,
   SignOutIcon,
@@ -29,12 +30,11 @@ export function NavUserHeader({
   isAuthenticated,
   user = null,
   menuItems,
-  theme,
-  onThemeToggle,
   onLogout,
   signInSlot,
   onSignInClick,
 }: NavUserHeaderProps) {
+  const { toggleTheme, theme } = useTheme();
   const authenticated = isAuthenticated ?? true;
 
   const avatarUrl = user?.avatar ?? '';
@@ -121,21 +121,19 @@ export function NavUserHeader({
         <DropdownMenuSeparator />
         <DropdownMenuGroup>
           {menuItems}
-          {onThemeToggle ? (
-            <DropdownMenuItem onSelect={() => onThemeToggle()}>
-              {theme === 'dark' ? (
-                <>
-                  <SunIcon />
-                  Light theme
-                </>
-              ) : (
-                <>
-                  <MoonIcon />
-                  Dark theme
-                </>
-              )}
-            </DropdownMenuItem>
-          ) : null}
+          <DropdownMenuItem onSelect={toggleTheme}>
+            {theme === 'dark' ? (
+              <>
+                <SunIcon />
+                Light theme
+              </>
+            ) : (
+              <>
+                <MoonIcon />
+                Dark theme
+              </>
+            )}
+          </DropdownMenuItem>
         </DropdownMenuGroup>
         <DropdownMenuSeparator />
         <DropdownMenuItem variant="destructive" onSelect={() => onLogout()}>

package/src/components/ui/NavUserHeader/NavUserHeader.types.ts

@@ -16,10 +16,6 @@ export type NavUserHeaderProps = {
   user?: NavUserHeaderUser | null;
   /** Rows inside the menu above theme toggle and logout. Use `DropdownMenuItem` nodes. */
   menuItems?: ReactNode;
-  /** Current theme drives the toggle row label/icons. */
-  theme: 'light' | 'dark';
-  /** When set, renders the light/dark theme menu row. */
-  onThemeToggle?: () => void;
   onLogout: () => void;
   /** Replaces default “Log in” control when signed out. */
   signInSlot?: ReactNode;

package/src/components/ui/Sidebar/Sidebar.styl

@@ -64,7 +64,7 @@
   @media (min-width MOBILE)
     &[data-state="expanded"]
       display flex
-      height calc(100vh - var(--gap-top))
+      height calc(100% - var(--gap-top))
       min-height 0
 
   &[data-collapsible="offcanvas"]

package/src/components/widgets/SybilionAppHeader/SybilionAppHeader.styl

@@ -5,3 +5,49 @@
   align-items center
   gap var(--p-4)
   flex-shrink 0
+
+.logoArea
+  position absolute
+  top 22px
+  left 40px
+  z-index 10
+
+  display flex
+  align-items center
+  gap var(--p-2)
+
+  @media (max-width MOBILE)
+    left 32px
+  @media (min-width MOBILE)
+    :global([data-slot='sidebar-wrapper'][data-state='expanded']) &
+      position fixed
+
+.logoAreaWithBanner
+  top calc(22px + var(--welcome-banner-height, 0px))
+
+  @media (min-width MOBILE)
+    :global([data-slot='sidebar-wrapper'][data-state='collapsed']) &
+      top 22px
+
+.logoLink
+  display flex
+  align-items center
+  gap 0.5rem
+  width fit-content
+
+  font-weight 400
+  font-size 1.5rem
+  color var(--color-foreground)
+  text-decoration none
+  white-space nowrap
+
+  svg
+    display inline-flex
+    height 32px
+    width auto
+    flex-shrink 0
+    transition transform 0.1s ease-in-out
+
+  &:hover svg
+    transform scale(1.05)
+

package/src/components/widgets/SybilionAppHeader/SybilionAppHeader.styl.d.ts

@@ -2,6 +2,9 @@
 // Please do not change this file!
 interface CssExports {
   'actionsAnchor': string;
+  'logoArea': string;
+  'logoAreaWithBanner': string;
+  'logoLink': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

package/src/components/widgets/SybilionAppHeader/SybilionAppHeader.tsx

@@ -1,8 +1,11 @@
 import cn from 'classnames';
+import type { ReactNode } from 'react';
+import { Link } from 'react-router-dom';
 
 import { AppHeaderPortal } from '#uilib/components/ui/AppHeader/AppHeader';
 import { PAGE_HEADER_ACTIONS_ID } from '#uilib/components/ui/AppHeader/appChromeAnchors';
 import { Gap } from '#uilib/components/ui/Gap/Gap';
+import { Logo } from '#uilib/components/ui/Logo/Logo';
 import { NavUserHeader } from '#uilib/components/ui/NavUserHeader';
 import type { NavUserHeaderProps } from '#uilib/components/ui/NavUserHeader';
 import {
@@ -17,6 +20,11 @@ export type SybilionAppHeaderProps = WorkspaceAppSwitcherProps &
     pageHeaderId?: string;
     actionsAnchorId?: string;
     actionsAnchorClassName?: string;
+    /** Branded markup; omit for default lucide tile + «Sybilion». */
+    logo?: ReactNode;
+    logoAreaClassName?: string;
+    /** Applies vertical offset when a welcome banner consumes top space (CSS `--welcome-banner-height` on shell). */
+    welcomeBannerOffset?: boolean;
   };
 
 export function SybilionAppHeader({
@@ -28,10 +36,25 @@ export function SybilionAppHeader({
   authenticated,
   defaultApps,
   appsStorageKey,
+  logo,
+  logoAreaClassName,
+  welcomeBannerOffset,
   ...navUserHeaderProps
 }: SybilionAppHeaderProps) {
   return (
     <AppHeaderPortal pageHeaderId={pageHeaderId}>
+      <div
+        className={cn(
+          S.logoArea,
+          welcomeBannerOffset && S.logoAreaWithBanner,
+          logoAreaClassName,
+        )}
+      >
+        <Link to="/" className={S.logoLink}>
+          {logo ?? <Logo size="md" aria-hidden />}
+        </Link>
+      </div>
+
       <WorkspaceAppSwitcher
         pathname={pathname}
         onNavigate={onNavigate}

package/src/docs/config/webpack.config.js

@@ -20,6 +20,7 @@ const FaviconWebpackPlugin = require('favicons-webpack-plugin');
 const pkg = require('../../../package.json');
 
 const themeStyl = pathResolve(paths.src, 'theme.styl');
+const logoSvgPath = pathResolve(paths.assets, 'logo.svg');
 
 export default (env, argv) => {
   const isDev = argv.mode === 'development';
@@ -148,7 +149,7 @@ export default (env, argv) => {
             noErrorOnMissing: true,
           },
           {
-            from: `${paths.assets}/logo.svg`,
+            from: logoSvgPath,
             to: paths.build,
             noErrorOnMissing: true,
           },
@@ -175,9 +176,9 @@ export default (env, argv) => {
               minifyURLs: true,
             },
       }),
-      existsSync(`${paths.assets}/logo.svg`) &&
+      existsSync(logoSvgPath) &&
         new FaviconWebpackPlugin({
-          logo: `${paths.assets}/logo.svg`,
+          logo: logoSvgPath,
           mode: 'webapp',
           devMode: 'webapp',
           favicons: {

package/src/docs/contexts/theme-context.tsx

@@ -1,4 +1,10 @@
-import { createContext, useContext, useEffect, useState } from 'react';
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
 
 import { Theme as ThemeRoot } from '@homecode/ui';
 
@@ -10,10 +16,12 @@ const ThemeContext = createContext<{
   theme: ThemeMode;
   isDarkMode: boolean;
   setTheme: (theme: ThemeMode) => void;
+  toggleTheme: () => void;
 }>({
   theme: 'light',
   isDarkMode: false,
   setTheme: () => {},
+  toggleTheme: () => {},
 });
 
 export function ThemeProvider({ children }: { children: React.ReactNode }) {
@@ -25,6 +33,10 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
     getThemeConfig(theme === 'dark'),
   );
 
+  const toggleTheme = useCallback(() => {
+    setTheme(theme === 'dark' ? 'light' : 'dark');
+  }, [theme, setTheme]);
+
   useEffect(() => {
     setCurrThemeConfig(getThemeConfig(theme === 'dark'));
   }, [theme]);
@@ -44,6 +56,7 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
         theme,
         isDarkMode: theme === 'dark',
         setTheme,
+        toggleTheme,
       }}
     >
       <ThemeRoot config={currThemeConfig} />

package/src/docs/pages/NavUserHeaderPage.tsx

@@ -1,5 +1,3 @@
-import { useCallback, useEffect, useState } from 'react';
-
 import { DropdownMenuItem } from '#uilib/components/ui/DropdownMenu';
 import { NavUserHeader } from '#uilib/components/ui/NavUserHeader';
 import { PageContentSection } from '#uilib/components/ui/Page';
@@ -9,19 +7,6 @@ import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
 import { DocsHeaderActions } from '../docsHeaderActions';
 
 export default function NavUserHeaderPage() {
-  const [theme, setTheme] = useState<'light' | 'dark'>('light');
-
-  useEffect(() => {
-    document.documentElement.dataset.theme = theme;
-    return () => {
-      delete document.documentElement.dataset.theme;
-    };
-  }, [theme]);
-
-  const onThemeToggle = useCallback(() => {
-    setTheme(t => (t === 'dark' ? 'light' : 'dark'));
-  }, []);
-
   const customMenuItems = (
     <>
       <DropdownMenuItem>
@@ -40,7 +25,7 @@ export default function NavUserHeaderPage() {
       <AppPageHeader
         breadcrumbs={[{ label: 'NavUserHeader' }]}
         title="NavUserHeader"
-        subheader="User menu with label, custom rows, theme toggle, and logout."
+        subheader="User menu with label, custom rows, theme toggle (docs ThemeProvider), and logout."
         actions={<DocsHeaderActions />}
       />
       <PageContentSection
@@ -56,8 +41,6 @@ export default function NavUserHeaderPage() {
               email: 'demo@sybilion.io',
               avatar: '',
             }}
-            theme={theme}
-            onThemeToggle={onThemeToggle}
             onLogout={() => {
               console.info('[docs] logout');
             }}
@@ -75,8 +58,6 @@ export default function NavUserHeaderPage() {
               email: 'compact@sybilion.io',
               avatar: '',
             }}
-            theme={theme}
-            onThemeToggle={onThemeToggle}
             onLogout={() => {
               console.info('[docs] logout compact');
             }}