Add structure to menu

99designs · Aug 7, 2018 · 8db3c14 · 8db3c14
1 parent c57619e
commit 8db3c14
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 13 deletions.
diff --git a/docs/config.yml b/docs/config.yml
@@ -15,3 +15,9 @@ menu:
     - name: Introduction
       url: /
       weight: -10
+    - name: Reference
+      identifier: reference
+      weight: 5
+    - name: Recipes
+      identifier: recipes
+      weight: 10
diff --git a/docs/content/recipes/cors.md b/docs/content/recipes/cors.md
@@ -2,7 +2,7 @@
 title: "Setting CORS headers using rs/cors for gqlgen"
 description: Use the best of breed rs/cors library to set CORS headers when working with gqlgen
 linkTitle: CORS
-menu: main
+menu: { main: { parent: 'recipes' } }
 ---
 
 Cross-Origin Resource Sharing (CORS) headers are required when your graphql server lives on a different domain to the one your client code is served. You can read more about CORS in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS).

diff --git a/docs/content/reference/dataloaders.md b/docs/content/reference/dataloaders.md
@@ -2,7 +2,7 @@
 title: "Optimizing N+1 database queries using Dataloaders"
 description: Speeding up your GraphQL requests by reducing the number of round trips to the database.  
 linkTitle: Dataloaders
-menu: main
+menu: { main: { parent: 'reference' } }
 ---
 
 Have you noticed some GraphQL queries end can make hundreds of database 

diff --git a/docs/content/directives.md → docs/content/reference/directives.md b/docs/content/directives.md → docs/content/reference/directives.md
@@ -2,7 +2,7 @@
 title: Using schema directives to implement permission checks
 description: Implementing graphql schema directives in golang for permission checks.  
 linkTitle: Schema Directives
-menu: main
+menu: { main: { parent: 'reference' } }
 ---
 
 Directives are a bit like annotations in any other language. They give you a way to specify some behaviour without directly binding to the implementation. This can be really useful for cross cutting concerns like permission checks.

diff --git a/docs/content/reference/errors.md b/docs/content/reference/errors.md
@@ -2,7 +2,7 @@
 linkTitle: Handling Errors
 title: Sending custom error data in the graphql response
 description: Customising graphql error types to send custom error data back to the client using gqlgen.
-menu: main
+menu: { main: { parent: 'reference' } }
 ---
 
 ## Returning errors

diff --git a/docs/content/reference/scalars.md b/docs/content/reference/scalars.md
@@ -2,7 +2,7 @@
 linkTitle: Custom Scalars
 title: Using custom graphql types in golang
 description: Defining custom GraphQL scalar types using gqlgen
-menu: main
+menu: { main: { parent: 'reference' } }
 ---
 
 There are two different ways to implement scalars in gqlgen, depending on your need.

diff --git a/docs/layouts/partials/sidebar.html b/docs/layouts/partials/sidebar.html
@@ -19,18 +19,18 @@
 	{{- range .Site.Menus.main }}
 		<li class="{{ if $currentPage.IsMenuCurrent "main" . }}active{{ end }}">
 			{{ if .URL }}
-				<a href="{{ .URL }}">{{ .Name }}</a>
+				<a class="menu-item" href="{{ .URL }}">{{ .Name }}</a>
 			{{ else }}
-				<span>{{ .Name }}</span>
+				<span class="menu-item submenu-heading">{{ .Name }}</span>
 			{{ end }}
 		{{- if .HasChildren }}
 			<ul class="submenu">
 			{{- range .Children }}
 				<li class="{{ if $currentPage.IsMenuCurrent "main" . }}active{{ end }}">
 					{{ if .URL }}
-						<a href="{{ .URL }}">{{ .Name }}</a>
+						<a class="menu-item" href="{{ .URL }}">{{ .Name }}</a>
 					{{ else }}
-						<span>{{ .Name }}</span>
+						<span class="menu-item">{{ .Name }}</span>
 					{{ end }}
 				</li>
 			{{- end }}

diff --git a/docs/static/main.css b/docs/static/main.css
@@ -175,31 +175,46 @@ nav {
 
 .menu a {
     color: inherit;
-    display: block;
-    padding: 5px 10px;
 }
 
 .menu a:hover {
     border-bottom: none;
 }
 
+.menu-item {
+    display: block;
+    padding: 5px 10px;
+}
+
+.submenu .menu-item {
+    padding: 5px 20px;
+}
+
+.submenu-heading {
+    margin-top: 15px;
+}
+
 ul.menu {
     margin-left:0;
     list-style: none;
 }
 
 ul.submenu {
-    margin-left: 15px;
+    margin-left: 0;
     list-style: none;
     margin-bottom: 0;
 }
 
+ul.submenu span {
+    padding: 5px 10px;
+}
+
 ul.menu li {
     font-weight: 400;
 }
 
 ul.menu li.active,
-ul.menu li:hover  {
+ul.menu a:hover {
     background-color: var(--color-nav-active);
 }