feat(ui): Navbar layout, navbar icons and small styling changes

[ross1296]

Very small PR, trying to cut my teeth on the project to help out:

• Updated the navbar layout to match Figma
• Added icons for GitHub, Discord and Youtube
• Changed sidebar's border-r red to Figma's gray

Summary by CodeRabbit

• New Features

  • Enhanced sidebar with improved visual styling for better user experience.
  • Updated navigation bar with additional links and improved organization for easier access to resources.
  • Introduced NavbarIconButtonComponent for enhanced interactivity within the navbar.
  • Added theme support for navbar icon buttons, allowing for customizable appearance.

• Bug Fixes

  • Corrected visibility logic for theme toggle icons to align with current theme settings.

• Style

  • Adjusted text size in navbar items for improved layout.
  • Modified dark mode color properties for improved visual contrast in sidebar menu.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
flowbite-angular	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 30, 2024 8:42am

[coderabbitai]

Walkthrough

The changes involve updates to the HTML structure and functionality of various components within the Angular application. Key modifications include the addition of color attributes to sidebar components, enhancements to the navbar with new icon buttons and links, and the introduction of a new NavbarIconButtonComponent and related theming services. The overall styling and responsiveness of the UI have been improved, while existing functionalities remain intact.

Changes

Files	Change Summary
apps/docs/src/app/ui/features/docs/docs.component.html	Added color attribute to flowbite-sidebar-menu (set to "dark") and flowbite-sidebar-item-group (set to "primary").
apps/docs/src/app/ui/ui.component.html	Removed header; enhanced flowbite-navbar with additional navigation items and external links. Integrated branding with navigation items and updated icon buttons for external links. Retained theme toggle and mobile navigation functionalities.
apps/docs/src/app/ui/ui.component.ts	Added NavbarIconButtonComponent to imports and declarations.
libs/flowbite-angular/src/lib/common/flowbite.theme.init.ts	Introduced theme initialization support for navbar icon buttons, including new theme token and service.
libs/flowbite-angular/src/lib/components/dark-theme-toggle/dark-theme-toggle.component.ts	Swapped visibility classes for moon and sun icons to align with theme settings.
libs/flowbite-angular/src/lib/components/navbar/index.ts	Added exports for NavbarIconButtonComponent, related types, theme, and service.
libs/flowbite-angular/src/lib/components/navbar/navbar-icon-button.component.ts	Introduced NavbarIconButtonComponent with properties for customization and methods for class fetching and verification.
libs/flowbite-angular/src/lib/components/navbar/navbar-icon-button.theme.service.ts	Defined a service for managing navbar icon button themes, including a method for merging base and custom styles.
libs/flowbite-angular/src/lib/components/navbar/navbar-icon-button.theme.ts	Established theme configuration for navbar icon buttons with defined properties and styles.
libs/flowbite-angular/src/lib/components/navbar/navbar-item.theme.ts	Modified text size class in navbarItemTheme to a smaller size.
libs/flowbite-angular/src/lib/components/sidebar/sidebar-menu.theme.ts	Changed dark color property in sidebarMenuTheme for improved visual appearance in dark mode.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Navbar
    participant NavbarIconButton
    participant ThemeService

    User->>Navbar: Click on icon button
    Navbar->>NavbarIconButton: Trigger action
    NavbarIconButton->>ThemeService: Get theme classes
    ThemeService-->>NavbarIconButton: Return classes
    NavbarIconButton-->>Navbar: Update appearance

Loading

🐰 "In the garden where colors bloom,
New buttons dance, dispelling gloom.
With themes that shift like day to night,
Our navbar shines, a joyful sight!
Hoppity hop, let's celebrate,
A UI bright, oh, isn't it great?" 🌼

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

• X
• Mastodon
• Reddit
• LinkedIn

Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai generate interesting stats about this repository and render them as a table.
  • @coderabbitai show all the console.log statements in this repository.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[MGREMY]

Thanks for the PR, just update it with my comments and it'll be good to go ! 😁😁

[MGREMY]

