Confirm?

Are you sure you want to proceed?
M
Mahmood Salim

Arabic Sidebar Menu Design

Clone & Customize via AI

The Bootstrap Arabic Side Menu implements a right-to-left sidebar navigation with nested submenus and Font Awesome icons. It uses Bootstrap utility classes and a responsive layout.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Fixed RTL sidebar navigation positioned on the right. - Multi-level (nested) menu items with expand/collapse behavior. - Menu item icons (Font Awesome) and active/hover styling. - Responsive main content area that adjusts when sidebar collapses (media query). ## Key components - Razor markup: foreach loops rendering menuItems and nested SubItems. - Event handlers: @onclick, @onclick:preventDefault and ToggleMenuItem method. - Data model: MenuItemModel with Title, Icon, Url, IsExpanded, SubItems. - Styling: scoped CSS (ArabicSideMenu.razor.css) with RTL positioning, media query and custom scrollbar. - Bootstrap utilities used: d-flex, btn, container-fluid, p-4 and other classes. ## How it works - Menu state is driven by a List<MenuItemModel> populated in OnInitialized. - ToggleMenuItem flips the IsExpanded flag to show/hide sub-menu blocks rendered conditionally. - Links use href values (currently "#"); @onclick:preventDefault prevents navigation when subitems exist to allow expansion. - ToggleSidebar stub is present but not implemented; sidebar collapse/expand would toggle CSS widths or apply an open/closed class. ## Styling - Uses a custom scoped CSS file that pins the sidebar to the right (right: 0) and applies dark theme colors. - Bootstrap classes provide layout scaffolding (d-flex, container-fluid, p-4) and responsive behavior. - Font Awesome icons are referenced via <i class="..."> elements. - A media query switches the sidebar to full width on small screens; main-content margin accounts for sidebar width. ## Reuse steps 1. Add Bootstrap and Font Awesome to the host page (index.html/_Host.cshtml) and include the scoped CSS file. 2. Copy MenuItemModel.cs to the project and place ArabicSideMenu.razor and ArabicSideMenu.razor.css in a Components folder. 3. Add @page "/arabic-menu" route or embed the component in layouts/pages. 4. Wire real URLs and replace placeholder icons/labels; implement ToggleSidebar to toggle a css class or boolean. 5. Optionally add ARIA roles, keyboard handlers, and localization resources for strings. ## Limitations & next steps - ToggleSidebar is a stub; no collapse state or animation is provided. - No ARIA attributes or keyboard navigation for accessibility. - Links are placeholders (#); routing and authorization are not wired. - Consider persisting expanded states, adding unit tests, and extracting localization to resource files. - Integrate with navigation services or a layout component if used in an admin panel or site template.