Skip to content

Commit 6a9b46e

Browse files
imklausanscontext
imklau
and
sanscontext
authored
feat(): Introduce sticky main menu (#1010)
* feat(): Introduce sticky main menu * fix(): Add seperate config api menu; Remove sticky styles from main navs Co-authored-by: sanscontext <[email protected]>
1 parent aa0cd13 commit 6a9b46e

File tree

11 files changed

+508
-349
lines changed

11 files changed

+508
-349
lines changed

‎src/_includes/menu/menu-config-api.html

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
<div class="sidebar sidebar--sticky sidebar--scroll sidebar--dark">
2+
<div class="sidebar__content">
3+
<nav class="menu">
4+
<ul class="menu__list list list--unstyle">
5+
<li class="menu-item">
6+
<a href="{{ site.baseurl }}/" class="menu-item__link menu-item__link--small menu-item__link--highlight menu-item__link--icon flex flex--middle">
7+
<div class="menu-item__icon flex__column">
8+
{% include icons/menu/icon-back.svg %}
9+
</div>
10+
11+
<div class="flex__column">Back to Documentation</div>
12+
</a>
13+
</li>
14+
</ul>
15+
</nav>
16+
17+
<nav class="menu">
18+
<ul class="menu__list list list--unstyle">
19+
<li class="menu-item menu-item--active">
20+
<button class="menu-item__link menu-item__link--highlight menu-item__link--icon flex flex--middle">
21+
<span class="menu-item__icon flex__column">
22+
{% include icons/menu/icon-config-api.svg %}
23+
</span>
24+
25+
<span class="flex__column">{{ site.data.sidenav.api.sections[0].section_title }}</span>
26+
</button>
27+
28+
<ul class="menu-item__body">
29+
{% for item in site.data.sidenav.api.sections[0].section %}
30+
{% assign currentPage = page.path | downcase | replace: "/index.md" "" | replace: ".md" "" %}
31+
{% assign currentPath = item.path | downcase | replace_first: "/" "" %}
32+
33+
{% assign currentSectionPage = page.path | downcase | split: "/" %}
34+
{% assign currentSectionPath = item.slug | downcase %}
35+
{% capture currentSectionSlug %}{{ currentSectionPage[0] | downcase }}/{{ currentSectionPage[1] | downcase }}{% endcapture %}
36+
37+
<li class="menu-item {% if item.section_title %}menu-item--gray{% else %}menu-item--green{% endif %} {% if currentPage == currentPath %}menu-item--active menu-item--indicator{% endif %}" data-accordion data-class-active="menu-item--active">
38+
{% if item.path %}
39+
{% assign menuLink = site.baseurl | append: item.path | append: "/" %}
40+
{% if item.path contains "http://" or item.path contains "https://"%}
41+
{% assign menuLink = item.path %}
42+
{% endif %}
43+
<a class="menu-item__link {% if currentPage == currentPath or currentSectionSlug == currentSectionPath %}menu-item__link--indicator-large{% endif %} flex" href="{{ menuLink }}">{{ item.title }}</a>
44+
{% endif %}
45+
46+
{% if item.section_title %}
47+
<button class="menu-item__link flex flex--middle flex--justify gutter gutter--small" data-ref="accordion[trigger]">
48+
<span class="flex__column">
49+
{{ item.section_title }}
50+
</span>
51+
52+
<div class="menu-item__chevron flex__column flex__column--shrink">
53+
{% include icons/symbols/chevron-down.svg %}
54+
</div>
55+
</button>
56+
57+
<ul class="menu-item__body menu-item__body--nested" data-ref="accordion[body]">
58+
{% for subsection in item.section %}
59+
{% assign currentPage = page.path | downcase | replace: "/index.md" "" | replace: ".md" "" %}
60+
{% assign currentPath = subsection.path | downcase | replace_first: "/" "" %}
61+
62+
<li class="menu-item {% if currentPage == currentPath %}menu-item--active menu-item--indicator{% endif %}" data-accordion data-class-active="menu-item--active">
63+
{% if subsection.path %}
64+
{% assign menuLink = site.baseurl | append: subsection.path | append: "/" %}
65+
{% if subsection.path contains "http://" or subsection.path contains "https://"%}
66+
{% assign menuLink = subsection.path %}
67+
{% endif %}
68+
<a class="menu-item__link menu-item__link--icon {% if currentPage == currentPath %}menu-item__link--indicator{% endif %} flex" href="{{menuLink}}">
69+
{{ subsection.title }}
70+
{% if subsection.menu_icon %}
71+
<div class="menu-item__icon menu-item__icon--small menu-item__icon--right flex__column">
72+
{% include icons/menu/icon-{{ subsection.menu_icon }}.svg %}
73+
</div>
74+
{% endif %}
75+
</a>
76+
{% endif %}
77+
78+
{% if subsection.section_title %}
79+
<button class="menu-item__link flex flex--middle flex--justify gutter gutter--small" data-ref="accordion[trigger]">
80+
<span class="flex__column">
81+
{{ subsection.section_title }}
82+
</span>
83+
84+
<div class="menu-item__chevron flex__column flex__column--shrink">
85+
{% include icons/symbols/chevron-down.svg %}
86+
</div>
87+
</button>
88+
89+
<ul class="menu-item__body menu-item__body--nested" data-ref="accordion[body]">
90+
{% for subsubsection in subsection.section %}
91+
{% assign currentPage = page.path | downcase | replace: "/index.md" "" | replace: ".md" "" %}
92+
{% assign currentPath = subsubsection.path | downcase | replace_first: "/" "" %}
93+
94+
<li class="menu-item">
95+
<a class="menu-item__link flex" href="{{ site.baseurl }}{{ subsubsection.path }}/">{{ subsubsection.title }}</a>
96+
</li>
97+
{% endfor %}
98+
</ul>
99+
{% endif %}
100+
</li>
101+
{% endfor %}
102+
</ul>
103+
{% endif %}
104+
</li>
105+
{% endfor %}
106+
</ul>
107+
</li>
108+
</ul>
109+
</nav>
110+
</div>
111+
</div>

‎src/_includes/menu/menu-destination.html

Lines changed: 47 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -3,51 +3,53 @@
33
{% assign currentIntegration = site.data.catalog.destinations.items | where: "slug", currentSlug | first %}
44

55
<div class="sidebar sidebar--dark">
6-
<nav class="menu">
7-
<ul class="menu__list list list--unstyle">
8-
<li class="menu-item menu-item--separated">
9-
<a href="{{ site.baseurl }}/connections/destinations/catalog/" class="menu-item__link menu-item__link--small menu-item__link--highlight menu-item__link--icon flex flex--middle">
10-
<div class="menu-item__icon flex__column">
11-
{% include icons/menu/icon-back.svg %}
12-
</div>
13-
14-
<div class="flex__column">Back to Connections</div>
15-
</a>
16-
</li>
17-
</ul>
18-
</nav>
19-
20-
<nav class="menu menu--compact">
21-
<ul class="menu__list list list--unstyle">
22-
{% assign categories = site.data.catalog.destination_categories.items %}
23-
24-
{% for category in categories %}
25-
{% assign integrations = site.data.catalog.destinations.items | where: "categories", category.display_name %}
26-
27-
<li class="menu-item menu-item--gray menu-item--compact" data-accordion data-class-active="menu-item--active">
28-
<button class="menu-item__link flex flex--middle flex--justify" data-ref="accordion[trigger]">
29-
<span class="flex__column">
30-
{{ category.display_name }}
31-
</span>
32-
33-
<div class="menu-item__chevron flex__column flex__column--shrink">
34-
{% include icons/symbols/chevron-down.svg %}
6+
<div class="sidebar__content">
7+
<nav class="menu">
8+
<ul class="menu__list list list--unstyle">
9+
<li class="menu-item">
10+
<a href="{{ site.baseurl }}/connections/destinations/catalog/" class="menu-item__link menu-item__link--small menu-item__link--highlight menu-item__link--icon flex flex--middle">
11+
<div class="menu-item__icon flex__column">
12+
{% include icons/menu/icon-back.svg %}
3513
</div>
36-
</button>
37-
38-
<ul class="menu-item__body" data-ref="accordion[body]">
39-
{% for integration in integrations %}
40-
{% if integration.hidden != true %}
41-
<li class="menu-item menu-item--compact">
42-
<a href="{{ site.baseurl }}/{{ integration.url }}/" class="menu-item__link">
43-
{{ integration.display_name }}
44-
</a>
45-
</li>
46-
{% endif %}
47-
{% endfor %}
48-
</ul>
14+
15+
<div class="flex__column">Back to Connections</div>
16+
</a>
4917
</li>
50-
{% endfor %}
51-
</ul>
52-
</nav>
18+
</ul>
19+
</nav>
20+
21+
<nav class="menu menu--compact">
22+
<ul class="menu__list list list--unstyle">
23+
{% assign categories = site.data.catalog.destination_categories.items %}
24+
25+
{% for category in categories %}
26+
{% assign integrations = site.data.catalog.destinations.items | where: "categories", category.display_name %}
27+
28+
<li class="menu-item menu-item--gray menu-item--compact" data-accordion data-class-active="menu-item--active">
29+
<button class="menu-item__link flex flex--middle flex--justify" data-ref="accordion[trigger]">
30+
<span class="flex__column">
31+
{{ category.display_name }}
32+
</span>
33+
34+
<div class="menu-item__chevron flex__column flex__column--shrink">
35+
{% include icons/symbols/chevron-down.svg %}
36+
</div>
37+
</button>
38+
39+
<ul class="menu-item__body" data-ref="accordion[body]">
40+
{% for integration in integrations %}
41+
{% if integration.hidden != true %}
42+
<li class="menu-item menu-item--compact">
43+
<a href="{{ site.baseurl }}/{{ integration.url }}/" class="menu-item__link">
44+
{{ integration.display_name }}
45+
</a>
46+
</li>
47+
{% endif %}
48+
{% endfor %}
49+
</ul>
50+
</li>
51+
{% endfor %}
52+
</ul>
53+
</nav>
54+
</div>
5355
</div>

‎src/_includes/menu/menu-glossary.html

Lines changed: 40 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,42 @@
11
<div class="sidebar sidebar--dark">
2-
<nav class="menu">
3-
<ul class="menu__list list list--unstyle">
4-
<li class="menu-item menu-item--separated">
5-
<a class="menu-item__link menu-item__link--small menu-item__link--highlight menu-item__link--icon flex flex--middle" href="{{ site.baseurl }}/">
6-
<div class="menu-item__icon flex__column">
7-
{% include icons/menu/icon-back.svg %}
8-
</div>
9-
10-
<div class="flex__column">Back to Documentation</div>
11-
</a>
12-
</li>
13-
</ul>
14-
</nav>
15-
<nav class="menu">
16-
<ul class="menu__list list list--unstyle">
17-
<li class="menu-item menu-item--active">
18-
<button class="menu-item__link menu-item__link--highlight menu-item__link--icon flex flex--middle">
19-
<span class="menu-item__icon flex__column">
20-
{% include icons/menu/icon-home.svg %}
21-
</span>
22-
23-
<span class="flex__column">Glossary</span>
24-
</button>
25-
26-
{% if site.data.glossary %}
27-
<ul class="menu-item__body">
28-
{% for item in site.data.glossary %}
29-
<li class="menu-item menu-item--gray">
30-
{% if item[0] %}
31-
<a class="menu-item__link flex" href="{{ site.baseurl }}{{ page.url }}#{{ item[0] | slugify }}">{{ item[0] }}</a>
32-
{% endif %}
33-
</li>
34-
{% endfor %}
35-
</ul>
36-
{% endif %}
37-
</li>
38-
</ul>
39-
</nav>
2+
<div class="sidebar__content">
3+
<nav class="menu">
4+
<ul class="menu__list list list--unstyle">
5+
<li class="menu-item">
6+
<a class="menu-item__link menu-item__link--small menu-item__link--highlight menu-item__link--icon flex flex--middle" href="{{ site.baseurl }}/">
7+
<div class="menu-item__icon flex__column">
8+
{% include icons/menu/icon-back.svg %}
9+
</div>
10+
11+
<div class="flex__column">Back to Documentation</div>
12+
</a>
13+
</li>
14+
</ul>
15+
</nav>
16+
<nav class="menu">
17+
<ul class="menu__list list list--unstyle">
18+
<li class="menu-item menu-item--active">
19+
<button class="menu-item__link menu-item__link--highlight menu-item__link--icon flex flex--middle">
20+
<span class="menu-item__icon flex__column">
21+
{% include icons/menu/icon-home.svg %}
22+
</span>
23+
24+
<span class="flex__column">Glossary</span>
25+
</button>
26+
27+
{% if site.data.glossary %}
28+
<ul class="menu-item__body">
29+
{% for item in site.data.glossary %}
30+
<li class="menu-item menu-item--gray">
31+
{% if item[0] %}
32+
<a class="menu-item__link flex" href="{{ site.baseurl }}{{ page.url }}#{{ item[0] | slugify }}">{{ item[0] }}</a>
33+
{% endif %}
34+
</li>
35+
{% endfor %}
36+
</ul>
37+
{% endif %}
38+
</li>
39+
</ul>
40+
</nav>
41+
</div>
4042
</div>

0 commit comments

Comments
 (0)