@ross1296 Just DM'd you on discord
Waiting for your commit and it's good to go 😄

[ross1296]

@MGREMY Done!

[MGREMY]

@coderabbitai review

[coderabbitai]

Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

Actionable comments posted: 0

Outside diff range, codebase verification and nitpick comments (1)

apps/docs/src/app/ui/ui.component.html (1)

2-73: Icons are not visible on smaller screens:

The flowbite-navbar-icon-button elements are currently hidden on screens smaller than the sm breakpoint due to the hidden sm:block class. This means that the icons are not accessible on smaller screens, which needs to be addressed to ensure proper accessibility.

• Consider revising the CSS classes to ensure that icons are visible on smaller screens.

Analysis chain

Navbar layout and icon visibility:

The updated navbar layout and the addition of new icon buttons are in line with the PR objectives. However, ensure that the icons remain accessible on smaller screens, as previously discussed.

The changes are approved.

Run the following script to verify the visibility of icons on smaller screens:

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the visibility of icons on smaller screens.

# Test: Search for conditional rendering based on screen size. Expect: Icons should be visible.
rg --type html -A 5 $'flowbite-navbar-icon-button'

Length of output: 2051

Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 87175b8 and 5b15f1e.

Files selected for processing (11)

• apps/docs/src/app/ui/features/docs/docs.component.html (1 hunks)
• apps/docs/src/app/ui/ui.component.html (1 hunks)
• apps/docs/src/app/ui/ui.component.ts (2 hunks)
• libs/flowbite-angular/src/lib/common/flowbite.theme.init.ts (4 hunks)
• libs/flowbite-angular/src/lib/components/dark-theme-toggle/dark-theme-toggle.component.ts (1 hunks)
• libs/flowbite-angular/src/lib/components/navbar/index.ts (1 hunks)
• libs/flowbite-angular/src/lib/components/navbar/navbar-icon-button.component.ts (1 hunks)
• libs/flowbite-angular/src/lib/components/navbar/navbar-icon-button.theme.service.ts (1 hunks)
• libs/flowbite-angular/src/lib/components/navbar/navbar-icon-button.theme.ts (1 hunks)
• libs/flowbite-angular/src/lib/components/navbar/navbar-item.theme.ts (1 hunks)
• libs/flowbite-angular/src/lib/components/sidebar/sidebar-menu.theme.ts (1 hunks)

Files skipped from review due to trivial changes (2)

• libs/flowbite-angular/src/lib/components/navbar/navbar-item.theme.ts
• libs/flowbite-angular/src/lib/components/sidebar/sidebar-menu.theme.ts

Additional comments not posted (10)

apps/docs/src/app/ui/ui.component.ts (2)

7-7: Approved: Import of NavbarIconButtonComponent.

The import of NavbarIconButtonComponent is correctly placed and formatted.

---

30-30: Approved: Declaration of NavbarIconButtonComponent.

The declaration of NavbarIconButtonComponent within the Angular component's imports array is correctly placed and formatted.

libs/flowbite-angular/src/lib/components/navbar/navbar-icon-button.theme.service.ts (1)

16-28: Approved: Implementation of NavbarIconButtonThemeService.

The NavbarIconButtonThemeService class is well-implemented, correctly using dependency injection and theme merging to provide theming support for the navbar icon button.

libs/flowbite-angular/src/lib/components/navbar/navbar-icon-button.theme.ts (1)

17-29: Approved: Definition of navbarIconButtonTheme.

The navbarIconButtonTheme constant is well-defined, providing a comprehensive set of base and color styles for the navbar icon button.

libs/flowbite-angular/src/lib/components/navbar/navbar-icon-button.component.ts (2)

12-17: Component Configuration Review

The component is correctly configured with a standalone flag and a simple template. This setup is suitable for a component that will be used as a part of a larger composition, like a navbar.

---

18-45: Review of Class Implementation

The class implementation uses dependency injection effectively, with optional components allowing for flexible usage within different parts of the navbar. The error handling in the verify method is robust, ensuring that the component is used correctly within the expected context.

