Update page nav styles
Update the navigation styles to:
- Be full height
- Have a light grey background (slightly lighter than the PG header)
- Allow sections within the nav
- Allow for a selected item
This also increases the z-index of the footer so that when the nav is
fixed position, it doesn't overlap the footer.
Change-Id: I6cc3ec542c38d24b3f8b030abe3610b8aa838d1f
diff --git a/polygerrit-ui/app/elements/shared/gr-page-nav/gr-page-nav.html b/polygerrit-ui/app/elements/shared/gr-page-nav/gr-page-nav.html
index 5fa21e4..3209590 100644
--- a/polygerrit-ui/app/elements/shared/gr-page-nav/gr-page-nav.html
+++ b/polygerrit-ui/app/elements/shared/gr-page-nav/gr-page-nav.html
@@ -22,8 +22,10 @@
<template>
<style include="shared-styles">
#nav {
+ background-color: #f5f5f5;
border: 1px solid #eee;
border-top: none;
+ height: 100%;
position: absolute;
top: 0;
width: 14em;
@@ -32,7 +34,29 @@
position: fixed;
}
#nav ::content ul {
- margin: 1em 2em;
+ padding: 1em 0;
+ }
+ #nav ::content li {
+ border-bottom: 1px solid transparent;
+ border-top: 1px solid transparent;
+ padding: 0 2em;
+ }
+ #nav ::content li.sectionTitle {
+ padding: 0 2em 0 1.5em;
+ }
+ #nav ::content li.sectionTitle:not(:first-child) {
+ padding-top: 1em;
+ }
+ #nav ::content .title {
+ display: flex;
+ font-weight: bold;
+ margin: .4em 0;
+ }
+ #nav ::content .selected {
+ background-color: #fff;
+ border-bottom: 1px dotted #808080;
+ border-top: 1px dotted #808080;
+ font-weight: bold;
}
#nav ::content a {
color: black;
