https://github.com/notgonnaleo/blazortabmanager

Simple example of a Console Navigation "Salesforce" UI/UX style written in Blazor
https://github.com/notgonnaleo/blazortabmanager

blazor blazor-application blazor-client blazor-webassembly frontend ui ux

Last synced: 2 months ago
JSON representation

Simple example of a Console Navigation "Salesforce" UI/UX style written in Blazor

• Host: GitHub
• URL: https://github.com/notgonnaleo/blazortabmanager
• Owner: notgonnaleo
• Created: 2025-02-07T00:45:52.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-02-10T13:38:48.000Z (over 1 year ago)
• Last Synced: 2025-06-03T21:25:24.988Z (about 1 year ago)
• Topics: blazor, blazor-application, blazor-client, blazor-webassembly, frontend, ui, ux
• Language: HTML
• Homepage:
• Size: 8.42 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Project Overview

This Blazor application mimics Salesforce's UI/UX, creating a dynamic Single Page Application (SPA) with tabs and navigation similar to Salesforce’s layout. The goal is to manage dynamic fragments that represent different pages within the app. Here’s how the system is structured:

## **MainLayout.razor**

`MainLayout.razor` is the central component of the SPA and is responsible for:

- Rendering the app’s **navigation sidebar**, which allows users to open different "fragments" (or "tabs").

- Displaying the **list of open tabs** within the main content area.

- Handling the **active tab** logic, updating the main content area based on user interaction:

  - When a user clicks on a tab in the sidebar, the corresponding tab content is displayed.

  - Users can also interact with the opened tabs list located at the top of the main content area to switch between active tabs.

## **Tab.razor**

`Tab.razor` works in conjunction with `MainLayout.razor` and represents an individual tab that displays dynamic content. It has the following responsibilities:

- Accepting a Razor component (e.g., `Counter.razor`, `Home.razor`, `Weather.razor`) to be rendered within the tab.

- Managing **tab-specific data** by accepting a key-value pair where:

  - **Key**: The type of the Razor component fragment.

  - **Value**: The corresponding JSON data (page data) to be displayed within the tab.

## **TabDataService.cs**

`TabDataService.cs` is the core service that handles the state and data for the tabs. It is responsible for:

- **Managing tab data**: Fetches the JSON data associated with each tab fragment.

- **Creating tab data**: Allows creation and storage of JSON data for each fragment.

This service ensures that each tab’s state and associated data are properly saved and retrieved as users interact with the app.