Add selector

wvlet · Apr 4, 2017 · 4d17277 · 4d17277
1 parent a5c300d
commit 4d17277
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 11 deletions.
diff --git a/wvlet-ui/src/main/public/index.html b/wvlet-ui/src/main/public/index.html
@@ -9,21 +9,18 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue_grey-red.min.css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://use.fontawesome.com/e90cba4e05.js"></script>
     <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
-
     <link rel="apple-touch-icon" href="apple-touch-icon.png">
     <link rel="shortcut icon" type='image/x-icon' href="favicon.ico"/>
-<!--   <link rel="stylesheet" href="./css/bootstrap.min.css"/>-->
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
-    <script src="https://use.fontawesome.com/e90cba4e05.js"></script>
-    <link rel="stylesheet" href="style.css">
 </head>
 <body id="body">
 <div id="main">
 </div>
 <script type="text/javascript" src="wvlet-ui-jsdeps.js"></script>
 <script type="text/javascript" src="wvlet-ui-fastopt.js"></script>
-<!--<script type="text/javascript" src="wvlet-ui-launcher.js"></script>-->
 <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
 <script src="./js/bootstrap.min.js" crossorigin="anonymous"></script>

diff --git a/wvlet-ui/src/main/public/style.css b/wvlet-ui/src/main/public/style.css
@@ -25,10 +25,6 @@
     padding-left: 1rem;
 }
 
-.main {
-    margin-top: 55px;
-}
-
 .navbar, .sidebar {
     font-size: 0.96rem;
     font-weight: normal;
@@ -52,3 +48,7 @@
     text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
 }
 
+.mdl-layout__drawer .mdl-navigation .mdl-navigation__link + active {
+    color: #025aa5;
+}
+
diff --git a/wvlet-ui/src/main/scala/wvlet/ui/component/Navbar.scala b/wvlet-ui/src/main/scala/wvlet/ui/component/Navbar.scala
@@ -73,7 +73,8 @@ object Navbar extends RxElement with LogSupport {
       <nav class="mdl-navigation">
         {
         links.map{l =>
-          <a class="mdl-navigation__link" href={s"${l.url}"} onclick={onClick(l.name)}>
+          val isActive = page == l.name
+          <a class={s"mdl-navigation__link${if(isActive) " active" else ""}"} href={s"${l.url}"} onclick={onClick(l.name)}>
             {icon(l.icon)} {l.name}
           </a>
         }