Skip to content

Commit

Permalink
added a better nav menu
Browse files Browse the repository at this point in the history
  • Loading branch information
@eviltester
eviltester committed Apr 12, 2024
1 parent dbe17a9 commit c366d3a
Show file tree
Hide file tree
Showing 2 changed files with 73 additions and 27 deletions.
71 changes: 51 additions & 20 deletions challenger/src/main/java/uk/co/compendiumdev/challenge/gui/ChallengerWebGUI.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,46 +50,77 @@ public void setup(final Challengers challengers,


String actualMenu = """
<script>
function setMenuNavBasedOnUrl(){
const pathToCheck = window.location.pathname;
urlMapping = [
['/simpleapi/', 'simple-api-root-menu'],
['/gui/', 'api-challenges-root-menu'],
['/docs', 'api-challenges-root-menu'],
['/sim/docs', 'sim-api-root-menu'],
['/practice-modes/simulation', 'sim-api-root-menu'],
['/mirror/', 'mirror-api-root-menu'],
['/practice-modes/mirror', 'mirror-api-root-menu']
];
foundMapping = false;
for(const mapping of urlMapping){
if(pathToCheck.startsWith(mapping[0])){
document.getElementById(mapping[1]).classList.add('dropped');
foundMapping=true;
break;
}
}
if(!foundMapping && pathToCheck=='/'){
document.getElementById('home-root-menu').classList.add('dropped');
foundMappint=true;
}
if(!foundMapping){
// assume it is a learning page
document.getElementById('learning-root-menu').classList.add('dropped');
}
}
document.addEventListener("DOMContentLoaded", setMenuNavBasedOnUrl);
</script>
<div class="container cssmenu">
<nav aria-label="Site menu">
<div class="css-menu">
<ul class="sub-menu">
<li class="rootdropdownmenuitem"><a class="brand-link" href="/">Home</a></li>
<li id='home-root-menu'><a class="brand-link" href="/">Home</a></li>
<li class="rootdropdownmenuitem"><a href="/simpleapi/docs">Simple API</a>
<ul class="dropdownmenu">
<li id='simple-api-root-menu'><a href="/simpleapi/docs">Simple API</a>
<ul>
<!-- TODO: About Simple API -->
<li class="rootdrorootdropdownmenuitempdownmenuitem"><a href="/simpleapi/docs">Simple API Docs</a>
<li class="dropdownmenuitem"><a href="/simpleapi/gui/entities">Simple API Data Explorer</a></li>
<li><a href="/simpleapi/docs">Simple API Docs</a>
<li><a href="/simpleapi/gui/entities">Simple API Data Explorer</a></li>
</ul>
</li>
<li class="rootdropdownmenuitem"><a href="/gui/challenges">API Challenges</a>
<ul class="dropdownmenu">
<li id='api-challenges-root-menu'><a href="/gui/challenges">API Challenges</a>
<ul>
<!-- TODO: About API Challenges -->
<li class="dropdownmenuitem"><a href="/docs">Challenges API Docs</a></li>
<li class="dropdownmenuitem"><a href="/gui/entities">Challenges Data Explorer</a></li>
<li><a href="/docs">Challenges API Docs</a></li>
<li><a href="/gui/entities">Challenges Data Explorer</a></li>
</ul>
</li>
<li class="rootdropdownmenuitem"><a href="/learning">Learning Zone</a>
<li id='learning-root-menu'><a href="/learning">Learning Zone</a>
<!-- TODO include a sample of learning information -->
</li>
<li class="rootdropdownmenuitem"><a href="/practice-modes/simulation">Simulator</a>
<ul class="dropdownmenu">
<li class="dropdownmenuitem"><a href="/practice-modes/simulation">About API Simulator</a></li>
<li class="dropdownmenuitem"><a href="/sim/docs">Sim API Docs</a></li>
<li class="dropdownmenuitem"><a href="/sim/docs/swagger">Sim Open API File</a></li>
<li id='sim-api-root-menu'><a href="/practice-modes/simulation">Simulator</a>
<ul>
<li><a href="/practice-modes/simulation">About API Simulator</a></li>
<li><a href="/sim/docs">Sim API Docs</a></li>
<li><a href="/sim/docs/swagger">Sim Open API File</a></li>
</ul>
</li>
<li class="rootdropdownmenuitem"><a href="/practice-modes/mirror">Mirror</a>
<ul class="dropdownmenu">
<li class="dropdownmenuitem"><a href="/practice-modes/mirror">About HTTP Mirror</a></li>
<li class="dropdownmenuitem"><a href="/mirror/docs">Mirror API Docs</a></li>
<li class="dropdownmenuitem"><a href="/mirror/docs/swagger">Mirror Open API File</a></li>
<li id='mirror-api-root-menu'><a href="/practice-modes/mirror">Mirror</a>
<ul>
<li><a href="/practice-modes/mirror">About HTTP Mirror</a></li>
<li><a href="/mirror/docs">Mirror API Docs</a></li>
<li><a href="/mirror/docs/swagger">Mirror Open API File</a></li>
</ul>
</li>
Expand Down
29 changes: 22 additions & 7 deletions challenger/src/main/resources/public/css/content.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,12 @@
background-color: #d7d6d5;
}

.sub-menu li:hover a {
/* remember to adjust both hover and dropped */
.sub-menu li:hover a{
color: #000000;
background: #efefef;
}
.sub-menu li.dropped a {
color: #000000;
background: #efefef;
}
Expand All @@ -85,12 +90,22 @@

.sub-menu li ul { display: none; }

.sub-menu li:hover ul {
display: block;
position: absolute;
left: 0;
width: 100%;
background: #efefef;
/* remember to adjust both hover and dropped */
@media (min-width: 1000px) {
.sub-menu li:hover ul {
display: block;
position: absolute;
left: 0;
width: 100%;
background: #efefef;
}
.sub-menu li.dropped ul {
display: block;
position: absolute;
left: 0;
width: 100%;
background: #efefef;
}
}

.sub-menu li ul li:hover a { color: #000; }
Expand Down

0 comments on commit c366d3a

Please sign in to comment.