Improve structure of webpage

[kara-mela]

Motivation

The current structure of the homepage feels crowded and arbitrary. I suggest to update it and group the topics.

Modification

We now have three top level topics: Home, Browse, and Documentation. Home includes the 'Scope of PaNET' and 'Applications'. Browse forwards to the 'Ontology Specification' page (widoco). Documentation includes 'Standard Operation Procedure', 'Git Workflow', 'Build the Robot Environment', and 'Make a Release'.

Additionally, the navigation layout has been improved and is now dynamic (based on the _data/navigation.yml).

Result

The structure of the webpage is clearer and more intuitive.

Related Issues

Closes #363

[eilmiv]

Looks great. I like the new structure. I reviewed it as "Request changes" because of the broken purple highlight of the nav item on the index.html. Otherwise, there are just some small comments.

[eilmiv]

Suggested change

	link: "/index.html"
	description: General information on PaNET
	subnav:
	- name: Scope of PaNET
	link: "/index.html"
	link: "/"
	description: General information on PaNET
	subnav:
	- name: Scope of PaNET
	link: "/"

The panet-purple highlight is missing when visiting the main page. This could be solved, if "/" instead of "/index.html" is used here.

[eilmiv]

Suggested change

	{% if item.subnav %}
	<li class="nav-1st">
	<a href="{{ item.link | relative_url }}" {% if page.url == item.link %} class="focus" {% endif %} class="nav-link">
	{{ item.name }}
	</a>
	<div class="nav-2nd">
	<ul>
	{% for subitem in item.subnav %}
	<li>
	<a href="{{ subitem.link | relative_url }}" {% if page.url == subitem.link %} class="focus" {% endif %} class="nav-link">
	{{ subitem.name }}
	</a>
	</li>
	{% endfor %}
	</ul>
	</div>
	</li>
	{% else %}
	<li>
	<a href="{{ item.link | relative_url }}" {% if page.url == item.link %} class="focus" {% endif %} class="nav-link">
	{{ item.name }}
	</a>
	</li>
	{% endif %}
	<li class="nav-1st">
	<a href="{{ item.link | relative_url }}" {% if page.url == item.link %} class="focus" {% endif %} class="nav-link">
	{{ item.name }}
	</a>
	<div class="nav-2nd">
	<ul>
	{% for subitem in item.subnav %}
	<li>
	<a href="{{ subitem.link | relative_url }}" {% if page.url == subitem.link %} class="focus" {% endif %} class="nav-link">
	{{ subitem.name }}
	</a>
	</li>
	{% endfor %}
	</ul>
	</div>
	</li>

Is there a reason for distinguishing between with and without subitems, or could it be simplified like this?

[eilmiv]

I don't see where this description is used. Maybe add it as title to the link? (just an idea)

<a href="..." title="{{ item.description }}">

[kara-mela]

Hi @eilmiv for the detailed review! I implemented all of your suggestions and amended them.