Mobile support added#8
Merged
Merged
Conversation
Closed
There was a problem hiding this comment.
Pull Request Overview
This PR adds mobile support to the application by updating several UI components and introducing a new hook for responsiveness. Key changes include:
- Adding the new useIsMobile hook to detect mobile viewports.
- Updating the CurrentUser, Navbar, and MobileMenu components to conditionally render elements based on mobile status.
- Adjusting layout exports and removing the deprecated Sidebar Navbar component.
Reviewed Changes
Copilot reviewed 14 out of 21 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/modules/users/components/CurrentUser/CurrentUser.tsx | Adjusts the layout to hide the logout icon on mobile and conditionally renders elements based on mobile detection. |
| src/modules/system/hooks/useIsMobile.tsx | Introduces a new hook to detect mobile viewports. |
| src/modules/system/hooks/index.ts | Exports the new useIsMobile hook. |
| src/modules/layout/components/index.ts | Updates component exports to include Navbar instead of Sidebar. |
| src/modules/layout/components/Sidebar/Navbar.tsx | Removed in favor of modern, mobile-aware Navbar components. |
| src/modules/layout/components/Navbar/index.ts | Adds export for the new MobileMenu component. |
| src/modules/layout/components/Navbar/Navbar.tsx | Implements a mobile-responsive Navbar that switches layouts based on viewport size. |
| src/modules/layout/components/Navbar/MobileMenu/MobileMenu.tsx | Implements a dedicated mobile menu with correct link rendering and user options. |
| src/modules/layout/components/Navbar/Links/Links.tsx | Adjusts icon size usage through a new parameterized links function. |
| src/modules/layout/components/Navbar/AdminLinks/AdminLinks.tsx | Updates admin links to be consistent with the new mobile-aware design. |
| src/modules/app/components/DiscordLoginOverlay/DiscordLoginOverlay.tsx | Updates layout constraints and typography for better mobile readability. |
| src/modules/app/components/Banner/Banner.tsx | Refactors tooltip events and updates styling for improved presentation. |
| src/modules/app/components/Banner/Banner.module.scss | Centers banner text to improve layout aesthetics. |
| <Flex align={"center"} p={"xs"}> | ||
| <Flex align={"center"} gap={"sm"} w={"100%"}> | ||
| {!isMobile && ( | ||
| <ActionIcon onClick={logout} className={styles.logout} variant="transparent"> |
There was a problem hiding this comment.
Consider adding an aria-label to the ActionIcon for the logout function to improve accessibility for screen readers.
Suggested change
| <ActionIcon onClick={logout} className={styles.logout} variant="transparent"> | |
| <ActionIcon onClick={logout} className={styles.logout} variant="transparent" aria-label="Log out"> |
| return ( | ||
| <Menu withinPortal={false} opened={opened} onChange={setOpened}> | ||
| <Menu.Target> | ||
| <ActionIcon variant="transparent" size={"xl"}> |
There was a problem hiding this comment.
Consider adding an aria-label to the mobile menu toggle ActionIcon to enhance accessibility and clarify its purpose for assistive technologies.
Suggested change
| <ActionIcon variant="transparent" size={"xl"}> | |
| <ActionIcon | |
| variant="transparent" | |
| size={"xl"} | |
| aria-label={opened ? "Close menu" : "Open menu"} | |
| > |
Member
Author
|
CONSIDER MY BALLS BRO |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.