Skip to content

Commit 660595a

Browse files
bjorgerbjorger
committed
implement nested dropdown for desktop menu
1 parent a7ed3c2 commit 660595a

File tree

9 files changed

+126
-32
lines changed

9 files changed

+126
-32
lines changed

‎packages/bootstrap-shell/cra-template-bs/template/src/components/Menu/MenuRight.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ import { BsFacebook, BsInstagram, BsGithub } from "react-icons/bs";
55

66
export default function MenuRight() {
77
return (<>
8-
<BS.Nav.Link className="text-white" href='#home'><BsFacebook /></BS.Nav.Link>
9-
<BS.Nav.Link className="text-white" href='#home'><BsInstagram /></BS.Nav.Link>
10-
<BS.Nav.Link className="text-white" href='https://github.com/TarikHuber/react-most-wanted'><BsGithub /></BS.Nav.Link>
11-
<BS.Button variant="dark">Download</BS.Button>
8+
<BS.Nav.Link className="text-light" href='/home'><BsFacebook /></BS.Nav.Link>
9+
<BS.Nav.Link className="text-light" href='/home'><BsInstagram /></BS.Nav.Link>
10+
<BS.Nav.Link className="text-light" href='https://github.com/TarikHuber/react-most-wanted'><BsGithub /></BS.Nav.Link>
11+
<BS.Button variant="light">Download</BS.Button>
1212
</>
1313
)
1414
}

‎packages/bootstrap-shell/cra-template-bs/template/src/config/menuItems.js‎

Lines changed: 45 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,68 @@
11
const menuItems = [
2+
/*
23
{
34
path: '/',
4-
displayName: 'Home'
5+
displayName: 'Home',
6+
disabled: true,
7+
disabledMobile: false,
58
},
69
{
710
path: '/',
811
displayName: 'Dropdown with Link',
12+
disabled: true,
13+
disabledMobile: false,
914
nested: [
1015
1116
]
1217
},
18+
*/
1319
{
14-
displayName: 'Dropdown with out Link',
20+
displayName: 'Dropdown',
21+
disabled: false,
1522
nested: [
1623
{
1724
path: '/',
18-
displayName: 'Dropdown with Link',
25+
displayName: 'Dropdown Item',
26+
disabled: false,
27+
},
28+
{
29+
path: '/',
30+
displayName: 'Dropdown Item',
31+
disabled: false,
32+
},
33+
{
34+
path: '/',
35+
displayName: 'Dropdown Item',
36+
disabled: false,
37+
},
38+
{
39+
displayName: 'Dropdown Item',
40+
disabled: false,
1941
nested: [
2042
{
2143
path: '/',
22-
displayName: 'Dropdown Item'
44+
displayName: 'Dropdown Item',
45+
disabled: false,
46+
},
47+
{
48+
path: '/',
49+
displayName: 'Dropdown Item',
50+
disabled: false,
51+
nested: [
52+
{
53+
path: '/',
54+
displayName: 'Dropdown Item',
55+
disabled: false,
56+
},
57+
{
58+
path: '/',
59+
displayName: 'Dropdown Item',
60+
disabled: false,
61+
}
62+
]
2363
}
2464
]
25-
}
65+
},
2666
]
2767
}
2868
]

‎packages/bootstrap-shell/package-lock.json‎

Lines changed: 0 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/bootstrap-shell/src/components/Menu/Menu.js‎

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import RMWLogo from "../../assets/rmw.svg";
55
import { useMenu } from 'bootstrap-shell/lib/providers/Menu'
66
import { SET_IS_MOBILE_MENU_OPEN } from "bootstrap-shell/lib/providers/Menu/store/types";
77
import { GiHamburgerMenu } from 'react-icons/gi'
8+
import MenuDropdown from './MenuDropdown';
9+
import MenuDropdownMobile from './MenuDropdownMobile';
810

