Skip to content

Commit

Permalink
new design and logic for the menu expressjs#1590 (expressjs#1568)
Browse files Browse the repository at this point in the history 
* feat: drop dropi

* fix theme position

* merge menu.css to style.css

* remove unused class

* improve menu styles

* fix dark mode

* remove padding in logo

* add support lts link

* adapt headers in other langs

* adapt other langs

* revert remove ismobile.js

* improve styles

* fix dark mode subcontent

* fix translate subcontent

* fix dark mode in mobile

* fix nav space

* fix errors in chrome

* small styles

* add optional chaining

* small changes

* improve submenu logic

* remove some !important

* remove some !important

* fix hover

* Revert "add optional chaining"

This reverts commit f3e40af.

* fix mobile detect

* small fix

* remove $

* update style.css

* improve layout
  • Loading branch information
@bjohansebas
bjohansebas authored and Chris Del committed Nov 3, 2024
1 parent f4c9b15 commit 966e43b
Show file tree
Hide file tree
Showing 26 changed files with 636 additions and 1,074 deletions.
5 changes: 2 additions & 3 deletions _includes/head.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
<script data-cfasync="false" src="/js/theme.js"></script>
<link rel="stylesheet" href="/css/dark-theme.css?_={{ site.time | date: '%s' }}">
<link rel="stylesheet" href="/css/style.css?_={{ site.time | date: '%s' }}">
<link rel="stylesheet" href="/css/dropit.css">
<link rel="stylesheet" href="/css/prism.css">
<link rel="stylesheet" href="/css/font-awesome.min.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;amp;subset=latin,latin-ext">
Expand All @@ -32,8 +31,8 @@
<script data-cfasync="false" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-cfasync="false" src="/js/ismobile.js"></script>
<script data-cfasync="false" src="/js/app.js"></script>
<script data-cfasync="false" src="/js/retina.js"></script>
<script data-cfasync="false" src="/js/dropit.js"></script>
<script data-cfasync="false" defer src="/js/menu.js"></script>
<script data-cfasync="false" src="/js/retina.js"></script>
<script data-cfasync="false" src="/js/prism.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />

Expand Down
57 changes: 20 additions & 37 deletions _includes/header/header-de.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,9 @@
<input id="q" placeholder="🔎 search">
<ul id="navmenu">
<li><a href="/{{ page.lang }}/" id="home-menu"{% if page.menu == 'home' %} class="active"{% endif %}>Home</a></li>
<li>
<ul id="getting-started-menu" class="menu">
<li><a href="/{{ page.lang }}/starter/installing.html"{% if page.menu == 'starter' %} class="active"{% endif %}>Einführung</a>
<ul>
<li id="getting-started-menu" class="submenu">
<a href="/{{ page.lang }}/starter/installing.html"{% if page.menu == 'starter' %} class="active"{% endif %}>Einführung</a>
<ul class="submenu-content">
<li>
<a href="/{{ page.lang }}/starter/installing.html">
Installation
Expand Down Expand Up @@ -40,15 +39,12 @@
<li>
<a href="/{{ page.lang }}/starter/faq.html">
Häufig gestellte Fragen</a>
</li>
</li>
</ul>
</li>
</ul>
</li>
<li>
<ul id="guide-menu" class="menu">
<li><a href="/{{ page.lang }}/guide/routing.html"{% if page.menu == 'guide' %} class="active"{% endif %}>Leitfaden</a>
<ul>
<li id="guide-menu" class="submenu">
<a href="/{{ page.lang }}/guide/routing.html"{% if page.menu == 'guide' %} class="active"{% endif %}>Leitfaden</a>
<ul class="submenu-content">
<li><a href="/{{ page.lang }}/guide/routing.html">Routing</a>
</li>
<li><a href="/{{ page.lang }}/guide/writing-middleware.html">Middleware schreiben</a>
Expand All @@ -70,13 +66,10 @@
<li><a href="/{{ page.lang }}/guide/database-integration.html">Datenbankintegration</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<ul id="application-menu" class="menu">
<li><a href="/{{ page.lang }}/5x/api.html"{% if page.menu == 'api' %} class="active"{% endif %}>API-Referenz</a>
<ul>
<li id="application-menu" class="submenu">
<a href="/{{ page.lang }}/5x/api.html"{% if page.menu == 'api' %} class="active"{% endif %}>API-Referenz</a>
<ul class="submenu-content">
<li><a href="/{{ page.lang }}/5x/api.html">5.x</a>
</li>
<li><a href="/{{ page.lang }}/4x/api.html">4.x</a>
Expand All @@ -86,45 +79,35 @@
<li><a href="/2x/">2.x (veraltet)</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<ul id="advanced-topics-menu" class="menu">
<li><a href="/{{ page.lang }}/advanced/developing-template-engines.html"{% if page.menu == 'advanced' %} class="active"{% endif %}>Themen für Fortgeschrittene</a>
<ul>
<li id="advanced-topics-menu" class="submenu">
<a href="/{{ page.lang }}/advanced/developing-template-engines.html"{% if page.menu == 'advanced' %} class="active"{% endif %}>Themen für Fortgeschrittene</a>
<ul class="submenu-content">
<li><a href="/{{ page.lang }}/advanced/developing-template-engines.html">Template-Engines</a>
</li>

