@ossy/app 3.2.0 → 3.4.0

package/src/shell-registry/close-mobile-shell-nav.action.js

@@ -0,0 +1,6 @@
+export const metadata = {
+  id: '@ossy/app/actions/close-mobile-shell-nav',
+  access: 'public',
+  prefix: 'close',
+  label: 'app.shell.header.closeNav',
+}

package/src/shell-registry/default.layout.jsx

@@ -1,10 +1,15 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import {
   PageSection,
   View,
   Slot,
 } from '@ossy/design-system'
-import { useCompactShellLayout, shellSlotUnset } from '@ossy/app/shell'
+import {
+  useCompactShellLayout,
+  shellSlotUnset,
+  ShellHeaderRow,
+  compactAppShellStyle,
+} from '@ossy/app/shell'
 
 export const metadata = { id: '@ossy/app/layout/default' }
 
@@ -20,6 +25,13 @@ export default function DefaultLayout ({
   maxWidth = 'xl',
 }) {
   const compact = useCompactShellLayout()
+  const [mobileNavOpen, setMobileNavOpen] = useState(false)
+  const showSidebar = !shellSlotUnset(shellSlots['app:sidebar'])
+  const showHeader = !shellSlotUnset(shellSlots['app:header'])
+
+  useEffect(() => {
+    if (!compact) setMobileNavOpen(false)
+  }, [compact])
 
   return (
     <>
@@ -27,12 +39,14 @@ export default function DefaultLayout ({
       <View
         surface="base"
         data-ossy-app-shell
-        style={{
-          boxSizing: 'border-box',
-          height: '100%',
-          minWidth: 0,
-          padding: compact ? 0 : 'var(--space-m)',
-        }}
+        style={compact
+          ? compactAppShellStyle()
+          : {
+              boxSizing: 'border-box',
+              height: '100%',
+              minWidth: 0,
+              padding: 'var(--space-m)',
+            }}
       >
         <PageSection
           maxWidth={maxWidth}
@@ -55,13 +69,17 @@ export default function DefaultLayout ({
               ...(compact ? { gap: '4px' } : {}),
             }}
           >
-            {!shellSlotUnset(shellSlots['app:sidebar']) && (
+            {showSidebar && !compact && (
               <Slot region="sidebar-primary" view="app:sidebar" />
             )}
 
-            {!shellSlotUnset(shellSlots['app:header']) && (
-              <Slot region="header" view="app:header" />
-            )}
+            <ShellHeaderRow
+              compact={compact}
+              showSidebar={showSidebar}
+              showHeader={showHeader}
+              mobileNavOpen={mobileNavOpen}
+              onMobileNavOpenChange={setMobileNavOpen}
+            />
 
             <View
               data-region="content"

package/src/shell-registry/header-default.component.jsx

@@ -40,7 +40,7 @@ export default function DefaultHeader ({
             gap: compact ? 'var(--space-xs)' : 'var(--space-s)',
           }}
         >
-          <LanguageSelect />
+          <LanguageSelect compact={compact} />
           <ThemeSelect compact={compact} />
           <HeaderAuthActions compact={compact} />
         </View>

package/src/shell-registry/open-mobile-shell-nav.action.js

@@ -0,0 +1,6 @@
+export const metadata = {
+  id: '@ossy/app/actions/open-mobile-shell-nav',
+  access: 'public',
+  prefix: 'menu',
+  label: 'app.shell.header.openNav',
+}

package/src/shell-registry/sidebar-default.component.jsx

@@ -2,6 +2,12 @@ import React, { useState, useMemo, useRef, useEffect, useCallback } from 'react'
 import { Button, View, Slot, useLocale } from '@ossy/design-system'
 import { useRouter } from '@ossy/router-react'
 import { useApp, buildSidebarNav, patchUserAppSettings, useCompactShellLayout, useShellWorkspace } from '@ossy/app/shell'
+import {
+  isDrawerPresentation,
+  resolveSidebarBorderRadius,
+  resolveSidebarSmall,
+  shouldShowSidebarCollapseControl,
+} from '../shell/sidebarChrome.js'
 
 export const metadata = { id: '@ossy/app/component/sidebar/default' }
 
@@ -47,6 +53,7 @@ function navLabelForItem (item, showLabels, t) {
 
 export default function DefaultSidebar ({
   small: smallProp = false,
+  presentation,
   ...rest
 }) {
   const [hoverRailExpanded, setHoverRailExpanded] = useState(false)
@@ -56,6 +63,7 @@ export default function DefaultSidebar ({
   const compactViewport = useCompactShellLayout()
   const initialSidebarCollapsed = app?.sidebarPrimaryCollapsed === true
   const [sidebarCollapsed, setSidebarCollapsed] = useState(initialSidebarCollapsed)
+  const isDrawer = isDrawerPresentation(presentation)
 
   const onToggleCollapsed = useCallback(() => {
     setSidebarCollapsed((collapsed) => {
@@ -65,16 +73,25 @@ export default function DefaultSidebar ({
     })
   }, [])
 
-  const small = compactViewport || sidebarCollapsed || smallProp
+  const small = resolveSidebarSmall({
+    presentation,
+    compactViewport,
+    sidebarCollapsed,
+    smallProp,
+  })
   const { workspace } = useShellWorkspace()
   const router = useRouter()
   const { t } = useLocale()
 
-  const desktopHoverRail = small && !compactViewport
+  const desktopHoverRail = small && !compactViewport && !isDrawer
   const showLabels = !small || (desktopHoverRail && hoverRailExpanded)
   const iconOnly = !showLabels
   const hoverExpandedDesktop = desktopHoverRail && hoverRailExpanded
   const narrowChrome = small
+  const showCollapseControl = shouldShowSidebarCollapseControl({
+    presentation,
+    compactViewport,
+  })
 
   const { shellItems, packageItems } = useMemo(
     () => buildSidebarNav({
@@ -186,6 +203,7 @@ export default function DefaultSidebar ({
       prefix={item.prefix}
       title={item.title}
       aria-current={item.selected ? 'page' : undefined}
+      data-ossy-sidebar-nav-item={item.key ?? item.href}
       style={{
         justifyContent: iconOnly ? 'center' : 'flex-start',
         padding: hoverExpandedDesktop ? '8px 24px' : (narrowChrome ? 'var(--space-s)' : '8px 24px'),
@@ -200,17 +218,18 @@ export default function DefaultSidebar ({
       {...(!desktopHoverRail ? rest : {})}
       surface="primary"
       gap={narrowChrome ? 's' : 'm'}
+      data-ossy-sidebar-presentation={isDrawer ? 'drawer' : undefined}
       style={{
         height: '100%',
-        width: desktopHoverRail ? '100%' : 'auto',
+        width: isDrawer || desktopHoverRail ? '100%' : 'auto',
         minWidth: small ? 0 : undefined,
-        maxHeight: small ? '100%' : undefined,
+        maxHeight: small || isDrawer ? '100%' : undefined,
         padding: hoverExpandedDesktop
           ? 'var(--space-m) var(--space-l) var(--space-m) var(--space-m)'
           : narrowChrome
           ? 'var(--space-s) var(--space-xs)'
           : 'var(--space-m) var(--space-l) var(--space-m) var(--space-m)',
-        borderRadius: 'var(--space-l) var(--space-s) var(--space-s) var(--space-l)',
+        borderRadius: resolveSidebarBorderRadius(presentation),
         flexShrink: 0,
         boxSizing: 'border-box',
       }}
@@ -233,7 +252,7 @@ export default function DefaultSidebar ({
         {menuNear.map(renderButton)}
       </View>
 
-      {onToggleCollapsed && !compactViewport && (
+      {onToggleCollapsed && showCollapseControl && (
         <View style={{ flexShrink: 0, marginTop: 'var(--space-s)' }}>
           <Button
             variant="link"

package/src/shell-registry/workspace.layout.jsx

@@ -1,10 +1,15 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import {
   PageSection,
   View,
   Slot,
 } from '@ossy/design-system'
-import { useCompactShellLayout, shellSlotUnset } from '@ossy/app/shell'
+import {
+  useCompactShellLayout,
+  shellSlotUnset,
+  ShellHeaderRow,
+  compactAppShellStyle,
+} from '@ossy/app/shell'
 
 export const metadata = { id: '@ossy/app/layout/workspace' }
 
@@ -23,6 +28,13 @@ export default function WorkspaceLayout ({
   maxWidth = 'xl',
 }) {
   const compact = useCompactShellLayout()
+  const [mobileNavOpen, setMobileNavOpen] = useState(false)
+  const showSidebar = !shellSlotUnset(shellSlots['app:sidebar'])
+  const showHeader = !shellSlotUnset(shellSlots['app:header'])
+
+  useEffect(() => {
+    if (!compact) setMobileNavOpen(false)
+  }, [compact])
 
   return (
     <>
@@ -30,12 +42,14 @@ export default function WorkspaceLayout ({
       <View
         surface="base"
         data-ossy-app-shell
-        style={{
-          boxSizing: 'border-box',
-          height: '100%',
-          minWidth: 0,
-          padding: compact ? 0 : 'var(--space-m)',
-        }}
+        style={compact
+          ? compactAppShellStyle()
+          : {
+              boxSizing: 'border-box',
+              height: '100%',
+              minWidth: 0,
+              padding: 'var(--space-m)',
+            }}
       >
         <PageSection
           maxWidth={maxWidth}
@@ -58,13 +72,17 @@ export default function WorkspaceLayout ({
               ...(compact ? { gap: '4px' } : {}),
             }}
           >
-            {!shellSlotUnset(shellSlots['app:sidebar']) && (
+            {showSidebar && !compact && (
               <Slot region="sidebar-primary" view="app:sidebar" />
             )}
 
-            {!shellSlotUnset(shellSlots['app:header']) && (
-              <Slot region="header" view="app:header" />
-            )}
+            <ShellHeaderRow
+              compact={compact}
+              showSidebar={showSidebar}
+              showHeader={showHeader}
+              mobileNavOpen={mobileNavOpen}
+              onMobileNavOpenChange={setMobileNavOpen}
+            />
 
             <View
               data-region="content"

package/src/sv.translations.json

@@ -4,5 +4,8 @@
   "app.shell.header.languagePicker": "Språk",
   "app.shell.footer.languages": "Språk",
   "app.shell.header.themeSwitch": "{theme}-tema. Byt tema.",
-  "app.shell.header.profile": "Profil"
+  "app.shell.header.profile": "Profil",
+  "app.shell.header.openNav": "Öppna navigation",
+  "app.shell.header.closeNav": "Stäng navigation",
+  "app.shell.header.nav": "Huvudnavigation"
 }