The AppShell component provides a consistent layout framework for our WebApps, acting as a container for all major structural elements. By using the AppShell, we ensure that headers, navigation bars, bodies, and footers maintain their positions and remain visible as users interact with the application.

​
Structural Elements

All structural elements within the AppShell—such as the Header, Navbar, Body, and Footer—use fixed positioning. This approach keeps essential navigation and branding elements accessible at all times. Each element has its own slot, allowing easy customization and flexible content insertion.
AspectDetails
PurposeContains the SST logo, tabs, icon buttons with dropdown menus, and user profile information. Supports recipes like “Waffle” (desktop) and “Hamburger” (mobile).
BehaviorRemains at the top of the screen, providing consistent branding and navigation.
GuidelinesKeep the header concise, ensuring that essential actions and menus are easily accessible without overwhelming the user.
AspectDetails
PurposeA vertical navigation bar for links to different sections or pages.
BehaviorFixed position along a chosen edge (typically left), ensuring easy access as the user scrolls.
GuidelinesUse concise labels or icons, maintain a consistent order, and ensure that navigation items are clearly distinguishable from other UI elements.

​
Body

AspectDetails
PurposeThe main content area of the application.
BehaviorScrollable area beneath fixed elements (Header, Navbar, Footer).
GuidelinesOrganize content logically, ensuring clear headings, sections, and visual hierarchy. Keep the layout responsive to different screen sizes.
AspectDetails
PurposeHouses secondary navigation, legal information, and other supporting links.
BehaviorStays at the bottom of the viewport, ensuring easy access without forcing the user to scroll.
GuidelinesKeep the footer minimal, focusing on helpful links and information. Avoid clutter and ensure sufficient contrast for legibility.