911
const Menu = ({ brand }) => {
1012
const { appConfig } = useConfig()
@@ -14,30 +16,25 @@ const Menu = ({ brand }) => {
1416
const { DISPATCH_ACTION, isMobileMenuOpen } = menuContext;
1517

1618
const _brand = brand ? brand : globalBrand
17-
console.log(isMobileMenuOpen)
1819

1920
return (
2021
<header>
2122
<BS.Navbar bg="dark">
2223
<BS.Container fluid className="justify-content-space-between">
2324
<BS.Col>
24-
<BS.Navbar>
25+
<BS.Navbar className="navbar-dark">
2526
<BS.Navbar.Brand href="#home" className="text-white">
2627
{brand ? _brand : <img src={RMWLogo} alt="RMW Logo" width="40px" />}
2728
</BS.Navbar.Brand>
2829
<BS.Navbar.Toggle aria-controls="basic-navbar-nav" />
2930
<BS.Navbar.Collapse>
3031
<BS.Nav className="d-none d-md-flex d-lg-flex">
31-
{menuItems.map(({ path, displayName }) => {
32-
return (
33-
<BS.Nav.Link
34-
key={displayName}
35-
href={path}
36-
className="text-light"
37-
>
38-
{displayName}
32+
{menuItems.map(menuItem => {
33+
console.log("menu", menuItem.displayName);
34+
return menuItem.nested ? <MenuDropdown style={{ position: 'relative' }} key={menuItem.displayName} navItem={menuItem} /> :
35+
<BS.Nav.Link key={menuItem.displayName} href={menuItem.path} className="text-dark">
36+
{menuItem.displayName}
3937
</BS.Nav.Link>
40-
)
4138
})}
4239
</BS.Nav>
4340
</BS.Navbar.Collapse>
@@ -65,12 +62,12 @@ const Menu = ({ brand }) => {
6562
transition: 'max-height 2s linear',
6663
}}
6764
>
68-
{menuItems.map(({ path, displayName }) => {
69-
return (
70-
<BS.Nav.Link key={displayName} href={path} className="text-light">
71-
{displayName}
65+
{menuItems.map(menuItem => {
66+
console.log("menu", menuItem.displayName);
67+
return menuItem.nested ? <MenuDropdownMobile style={{ position: 'relative' }} key={menuItem.displayName} navItem={menuItem} /> :
68+
<BS.Nav.Link key={menuItem.displayName} href={menuItem.path} className="text-dark">
69+
{menuItem.displayName}
7270
</BS.Nav.Link>
73-
)
7471
})}
7572
{MenuRight && <MenuRight />}
7673
</BS.Col>

‎packages/bootstrap-shell/src/components/Menu/MenuDropdown.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react'
2+
import * as BS from "react-bootstrap"
3+
4+
export default function MenuDropdown({ navItem, className }) {
5+
6+
return (
7+
navItem &&
8+
<BS.NavDropdown className={className} menuVariant='dark' title={navItem.displayName}>
9+
{navItem?.nested?.map(item => {
10+
if (item.nested) {
11+
return <MenuDropdown className="dropdown-submenu" navItem={item} />;
12+
}
13+
else {
14+
return <BS.NavDropdown.Item href={navItem.path}>{item.displayName}</BS.NavDropdown.Item>
15+
}
16+
})}
17+
</BS.NavDropdown>
18+
19+
)
20+
}

‎packages/bootstrap-shell/src/components/Menu/MenuDropdownMobile.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react'
2+
import * as BS from "react-bootstrap"
3+
4+
export default function MenuDropdownMobile({ navItem, className }) {
5+
6+
return (
7+
navItem &&
8+
<BS.NavDropdown className={className} menuVariant='dark' title={navItem.displayName}>
9+
{navItem?.nested?.map(item => {
10+
console.log(item);
11+
if (item.nested) {
12+
return <MenuDropdownMobile className="dropdown-submenu-mobile" navItem={item} />;
13+
}
14+
else {
15+
return <BS.NavDropdown.Item className="text-light" href={navItem.path}>{item.displayName}</BS.NavDropdown.Item>
16+
}
17+
})}
18+
</BS.NavDropdown>
19+
20+
)
21+
}

‎packages/bootstrap-shell/src/containers/LayoutContainer/LayoutContainer.js‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
import { useConfig } from 'base-shell/lib/providers/Config'
22
import React from 'react'
33
import MenuProvider from '../../providers/Menu/Provider'
4-
import * as BS from 'react-bootstrap'
4+
import '../../styles/custom-bootstrap.css';
55

66
const LayoutContent = ({ children }) => {
7-
console.log("Layoutcontent")
8-
97
return (
108
<div
119
style={{
@@ -20,7 +18,6 @@ const LayoutContent = ({ children }) => {
2018

2119
export default function ({ children }) {
2220
const { appConfig } = useConfig()
23-
console.log("Layout container");
2421
return (
2522
<React.Fragment>
2623
<MenuProvider appConfig={appConfig}>

‎packages/bootstrap-shell/src/containers/Page/Page.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,6 @@ const Page = ({
1414
headerTitle = brand
1515
}
1616

17-
console.log("Page");
18-
1917
return (
2018
<React.Fragment>
2119
<Menu brand={headerTitle} />

‎packages/bootstrap-shell/src/styles/custom-bootstrap.css‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/*
2+
xs = Extra small <576px. Max container width None (auto)
3+
sm = Small ≥576px. Max container width 540px.
4+
md = Medium ≥768px. Max container width 720px.
5+
lg = Large ≥992px. Max container width 960px.
6+
xl = Extra large ≥1200px. Max container width 1140px.
7+
*/
8+
9+
.dropdown-submenu {
10+
position: relative;
11+
}
12+
13+
.dropdown-submenu .dropdown-menu[data-bs-popper] {
14+
position: absolute;
15+
right: 0;
16+
top: -3px;
17+
left: 99%;
18+
}
19+
20+
.dropdown-toggle {
21+
padding: 0.25rem 1rem !important;
22+
}

0 commit comments

Comments
 (0)