Skip to content

Commit

Permalink
navigation menu linking to sections
Browse files Browse the repository at this point in the history
  • Loading branch information
izabela.horodenska committed Apr 18, 2024
1 parent d5e3dbe commit 37ee43d
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 41 deletions.
13 changes: 13 additions & 0 deletions styleguide/js/script.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,17 @@
document.addEventListener('DOMContentLoaded', function () {
const navLinks = document.querySelectorAll('.ls-sidebar-element');

navLinks.forEach(function (link) {
link.addEventListener('click', function (event) {
const targetId = link.getAttribute('href').substring(1);
const targetElement = document.getElementById(targetId);

if (targetElement) {
event.preventDefault();
targetElement.scrollIntoView({ behavior: 'smooth' });
}
});
});
const xhr = new XMLHttpRequest();
console.log(xhr);
xhr.onreadystatechange = function () {
Expand Down
41 changes: 18 additions & 23 deletions styleguide/main.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,9 @@

<!-- Button container -->

<div class="theme-content-category">
<div class="theme-content-category" id="buttons">
<div class="i-library theme-content-element">
<h1 class="display-4 theme-content-element-title">Button</h1>
<h1 class="display-4 theme-content-element-title">Buttons</h1>
<div class="theme-content-element-description">
<p>Button / Anchor element.</p>
<p>Default button size is <strong>l</strong>.
Expand Down Expand Up @@ -102,7 +102,7 @@ <h5 class="i-example__heading">Example</h5>
</div>

<!-- Colors container -->
<div class="theme-content-category">
<div class="theme-content-category" id="colors">
<div class="i-library theme-content-element">
<h1 class="display-4 theme-content-element-title">Colors</h1>
<div class="theme-content-element-description">
Expand Down Expand Up @@ -218,8 +218,7 @@ <h3 class="bm-lsg-colors__group-headline">Neutral</h3>

<!-- Grid container -->


<div class="i-library theme-content-element">
<div class="i-library theme-content-element" id="grid">
<h1 class="display-4 theme-content-element-title">Grid</h1>
<div class="theme-content-element-description">
<h3>Grid-Item-Container</h3>
Expand Down Expand Up @@ -254,12 +253,12 @@ <h3>Grid-Item-Container</h3>
</tr>
</tbody></table>

</div>
</div>
</div>

<!-- Icons container -->

<div class="i-library theme-content-element">
<div class="i-library theme-content-element" id="icons">
<h1 class="display-4 theme-content-element-title">Icons</h1>
<div class="theme-content-element-description">
<p><strong>This is a list of all icons used in project.</strong></p>
Expand Down Expand Up @@ -300,7 +299,7 @@ <h5 class="i-example__heading">Example</h5>

<!-- Typography container -->

<div class="i-library theme-content-element">
<div class="i-library theme-content-element" id="typography">
<h1 class="display-4 theme-content-element-title">Typography</h1>
<div class="theme-content-element-description">
<div class="i-example">
Expand Down Expand Up @@ -445,7 +444,7 @@ <h6 class="stl-h6--upper-semibold">
</div>
<!-- Image container -->

<div class="i-library theme-content-element">
<div class="i-library theme-content-element" id="image">
<h1 class="display-4 theme-content-element-title">Image</h1>
<div class="theme-content-element-description">
<p><strong>Generic image element.</strong></p>
Expand All @@ -470,7 +469,7 @@ <h5 class="i-example__heading">Example</h5>
</div>
</div>
<!-- Link container -->
<div class="i-library theme-content-element">
<div class="i-library theme-content-element" id="link">
<h1 class="display-4 theme-content-element-title">Link</h1>
<div class="theme-content-element-description">
<div class="i-example">
Expand All @@ -482,7 +481,7 @@ <h5 class="i-example__heading">Example</h5>
</div>
</div>
<!-- Media container -->
<div class="i-library theme-content-element">
<div class="i-library theme-content-element" id="media">
<h1 class="display-4 theme-content-element-title">Media</h1>
<div class="theme-content-element-description">
<div class="i-example">
Expand Down Expand Up @@ -534,8 +533,8 @@ <h2 class="bm-h6">Different Images on mobile and desktop</h2>
</div>
</div>
</div>
<!-- Footnote container -->
<div class="i-library theme-content-element">
<!-- Footnote container -->
<div class="i-library theme-content-element" id="footnote">
<h1 class="display-4 theme-content-element-title">Footnote</h1>
<div class="theme-content-element-description">
<div class="i-example">
Expand All @@ -556,7 +555,7 @@ <h5 class="i-example__heading">Example</h5>
<!-- Gradiens container -->
<!-- Banner container -->

<div class="i-library theme-content-element">
<div class="i-library theme-content-element" id="banner">
<h1 class="display-4 theme-content-element-title">Banner</h1>
<div class="theme-content-element-description">
<div class="i-example">
Expand All @@ -575,7 +574,7 @@ <h5 class="i-example__heading">Example</h5>
</div>
</div>
<!-- Features container -->
<div class="i-library theme-content-element">
<div class="i-library theme-content-element" id="features">
<h1 class="display-4 theme-content-element-title">Features</h1>
<div class="theme-content-element-description">
<div class="i-example">
Expand All @@ -600,7 +599,7 @@ <h3 id="sed-magna-finibus">Sed magna finibus</h3>
</div>
</div>
<!-- Posts container -->
<div class="i-library theme-content-element">
<div class="i-library theme-content-element" id="posts">
<h1 class="display-4 theme-content-element-title">Posts</h1>
<div class="theme-content-element-description">
<div class="i-example">
Expand Down Expand Up @@ -717,7 +716,7 @@ <h3><!--?lit$429303222$-->Running in the morning</h3> <!--?lit$429303222$-->
<!-- Counter container -->
<!-- Form container -->

<div class="i-library theme-content-element">
<div class="i-library theme-content-element" id="form">
<h1 class="display-4 theme-content-element-title">Form</h1>
<div class="theme-content-element-description">
<div class="i-example">
Expand All @@ -729,11 +728,8 @@ <h5 class="i-example__heading">Example</h5>
</div>
</div>
</div>


<!-- Table container -->

<div class="i-library theme-content-element">
<!-- Table container -->
<div class="i-library theme-content-element" id="table">
<h1 class="display-4 theme-content-element-title">Table</h1>
<div class="theme-content-element-description">
<div class="i-example">
Expand All @@ -748,7 +744,6 @@ <h5 class="i-example__heading">Example</h5>
</div>
</div>
</div>

</div>
</div>
</body>
Expand Down
36 changes: 18 additions & 18 deletions styleguide/nav.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,58 +25,58 @@ <h1>
<div class="theme-sidebar-category-title">Basics</div>
<div>
<div class="ls-sidebar-list-item">
<span class="ls-sidebar-element">Button</span>
<span href="#buttons" class="ls-sidebar-element">Button</span>
</div>
<div class="ls-sidebar-list-item">
<span class="ls-sidebar-element">Colors</span>
<span href="#colors" class="ls-sidebar-element">Colors</span>
</div>
<div class="ls-sidebar-list-item">
<span class="ls-sidebar-element">Grid</span>
<span href="#grid" class="ls-sidebar-element">Grid</span>
</div>
<div class="ls-sidebar-list-item">
<span class="ls-sidebar-element">Icons</span>
<span href="#icons" class="ls-sidebar-element">Icons</span>
</div>
<div class="ls-sidebar-list-item">
<span class="ls-sidebar-element">Typography</span>
<span href="#typography" class="ls-sidebar-element">Typography</span>
</div>
</div>
<div class="theme-sidebar-category-title">Elements</div>
<div>
<div class="ls-sidebar-list-item">
<span class="ls-sidebar-element">Image</span>
<span href="#image" class="ls-sidebar-element">Image</span>
</div>
<div class="ls-sidebar-list-item">
<span class="ls-sidebar-element">Link</span>
<span href="#link" class="ls-sidebar-element">Link</span>
</div>
<div class="ls-sidebar-list-item">
<span class="ls-sidebar-element">Media</span>
<span href="#media" class="ls-sidebar-element">Media</span>
</div>
<div class="ls-sidebar-list-item">
<span class="ls-sidebar-element">Footnote</span>
<span href="#footnote" class="ls-sidebar-element">Footnote</span>
</div>
<div class="ls-sidebar-list-item">
<span class="ls-sidebar-element">Gradients</span>
<span href="#gradients" class="ls-sidebar-element">Gradients</span>
</div>
</div>
<div class="theme-sidebar-category-title">Modules</div>
<div>
<div class="ls-sidebar-list-item">
<span class="ls-sidebar-element">Banner</span>
<span href="#banner" class="ls-sidebar-element">Banner</span>
</div>
<div class="ls-sidebar-list-item">
<span class="ls-sidebar-element">Features</span>
<span href="#features" class="ls-sidebar-element">Features</span>
</div>
<div class="ls-sidebar-list-item">
<span class="ls-sidebar-element">Posts</span>
</div>
<div class="ls-sidebar-list-item">
<span class="ls-sidebar-element">Counter</span>
<span href="#posts" class="ls-sidebar-element">Posts</span>
</div>
</div>
<div class="theme-sidebar-category-title">Components</div>
<div>
<div class="ls-sidebar-list-item">
<span class="ls-sidebar-element">Form</span>
<span href="#form" class="ls-sidebar-element">Form</span>
</div>
<div class="ls-sidebar-list-item">
<span class="ls-sidebar-element">Table</span>
<span href="#table" class="ls-sidebar-element">Table</span>
</div>
</div>
</div>
Expand Down

0 comments on commit 37ee43d

Please sign in to comment.