Attempt to make a better mobile navigation

src/script/main.js

@@ -165,11 +165,6 @@ $(document).ready(function () {
     }, 1000, 'swing')
   })
 
-  $('#mobile').click(function (e) {
-    e.preventDefault()
-    $('.flexview').toggleClass('extended')
-  })
-
   $('body').click(function (e) {
     if (!$(e.target).is('#mobile') && !$(e.target).is('#mobile i') && $('.flexview').hasClass('extended')) {
       $('.flexview').removeClass('extended')

src/style/main.styl

@@ -45,10 +45,13 @@ a
     display: none !important
 
 .navigator
+    position: relative
     padding: 0 50px
     transition: background-color 0.1s linear
     background-color: rgb(0, 219, 247)
     z-index: 5
+    height: 68px
+    
     &.fix
         top: 0
         left: 0
@@ -57,6 +60,7 @@ a
         background-color: rgba(0, 219, 247, 0.67)
 
     #navlogo
+        float: left
         &.hidden
             display: none
 
@@ -84,6 +88,19 @@ a
             &:hover
                 background-color: rgba(255, 255, 255, 0.25)
     
+    .showButton
+        margin: 0
+        padding: 20px
+        display: none
+        float: right
+        font-size: 150%
+        position: relative
+        cursor: pointer
+        color: green
+    
+    .menu:hover > .list
+        max-height: 500px
+
 section
     font-family: "Open Sans"
     position: relative
@@ -146,41 +163,9 @@ section
     width: 60%
     font-size: 120%
 
-//.cssextend:hover > .flexview
-//    display: block
-//    left: 40%
-
 .g-recaptcha
     margin-top: 10px
 
-ul.flexview
-    position: fixed
-    right: 0
-    left: 100%
-    width: auto
-    top: 68px
-    bottom: 0
-    background-color: rgba(53, 53, 53, 0.8)
-    z-index: 1
-    overflow: hidden
-    transition: all 0.1s linear
-
-    .division
-        border-top: 1px solid #a7a7a7
-
-    li
-        display: block
-        min-width: 100px
-        a
-            display: block
-            padding: 5px 20px
-            color: #fff
-            font-weight: normal
-            text-transform: none
-    &.extended
-        display: block
-        left: 40%
-
 code
     white-space: pre
 
@@ -222,7 +207,7 @@ button, .button, input[type="submit"]
         box-shadow: 5px 5px 15px #868686
         border: 1px solid #ddd
         margin-bottom: 10%
-        h1:first-child, h2:first-child, h3:first-child
+        h1:first-child, h3:first-child
             margin-top: 0
         .left, .right
             display: inline-block
@@ -316,7 +301,7 @@ button, .button, input[type="submit"]
     border: 1px solid #ddd
     border-radius: 5px
     text-decoration: none
-    display: inline-block
+    display: block
     cursor: pointer
     i
         color: #fff
@@ -397,11 +382,14 @@ span.divider
     .info
         margin-left: 130px
         .name
-            font-size: 150%
+            font-size: 120%
             font-weight: bold
+            text-overflow: ellipsis
+            overflow: hidden
         .description
             font-size: 80%
             font-style: italic
+            word-wrap: break-word
         .url
             display: block
             text-overflow: ellipsis
@@ -602,14 +590,37 @@ noscript
 @media all and (max-width: 800px)
     .navigator
         padding: 0 10px
+    .showButton
+        display: inline-block !important
+        
+    .menu
+        .list
+            display: block
+            position: absolute
+            top: 68px
+            left: 0
+            right: 0
+            background-color: rgba(0, 188, 212, 0.72)
+            transition: max-height 0.1s linear
+            max-height: 0
+            overflow: hidden
+            
+            ul, li, li a
+                display: block
+            
+            li a
+                padding: 6px 20px
+                color: #ffffff
+                text-transform: none
+            
+            .floating
+                float: none !important
+                border-top: 2px solid #00a1b5
+
     #navlogo
         display: inline-block !important
     .banner
         display: none
-    .fullview 
-        display: none !important
-    .mobview
-        display: inline-block !important
     .logo
         font-size: 10vw
     .document
@@ -635,7 +646,7 @@ noscript
             float: initial !important
             display: block !important
             border: 0 !important
-            width: fit-content !important
+            width: 300px !important
             margin: auto
     .dialog
         width: 100vw !important

views/layout.pug

@@ -63,39 +63,23 @@ html
 		block nav
 			.anchor
 			nav.navigator
-				ul
+				li.hidden#navlogo
-					li.hidden#navlogo
+					a(href="/")
-						a(href="/")
+						.logo.small
-							.logo.small
+							.part1 Icy
-								.part1 Icy
+							.part2 Network
-								.part2 Network
+				.menu
-					li.fullview
+					.showButton(for="show-menu")
-						a.scroll(href="/#home") Home
+						i.fa.fa-fw.fa-bars
-					li.fullview
+					.list
-						a.scroll(href="/#news") News
+						ul
-					li.fullview
-						a(href="https://forum.icynet.eu/") Forum
-				ul.fullview.floating
-					if user
-						li#user
-							a(href="/user/manage") #{user.display_name}
-						li
-							a(href="/logout") Log out
-					else
-						li
-							a(href="/login") Log in
-				ul.mobview.floating
-					li.cssextend
-						a#mobile(href="#")
-							i.fa.fa-fw.fa-bars
-						ul.flexview
 							li
 								a.scroll(href="/#home") Home
 							li
 								a.scroll(href="/#news") News
 							li
 								a(href="https://forum.icynet.eu/") Forum
-							.division
+						ul.floating
 							if user
 								li#user
 									a(href="/user/manage") #{user.display_name}