+ {/* Main navigation items */}
+
+ {mainNavigationItems.map((item) => (
+ onPageChange(item.key)}
+ className={buttonClassName}
+ isActive={currentPage === item.key}
+ />
+ ))}
+
+
+ {/* Spacer to push bottom items down */}
+
+
+ {/* Bottom navigation items (Settings) */}
+
+ {bottomNavigationItems.map((item) => (
+ onPageChange(item.key)}
+ className={buttonClassName}
+ isActive={currentPage === item.key}
+ />
+ ))}
+
+
+ )
+}
+
+export default Sidebar
diff --git a/samples/DataverseFluentTeamsInspired/src/components/layout/TitleBar.tsx b/samples/DataverseFluentTeamsInspired/src/components/layout/TitleBar.tsx
new file mode 100644
index 0000000..f961db1
--- /dev/null
+++ b/samples/DataverseFluentTeamsInspired/src/components/layout/TitleBar.tsx
@@ -0,0 +1,47 @@
+import React from 'react'
+import { Button, Text } from '@fluentui/react-components'
+import { WeatherSunny24Regular, WeatherMoon24Regular } from '@fluentui/react-icons'
+import { COMMON_STYLES, STYLE_CONSTANTS } from '../../constants/styles'
+// Import assets through Vite so URLs are resolved correctly under HTTPS wrappers
+import reactLogo from '../../assets/react.svg'
+
+interface TitleBarProps {
+ isDarkTheme: boolean
+ onThemeToggle: () => void
+ userProfileComponent: React.ReactNode
+ className?: string
+}
+
+const TitleBar: React.FC