Skip to content

Commit

Permalink
Flyout orientation, multi-collapse
Browse files Browse the repository at this point in the history
  • Loading branch information
@mattsharkey
mattsharkey committed Mar 29, 2024
1 parent 0513b5a commit 5b56b99
Show file tree
Hide file tree
Showing 6 changed files with 222 additions and 97 deletions.
9 changes: 8 additions & 1 deletion src/il-main-nav/il-main-nav.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
--il-nav-section-indicator-padding-left: .5rem;
--il-nav-section-link-padding-right: .5rem;
--il-nav-section-items-position: absolute;
--il-nav-section-items-width: 20rem;
--il-nav-section-items-width: 15rem;
--il-nav-section-background: var(--il-cloud-1);
--il-nav-item-background: var(--il-cloud-1);
--il-nav-item-border-color: white;
Expand All @@ -66,6 +66,13 @@
--il-nav-section-indicator-transform: rotate(-90deg);
--il-nav-expanded-section-indicator-transform: rotate(-90deg);
}
il-nav-section[data-dir="right"],
il-nav-section-with-link[data-dir="right"] {
--il-nav-section-items-left: auto;
--il-nav-section-items-right: 100%;
--il-nav-section-indicator-transform: rotate(90deg);
--il-nav-expanded-section-indicator-transform: rotate(90deg);
}
> ul {
display: flex;
flex-direction: row;
Expand Down
5 changes: 2 additions & 3 deletions src/il-main-nav/il-main-nav.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,7 @@ export class MainNavigation extends LitElement {
}

collapseSection(section) {
section.expanded = false;
section.setAttribute('data-expanded', false);
section.setAttribute('data-current', false);
this.expandSection(section.getParentSection());
}

collapseAllSections() {
Expand All @@ -47,6 +45,7 @@ export class MainNavigation extends LitElement {
s.expanded = s.contains(section);
s.setAttribute('data-expanded', s.expanded ? 'true' : 'false');
s.setAttribute('data-current', isCurrent ? 'true' : 'false');
if (s.expanded) s.setDirection();
});
}