<li><a href="/{{ page.lang }}/advanced/security-updates.html">Sicherheitsupdates</a>
</li>
<li><a href="/{{ page.lang }}/advanced/best-practice-security.html">Sicherheitsspezifische Best Practices</a>
</li>
<li><a href="/{{ page.lang }}/advanced/best-practice-performance.html">Leistungsspezifische Best Practices</a>
</li>

</ul>
</li>
</ul>
</li>
<li>
<ul id="resources-menu" class="menu">
<li><a href="/{{ page.lang }}/resources/glossary.html"{% if page.menu == 'resources' %} class="active"{% endif %}>Ressourcen</a>
<ul>
<li id="resources-menu" class="submenu">
<a href="/{{ page.lang }}/resources/glossary.html"{% if page.menu == 'resources' %} class="active"{% endif %}>Ressourcen</a>
<ul class="submenu-content">
<li><a href="/{{ page.lang }}/resources/glossary.html">Glossar</a>
</li>
<li><a href="/{{ page.lang }}/resources/middleware.html">Middleware</a>
</li>
<li><a href="/{{ page.lang }}/resources/community.html">Community</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
<i class="fa fa-moon-o fa-2x hidden-dark"></i>
<span class="sun-icon hidden-light"></span>
</div>
</div>
<div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
<i class="fa fa-moon-o fa-2x hidden-dark"></i>
<span class="sun-icon hidden-light"></span>
</div>
</header>
75 changes: 23 additions & 52 deletions _includes/header/header-en.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,9 @@
<input id="q" placeholder="🔎 search">
<ul id="navmenu">
<li><a href="/" id="home-menu"{% if page.menu == 'home' %} class="active"{% endif %}>Home</a></li>
<li>
<ul id="getting-started-menu" class="menu">
<li><a href="/{{ page.lang }}/starter/installing.html"{% if page.menu == 'starter' %} class="active"{% endif %}>Getting started</a>
<ul>
<li id="getting-started-menu" class="submenu">
<a href="/{{ page.lang }}/starter/installing.html"{% if page.menu == 'starter' %} class="active"{% endif %}>Getting started</a>
<ul class="submenu-content">
<li>
<a href="/{{ page.lang }}/starter/installing.html">
Installing
Expand Down Expand Up @@ -48,13 +47,10 @@
</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<ul id="guide-menu" class="menu">
<li><a href="/{{ page.lang }}/guide/routing.html"{% if page.menu == 'guide' %} class="active"{% endif %}>Guide</a>
<ul>
<li id="guide-menu" class="submenu">
<a href="/{{ page.lang }}/guide/routing.html"{% if page.menu == 'guide' %} class="active"{% endif %}>Guide</a>
<ul class="submenu-content">
<li><a href="/{{ page.lang }}/guide/routing.html">Routing</a>
</li>
<li><a href="/{{ page.lang }}/guide/writing-middleware.html">Writing middleware</a>
Expand All @@ -78,13 +74,10 @@
<li><a href="/{{ page.lang }}/guide/database-integration.html">Database integration</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<ul id="application-menu" class="menu">
<li><a href="/{{ page.lang }}/5x/api.html"{% if page.menu == 'api' %} class="active"{% endif %}>API reference</a>
<ul>
<li id="application-menu" class="submenu">
<a href="/{{ page.lang }}/5x/api.html"{% if page.menu == 'api' %} class="active"{% endif %}>API reference</a>
<ul class="submenu-content">
<li><a href="/{{ page.lang }}/5x/api.html">5.x</a>
</li>
<li><a href="/{{ page.lang }}/4x/api.html">4.x</a>
Expand All @@ -94,13 +87,10 @@
<li><a href="/2x/">2.x (deprecated)</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<ul id="advanced-topics-menu" class="menu">
<li><a href="/{{ page.lang }}/advanced/developing-template-engines.html"{% if page.menu == 'advanced' %} class="active"{% endif %}>Advanced topics</a>
<ul>
<li id="advanced-topics-menu" class="submenu">
<a href="/{{ page.lang }}/advanced/developing-template-engines.html"{% if page.menu == 'advanced' %} class="active"{% endif %}>Advanced topics</a>
<ul class="submenu-content">
<li><a href="/{{ page.lang }}/advanced/developing-template-engines.html">Building template engines</a>
</li>
<li><a href="/{{ page.lang }}/advanced/security-updates.html">Security updates</a>
Expand All @@ -112,13 +102,10 @@
<li><a href="/{{ page.lang }}/advanced/healthcheck-graceful-shutdown.html">Health checks & shutdown</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<ul id="resources-menu" class="menu">
<li><a href="/{{ page.lang }}/resources/glossary.html"{% if page.menu == 'resources' %} class="active"{% endif %}>Resources</a>
<ul>
<li id="resources-menu" class="submenu">
<a href="/{{ page.lang }}/resources/glossary.html"{% if page.menu == 'resources' %} class="active"{% endif %}>Resources</a>
<ul class="submenu-content">
<li>
<a href="/{{ page.lang }}/resources/community.html">Community</a>
</li>
Expand All @@ -138,14 +125,11 @@
<a href="/{{ page.lang }}/changelog/4x.html">Release Change Log</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="/{{ page.lang }}/support" id="support-menu"{% if page.menu == 'support' %} class="active"{% endif %}>Support</a></li>
<li>
<ul id="blog-menu" class="menu">
<li><a href="{{site.posts.first.url}}"{% if page.menu == 'blog' %} class="active"{% endif %}>Blog</a>
<ul>
<li id="blog-menu" class="submenu">
<a href="{{site.posts.first.url}}"{% if page.menu == 'blog' %} class="active"{% endif %}>Blog</a>
<ul class="submenu-content">
<li>
<a href="{{site.posts.first.url}}">Latest post</a>
</li>
Expand All @@ -157,23 +141,10 @@
</li>
</ul>
</li>
</ul>
</li>
<!--
<li>
<ul id="changelog-menu" class="menu">
<li><a href="/{{ page.lang }}/changelog/4x.html"{% if page.menu == 'changelog' %} class="active"{% endif %}>Changelog</a>
<ul>
<li><a href="/{{ page.lang }}/changelog/4x.html">4.x</a></li>
</ul>
</li>
</ul>
</li>
-->
</ul>
<div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
<i class="fa fa-moon-o fa-2x hidden-dark"></i>
<span class="sun-icon hidden-light"></span>
</div>
</div>
</header>
<div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
<i class="fa fa-moon-o fa-2x hidden-dark"></i>
<span class="sun-icon hidden-light"></span>
</div>
</header>
54 changes: 19 additions & 35 deletions _includes/header/header-es.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,9 @@
<input id="q" placeholder="🔎 search">
<ul id="navmenu">
<li><a href="/{{ page.lang }}/" id="home-menu"{% if page.menu == 'home' %} class="active"{% endif %}>Inicio</a></li>
<li>
<ul id="getting-started-menu" class="menu">
<li><a href="/{{ page.lang }}/starter/installing.html"{% if page.menu == 'starter' %} class="active"{% endif %}>Cómo empezar</a>
<ul>
<li id="getting-started-menu" class="submenu">
<a href="/{{ page.lang }}/starter/installing.html"{% if page.menu == 'starter' %} class="active"{% endif %}>Cómo empezar</a>
<ul class="submenu-content">
<li>
<a href="/{{ page.lang }}/starter/installing.html">
Instalación
Expand Down Expand Up @@ -43,13 +42,10 @@
</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<ul id="guide-menu" class="menu">
<li><a href="/{{ page.lang }}/guide/routing.html"{% if page.menu == 'guide' %} class="active"{% endif %}>Guía</a>
<ul>
<li id="guide-menu" class="submenu">
<a href="/{{ page.lang }}/guide/routing.html"{% if page.menu == 'guide' %} class="active"{% endif %}>Guía</a>
<ul class="submenu-content">
<li><a href="/{{ page.lang }}/guide/routing.html">Direccionamiento</a>
</li>
<li><a href="/{{ page.lang }}/guide/writing-middleware.html">Escritura de middleware</a>
Expand All @@ -71,13 +67,10 @@
<li><a href="/{{ page.lang }}/guide/database-integration.html">Integración de la base de datos</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<ul id="application-menu" class="menu">
<li><a href="/{{ page.lang }}/5x/api.html"{% if page.menu == 'api' %} class="active"{% endif %}>Referencia de API</a>
<ul>
<li id="application-menu" class="submenu">
<a href="/{{ page.lang }}/5x/api.html"{% if page.menu == 'api' %} class="active"{% endif %}>Referencia de API</a>
<ul class="submenu-content">
<li><a href="/{{ page.lang }}/5x/api.html">5.x</a>
</li>
<li><a href="/{{ page.lang }}/4x/api.html">4.x</a>
Expand All @@ -87,13 +80,10 @@
<li><a href="/2x/">2.x (en desuso)</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<ul id="advanced-topics-menu" class="menu">
<li><a href="/{{ page.lang }}/advanced/developing-template-engines.html"{% if page.menu == 'advanced' %} class="active"{% endif %}>Temas avanzados</a>
<ul>
<li id="advanced-topics-menu" class="submenu">
<a href="/{{ page.lang }}/advanced/developing-template-engines.html"{% if page.menu == 'advanced' %} class="active"{% endif %}>Temas avanzados</a>
<ul class="submenu-content">
<li><a href="/{{ page.lang }}/advanced/developing-template-engines.html">Motores de plantilla</a>
</li>
<li><a href="/{{ page.lang }}/advanced/security-updates.html">Actualizaciones de seguridad</a>
Expand All @@ -102,29 +92,23 @@
</li>
<li><a href="/{{ page.lang }}/advanced/best-practice-performance.html">Mejores prácticas de rendimiento</a>
</li>

</ul>
</li>
</ul>
</li>
<li>
<ul id="resources-menu" class="menu">
<li><a href="/{{ page.lang }}/resources/glossary.html"{% if page.menu == 'resources' %} class="active"{% endif %}>Recursos</a>
<ul>
<li id="resources-menu" class="submenu">
<a href="/{{ page.lang }}/resources/glossary.html"{% if page.menu == 'resources' %} class="active"{% endif %}>Recursos</a>
<ul class="submenu-content">
<li><a href="/{{ page.lang }}/resources/glossary.html">Glosario</a>
</li>
<li><a href="/{{ page.lang }}/resources/middleware.html">Middleware</a>
</li>
<li><a href="/{{ page.lang }}/resources/community.html">Comunidad</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
<i class="fa fa-moon-o fa-2x hidden-dark"></i>
<span class="sun-icon hidden-light"></span>
</div>
</div>
<div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
<i class="fa fa-moon-o fa-2x hidden-dark"></i>
<span class="sun-icon hidden-light"></span>
</div>
</header>
Loading

0 comments on commit 966e43b

Please sign in to comment.