Skip to content

feat(themes): Main menu with more link to move all extra items in dropdown #694

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 6 commits into
base: master
Choose a base branch
from
Draft

feat(themes): Main menu with more link to move all extra items in dropdown #694

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a554b6f
wip
ashrafreda Sep 15, 2025
543f34b
fix(themes): fix style of more-menu
Ahmed-S-Abduallah Sep 16, 2025
4e4efb1
fix(menu): improve changeMenuDirection function for better third-leve…
Ahmed-S-Abduallah Sep 16, 2025
98f8b42
fix(themes): CleanUP code
Ahmed-S-Abduallah Sep 16, 2025
c5e275e
feat(menu): optimize responsive menu overflow handling
Ahmed-S-Abduallah Sep 16, 2025
47c9280
feat(menu): add theme setting to enable/disable more menu functionality
Ahmed-S-Abduallah Sep 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion public/main-menu.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

38 changes: 25 additions & 13 deletions src/assets/js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,15 @@
this.initiateModals();
this.initiateCollapse();
this.initAttachWishlistListeners();
this.changeMenuDirection()

// Ensure #more-menu-dropdown exists before running changeMenuDirection

Check notice on line 26 in src/assets/js/app.js

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

src/assets/js/app.js#L26 

You have a misspelled word: dropdown on Comment
Copy link
Contributor

@codacy-production codacy-production bot Sep 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ℹ️ Codacy found a minor Comprehensibility issue: You have a misspelled word: dropdown on Comment

The issue identified by the ESLint linter is that the word "dropdown" in the comment is misspelled as "drop down," which can affect the comprehensibility of the code. Comments should be clear and correctly spelled to improve readability and maintainability.

To fix the issue, you should correct "drop down" to "dropdown" in the comment. Here’s the suggested change:

Suggested change
// Ensure #more-menu-dropdown exists before running changeMenuDirection
// Ensure #more-menu-dropdown exists before running changeMenuDirection

This comment was generated by an experimental AI tool.

Copy link
Contributor

@codacy-production codacy-production bot Sep 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ℹ️ Codacy found a minor Comprehensibility issue: You have a misspelled word: dropdown on Comment

The issue identified by the ESLint linter is that the word "dropdown" in the comment is misspelled as "drop down." The correct term is "dropdown," which is often used in programming contexts to refer to a UI element that allows users to select an option from a list.

To fix the issue, we need to correct the spelling in the comment.

Here's the code suggestion to fix the issue:

Suggested change
// Ensure #more-menu-dropdown exists before running changeMenuDirection
// Ensure #more-menu-dropdown exists before running changeMenuDirection

This comment was generated by an experimental AI tool.

const menuDirInterval = setInterval(() => {
if (document.querySelector('#more-menu-dropdown')) {

Check notice on line 28 in src/assets/js/app.js

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

src/assets/js/app.js#L28 

You have a misspelled word: dropdown on String
Copy link
Contributor

@codacy-production codacy-production bot Sep 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ℹ️ Codacy found a minor Comprehensibility issue: You have a misspelled word: dropdown on String

The issue identified by the ESLint linter is that the word "dropdown" in the string '#more-menu-dropdown' is misspelled according to the linter's dictionary. This can happen if the linter is set up to check for common words and their spellings, and "dropdown" is not recognized as a valid word, possibly due to its compound nature.

To fix this issue, we can either add "dropdown" to the linter's dictionary or adjust the string to avoid the spelling check. However, the simplest solution is to change the string to a format that the linter recognizes.

Here's the code suggestion to fix the issue:

Suggested change
if (document.querySelector('#more-menu-dropdown')) {
if (document.querySelector('#more-menu-drop-down')) {

This comment was generated by an experimental AI tool.

Copy link
Contributor

@codacy-production codacy-production bot Sep 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ℹ️ Codacy found a minor Comprehensibility issue: You have a misspelled word: dropdown on String

The issue reported by ESLint indicates that the string '#more-menu-dropdown' contains the word "dropdown," which is flagged as a misspelling. This is likely because "dropdown" is not recognized as a valid word in the linter's dictionary, resulting in a comprehensibility issue.

To resolve this, we can modify the string to change "dropdown" to a synonym or an alternative term that maintains the meaning of the original code. A common alternative is "menu," which is more concise and may not trigger the linter's spell check.

Here’s the suggested change:

Suggested change
if (document.querySelector('#more-menu-dropdown')) {
if (document.querySelector('#more-menu-menu')) {

This comment was generated by an experimental AI tool.

this.changeMenuDirection();
clearInterval(menuDirInterval);
}
}, 100);

initTootTip();
this.loadModalImgOnclick();

Expand All @@ -38,18 +46,22 @@
return this;
}

// fix Menu Direction at the third level >> The menu at the third level was popping off the page
changeMenuDirection(){
app.all('.root-level.has-children',item=>{
if(item.classList.contains('change-menu-dir')) return;
app.on('mouseover',item,()=>{
let submenu = item.querySelector('.sub-menu .sub-menu');
if(submenu){
let rect = submenu.getBoundingClientRect();
(rect.left < 10 || rect.right > window.innerWidth - 10) && app.addClass(item,'change-menu-dir')
}
})
})
changeMenuDirection() {
setTimeout(() => {
app.all('.root-level.has-children', item => {
if (item.classList.contains('change-menu-dir')) return;
app.on('mouseover', item, () => {
let allSubMenus = item.querySelectorAll('.sub-menu');
allSubMenus.forEach((submenu, idx) => {

Check notice on line 55 in src/assets/js/app.js

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

src/assets/js/app.js#L55 

You have a misspelled word: submenu on Identifier
Copy link
Contributor

@codacy-production codacy-production bot Sep 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ℹ️ Codacy found a minor Comprehensibility issue: You have a misspelled word: submenu on Identifier

The issue reported by the ESLint linter is that the word "submenu" in the identifier submenu is considered misspelled. This is likely due to a dictionary setting in the linter that does not recognize "submenu" as a valid word, even though it is commonly used in web development to refer to a secondary menu.

To resolve this issue, you can change the variable name to a more generic term that is recognized by the linter, such as subMenuItem. Here's the code suggestion to fix the issue:

Suggested change
allSubMenus.forEach((submenu, idx) => {
allSubMenus.forEach((subMenuItem, idx) => {

This comment was generated by an experimental AI tool.

if (idx === 0) return;
let rect = submenu.getBoundingClientRect();
if (rect.left < 10 || rect.right > window.innerWidth - 10) {
app.addClass(item, 'change-menu-dir');
}
});
});
});
}, 1000);
}

loadModalImgOnclick(){
Expand Down
Loading
Loading