Expand Down
4 changes: 4 additions & 0 deletions src/il-main-nav/il-main-nav.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,10 @@ test('navigation sections have a data-dir attribute after load', async ({page})

test('navigation sections orient themselves', async ({page}) => {
await page.goto('il-main-nav/samples/with-section-links.html');
await page.evaluate(() => {
const section = document.querySelector('*[data-testid="fifth-level-section"]');
document.querySelector('il-main-nav').expandSection(section);
})
const fifthLevelSectionDirection = await page.evaluate(() => {
return document.querySelector('*[data-testid="fifth-level-section"]').getAttribute('data-dir');
})
Expand Down
259 changes: 179 additions & 80 deletions src/il-main-nav/samples/six-levels.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,117 +4,216 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="https://cdn.brand.illinois.edu/favicon.ico">
<link rel="stylesheet" href="../../toolkit.css">

<link rel="stylesheet" href="../../il-header/il-header.css">
<script src="../../il-header/il-header.js" type="module"></script>

<link rel="stylesheet" href="../../il-nav-section/il-nav-section.css">
<script src="../../il-nav-section/il-nav-section.js" type="module"></script>

<link rel="stylesheet" href="../../il-page/il-page.css">
<script src="../../il-page/il-page.js" type="module"></script>

<link rel="stylesheet" href="../il-main-nav.css">
<script src="../il-main-nav.js" type="module"></script>
<script src="../../toolkit.js" type="module"></script>

<il-page>
<il-header slot="header" data-compact="true">
<il-main-nav slot="navigation">
<ul>
<li>
<a href="/">Item 1A</a>
<il-nav-section-with-link data-testid="first-top-level-section">
<a slot="link" href="#" data-testid="first-top-level-section-link">Galena</a>
<ul data-testid="first-top-level-section-contents">
<li><a href="#">Copper</a></li>
<li>
<il-nav-section-with-link>
<a slot="link" href="#">Marcasite</a>
<ul>
<li><a href="#">Melanterite</a></li>
<li>
<il-nav-section-with-link>
<a slot="link" href="#">Calcite</a>
<ul>
<li><a href="#">Barite</a></li>
<li>
<il-nav-section-with-link>
<a slot="link" href="#">Cerussite</a>
<ul>
<li><a href="#">Siderite</a></li>
<li>
<il-nav-section-with-link data-testid="fifth-level-section">
<a slot="link" href="#">Smithsonite</a>
<ul>
<li><a href="#">Amphibole</a></li>
<li><a href="#">Pyroxene</a></li>
<li><a href="#">Feldspar</a></li>
</ul>
</il-nav-section-with-link>
</li>
<li><a href="#">Sphalerite</a></li>
<li><a href="#">Fluorite</a></li>
</ul>
</il-nav-section-with-link>
</li>
<li><a href="#">Witherite</a></li>
<li><a href="#">Dolomite</a></li>
</ul>
</il-nav-section-with-link>
</li>
<li><a href="#">Muscovite</a></li>
<li><a href="#">Biotite</a></li>
</ul>
</il-nav-section-with-link>
</li>
<li><a href="#">Limonite</a></li>
<li><a href="#">Pyrite</a></li>
</ul>
</il-nav-section-with-link>
</li>
<li>
<il-nav-section data-expanded="true">
<span slot="label">Item 1B</span>
<il-nav-section-with-link>
<a slot="link" href="#">Chalcedony</a>
<ul>
<li><a href="#">Copper</a></li>
<li>
<a href="/">Item 2A</a>
</li>
<li>
<il-nav-section data-expanded="true">
<span slot="label">Item 2B</span>
<il-nav-section-with-link>
<a slot="link" href="#">Marcasite</a>
<ul>
<li><a href="#">Melanterite</a></li>
<li>
<a href="/">Item 3A</a>
</li>
<li>
<il-nav-section data-expanded="true">
<span slot="label">Item 3B</span>
<il-nav-section-with-link>
<a slot="link" href="#">Calcite</a>
<ul>
<li><a href="#">Barite</a></li>
<li>
<a href="/">Item 4A</a>
</li>
<li>
<il-nav-section data-expanded="true">
<span slot="label">Item 4B</span>
<il-nav-section-with-link>
<a slot="link" href="#">Cerussite</a>
<ul>
<li><a href="#">Siderite</a></li>
<li>
<a href="/">Item 5A</a>
</li>
<li>
<il-nav-section data-expanded="true">
<span slot="label">Item 5B</span>
<il-nav-section-with-link>
<a slot="link" href="#">Smithsonite</a>
<ul>
<li>
<a href="/">Item 6A</a>
</li>
<li>
<a href="/">Item 6B</a>
</li>
<li>
<a href="/">Item 6C</a>
</li>
<li>
<a href="/">Item 6D</a>
</li>
<li><a href="#">Amphibole</a></li>
<li><a href="#">Pyroxene</a></li>
<li><a href="#">Feldspar</a></li>
</ul>
</il-nav-section>
</li>
<li>
<a href="/">Item 5C</a>
</li>
<li>
<a href="/">Item 5D</a>
</il-nav-section-with-link>
</li>
<li><a href="#">Sphalerite</a></li>
<li><a href="#">Fluorite</a></li>
</ul>
</il-nav-section>
</li>
<li>
<a href="/">Item 4C</a>
</li>
<li>
<a href="/">Item 4D</a>
</il-nav-section-with-link>
</li>
<li><a href="#">Witherite</a></li>
<li><a href="#">Dolomite</a></li>
</ul>
</il-nav-section>
</li>
<li>
<a href="/">Item 3C</a>
</li>
<li>
<a href="/">Item 3D</a>
</il-nav-section-with-link>
</li>
<li><a href="#">Muscovite</a></li>
<li><a href="#">Biotite</a></li>
</ul>
</il-nav-section>
</li>
<li>
<a href="/">Item 2C</a>
</li>
<li>
<a href="/">Item 2D</a>
</il-nav-section-with-link>
</li>
<li><a href="#">Limonite</a></li>
<li><a href="#">Pyrite</a></li>
</ul>
</il-nav-section>
</il-nav-section-with-link>
</li>
<li>
<a href="/">Item 1C</a>
<il-nav-section-with-link data-testid="second-to-last-top-level-section">
<a slot="link" href="#">Quartzite</a>
<ul>
<li><a href="#">Copper</a></li>
<li>
<il-nav-section-with-link>
<a slot="link" href="#">Marcasite</a>
<ul>
<li><a href="#">Melanterite</a></li>
<li>
<il-nav-section-with-link>
<a slot="link" href="#">Calcite</a>
<ul>
<li><a href="#">Barite</a></li>
<li>
<il-nav-section-with-link>
<a slot="link" href="#">Cerussite</a>
<ul>
<li><a href="#">Siderite</a></li>
<li>
<il-nav-section-with-link>
<a slot="link" href="#">Smithsonite</a>
<ul>
<li><a href="#">Amphibole</a></li>
<li><a href="#">Pyroxene</a></li>
<li><a href="#">Feldspar</a></li>
</ul>
</il-nav-section-with-link>
</li>
<li><a href="#">Sphalerite</a></li>
<li><a href="#">Fluorite</a></li>
</ul>
</il-nav-section-with-link>
</li>
<li><a href="#">Witherite</a></li>
<li><a href="#">Dolomite</a></li>
</ul>
</il-nav-section-with-link>
</li>
<li><a href="#">Muscovite</a></li>
<li><a href="#">Biotite</a></li>
</ul>
</il-nav-section-with-link>
</li>
<li><a href="#">Limonite</a></li>
<li><a href="#">Pyrite</a></li>
</ul>
</il-nav-section-with-link>
</li>
<li>
<a href="/">Item 1D</a>
<il-nav-section-with-link data-testid="last-top-level-section">
<a slot="link" href="#" data-testid="last-top-level-section-link">Siltstone</a>
<ul>
<li><a href="#">Copper</a></li>
<li>
<il-nav-section-with-link>
<a slot="link" href="#">Marcasite</a>
<ul>
<li><a href="#">Melanterite</a></li>
<li>
<il-nav-section-with-link>
<a slot="link" href="#">Calcite</a>
<ul>
<li><a href="#">Barite</a></li>
<li>
<il-nav-section-with-link>
<a slot="link" href="#">Cerussite</a>
<ul>
<li><a href="#">Siderite</a></li>
<li>
<il-nav-section-with-link>
<a slot="link" href="#">Smithsonite</a>
<ul>
<li><a href="#">Amphibole</a></li>
<li><a href="#">Pyroxene</a></li>
<li><a href="#">Feldspar</a></li>
</ul>
</il-nav-section-with-link>
</li>
<li><a href="#">Sphalerite</a></li>
<li><a href="#">Fluorite</a></li>
</ul>
</il-nav-section-with-link>
</li>
<li><a href="#">Witherite</a></li>
<li><a href="#">Dolomite</a></li>
</ul>
</il-nav-section-with-link>
</li>
<li><a href="#">Muscovite</a></li>
<li><a href="#">Biotite</a></li>
</ul>
</il-nav-section-with-link>
</li>
<li><a href="#">Limonite</a></li>
<li><a href="#">Pyrite</a></li>
</ul>
</il-nav-section-with-link>
</li>
</ul>
</il-main-nav>
</il-header>
</il-page>
<main slot="main">
<h1>Main navigation with six levels</h1>
</main>
</il-page>
Loading

0 comments on commit 5b56b99

Please sign in to comment.