• Dependency Injection: Proper use of Angular's inject with optional settings.
• Error Handling: The verify method correctly throws an error if neither NavbarComponent nor NavbarContentComponent is available, which aligns with the previous review comments that were confirmed as correct.

libs/flowbite-angular/src/lib/components/navbar/index.ts (1)

26-36: Review of New Exports

The new exports for NavbarIconButtonComponent and its associated types and services are correctly structured. This enhances the navbar's modularity and allows for better theming and customization options.

• Component Export: Ensures that NavbarIconButtonComponent can be easily utilized in other parts of the application.
• Type and Service Exports: Facilitate theming and provide necessary services for the icon button functionality.

apps/docs/src/app/ui/features/docs/docs.component.html (1)

4-23: Review of HTML Structure and Styling Attributes

The addition of color attributes to the flowbite-sidebar-menu and flowbite-sidebar-item-group components enhances the visual styling and consistency. This change aligns with the design specifications and improves the user interface by providing a clearer visual hierarchy.

• Color Attribute on Sidebar Menu: Sets a consistent theme for the sidebar.
• Color Attribute on Item Groups: Distinguishes different sections within the sidebar, improving navigation and aesthetics.

libs/flowbite-angular/src/lib/components/dark-theme-toggle/dark-theme-toggle.component.ts (1)

22-25: Visibility class changes for moon and sun icons:

The swapping of visibility classes for the moon and sun icons ensures that the correct icon is displayed according to the theme setting. Verify the correct functionality of the theme toggle to ensure seamless user experience.

The changes are approved.

Run the following script to verify the correct functionality of the theme toggle:

Verification successful

---

Theme toggle functionality is correctly implemented:

The theme toggle logic in dark-theme-toggle.component.ts confirms that the theme is switched and applied correctly, ensuring the moon and sun icons display as intended based on the theme. The changes to the visibility classes are appropriate and align with the theme toggle functionality.

• libs/flowbite-angular/src/lib/components/dark-theme-toggle/dark-theme-toggle.component.ts: Theme toggle logic and icon visibility changes.

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the correct functionality of the theme toggle.

# Test: Search for theme toggle functionality. Expect: Correct icon visibility based on theme.
rg --type typescript -A 5 $'themeStateService.select'

Length of output: 87

---

Script:

#!/bin/bash
# Description: Verify the correct functionality of the theme toggle.

# Test: Search for theme toggle functionality. Expect: Correct icon visibility based on theme.
rg --type ts -A 5 $'themeStateService.select'

Length of output: 2465

libs/flowbite-angular/src/lib/common/flowbite.theme.init.ts (1)

Line range hint 60-375: Theme initialization changes for the navbar icon button:

The addition of new theme-related exports for the navbar icon button enhances the flexibility and customization options for the navbar component. Verify the integration of the new theme in the application to ensure it functions as expected.

The changes are approved.

Run the following script to verify the integration of the new theme in the application:

Verification successful

---

Theme Token Integration Verified

The FLOWBITE_NAVBAR_ICON_BUTTON_THEME_TOKEN is properly integrated into the application. It is defined, exported, and used in the relevant files, confirming its integration into the theme initialization process.

• Definition and Usage: libs/flowbite-angular/src/lib/components/navbar/navbar-icon-button.theme.service.ts
• Export: libs/flowbite-angular/src/lib/components/navbar/index.ts
• Theme Initialization: libs/flowbite-angular/src/lib/common/flowbite.theme.init.ts

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the integration of the new theme in the application.

# Test: Search for the usage of the new theme token. Expect: Proper integration in the application.
rg --type typescript -A 5 $'FLOWBITE_NAVBAR_ICON_BUTTON_THEME_TOKEN'

Length of output: 102

---

Script:

#!/bin/bash
# Description: Verify the integration of the new theme in the application.

# Test: Search for the usage of the new theme token in TypeScript files.
rg --glob '*.ts' -A 5 'FLOWBITE_NAVBAR_ICON_BUTTON_THEME_TOKEN'

Length of output: 2964