responsive navbar

templates/auth/email-verification/index.html

@@ -0,0 +1,28 @@
+<. include!("../../components/headers/index.html"); .>
+<div class="tmp-layout">
+<main class="auth-main">
+  <div class="auth-inner-container">
+
+    <img src="<.=
+    crate::FILES.get("./static/cache/img/icon-trans.png").unwrap().>"
+    class="auth__logo" alt="mcaptcha logo" />
+
+  <div
+    class="sitekey-form"
+  >
+    <h1 class="form__title">
+      Please verify your email address to continue
+    </h1>
+      An email has been sent to 
+
+  </div>
+    <p class="auth__secondary-action__banner">
+      New to mCaptcha?
+      <a 
+		  href="<.= crate::PAGES.auth.join .>"
+		  class="auth__secondary-action__link">
+		  Create an account
+	  </a>
+    </p>
+  </div>
+<. include!("../../components/footers.html"); .>

templates/components/headers/csp.html

@@ -1,4 +1,6 @@
+<!--
 <meta
   http-equiv="Content-Security-Policy"
   content="default-src 'self' *.mcaptcha.org mcaptcha.org mcaptcha.io *.mcaptcha.io; img-src 'self'; style-src 'self'; child-src 'none'; script-src 'self';"
 />
+-->

templates/email/verification/index.html

@@ -20,9 +20,16 @@
       <p class="message__text">
         Please verify your email address to continue.
       </p>
-      <button class="button">
-        Click here to verify
-      </button>
+      <form
+        action="<.= verification_link .>"
+        method="get"
+        accept-charset="utf-8"
+		class="verification__form"
+      >
+        <button type="submit" class="button">
+          Click here to verify
+        </button>
+      </form>
 
       <p class="message__text">
         If you were not able to see the verification button, click the following

templates/main.scss

@@ -48,7 +48,7 @@ nav {
   /* needed for the floated layout */
   clear: both;
   grid-area: navbar;
-  height: 100%;
+//  height: 100%;
 }
 
 .tmp-layout {

templates/panel/index.html

@@ -10,7 +10,7 @@
     <ul class="sitekey-list__box">
         <p> 
             It looks like you don't have any sitekeys. Click 
-                <a href="<.= crate::PAGES.panel.sitekey.add .>">here></a> to add new sitekey.
+			<a href="<.= crate::PAGES.panel.sitekey.add .>">here</a> to add new sitekey.
         </p>
     </ul>
 

templates/panel/navbar/index.html

@@ -1,12 +1,18 @@
 <nav class="secondary-menu">
-  <ul class="secondary-menu__lsit">
-    <li class="secondary-menu__heading">
-      <img class="secondary-menu__logo" src="<.= crate::FILES.get("./static/cache/img/icon-trans.png").unwrap() .>" alt="Logo" />
-      <div class="secondary-menu__brand-name">
-        mCaptcha
-      </div>
-    </li>
-
+	<input type="checkbox" class="nav-toggle" id="nav-toggle" >
+  <div class="secondary-menu__heading">
+    <img class="secondary-menu__logo" src="<.= crate::FILES.get("./static/cache/img/icon-trans.png").unwrap() .>" alt="Logo" />
+    <div class="secondary-menu__brand-name">
+      mCaptcha
+    </div>
+	<label class="nav__hamburger-menu"for="nav-toggle">
+      <span></span>
+      <span></span>
+      <span></span>
+    </label>
+  </div>
+  <ul class="secondary-menu__list">
+    
     <!--
           <li class="secondary-menu__section-partition"></li>
           -->

templates/panel/navbar/main.scss

@@ -19,28 +19,39 @@
 @import '../../vars';
 
 .secondary-menu {
- // position: fixed;
- // width: 14%;
- // left: 0;
- // bottom: 0;
- // top: 0;
- // right: 0;
+  // position: fixed;
+  // width: 14%;
+  // left: 0;
+  // bottom: 0;
+  // top: 0;
+  // right: 0;
 
-  height: 100%;
-  overflow: auto;
+  //height: 100%;
+  //overflow: auto;
+  display: flex;
+  flex-direction: column;
 
   background-color: $secondary-backdrop;
   color: $light-text;
 }
 
-.secondary-menu__lsit{
-	position: fixed;
-	top: 0;
-	bottom: 0;
+.nav-toggle {
+  display: none;
+}
+
+.nav__hamburger-menu {
+  display: none;
+}
+
+.secondary-menu__list {
+  // position: fixed;
+  // top: 0;
+  // bottom: 0;
+  height: 100%;
 }
 
 .secondary-menu__heading {
-  margin: auto;
+  //  margin: auto;
   padding: 20px 5px;
   display: flex;
 }

templates/panel/navbar/mobile.scss

@@ -14,11 +14,61 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
+@import '../../vars';
 
 .secondary-menu {
   display: block;
 }
 
-.secondary-menu__lsit {
-  position: sticky;
+.secondary-menu__list {
+  //  position: sticky;
+  height: 0px;
+  overflow: hidden;
+}
+
+.nav__hamburger-menu {
+  display: inline-block;
+  width: 50px;
+  height: 50px;
+  padding: 13px;
+}
+
+.nav__hamburger-menu:hover {
+  cursor: grab;
+}
+
+.nav__hamburger-menu:hover > span {
+  color: $green;
+}
+
+.nav__hamburger-menu > span {
+  display: block;
+  width: 25px;
+  height: 10px;
+  border-top: 2px solid #eee;
+}
+
+.secondary-menu__logo {
+  width: 40px;
+  height: 40px;
+}
+
+.secondary-menu__heading {
+  padding: 10px 5px;
+}
+
+.secondary-menu__brand-name {
+  font-size: 1rem;
+  font-weight: 700;
+}
+
+.nav-toggle:not(:checked) ~ .secondary-menu__list {
+  height: 0px;
+  //  overflow-y: hidden;
+  //  max-height: 100%;
+}
+
+.nav-toggle:checked ~ .secondary-menu__list {
+  height: 100%;
+  overflow-y: auto;
 }