602/Add header back (#609)

* Implement first version of header * Fix alignment and add borders * Fix a few more layout problems * refactor code after pullrequest review --------- Co-authored-by: megli2 <[email protected]>
puzzle · Feb 26, 2024 · 37b1b4a · 37b1b4a
1 parent 1a17c42
commit 37b1b4a
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 7 deletions.
diff --git a/app/assets/stylesheets/styles.scss b/app/assets/stylesheets/styles.scss
@@ -1,5 +1,45 @@
+$skills-blue: #3b7bbe;
+$skills-text-gray: #8e8e8e;
+
 @import "bootstrap";
 
 .modal-dialog {
   max-width: 60%;
+}
+
+.content {
+  max-width: 60%;
+  flex-grow: 1;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.navbar {
+  flex-direction: row;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+
+  .nav-link {
+    color: white;
+    text-decoration: none;
+  }
+
+  .scale-icon-06 {
+    transform: scale(0.6);
+  }
+
+  .scale-icon-08 {
+    transform: scale(0.8);
+  }
+}
+
+pzsh-topbar {
+  background-color: $skills-blue
+}
+
+.text-gray {
+  color: $skills-text-gray;
 }
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
@@ -9,13 +9,37 @@
     = stylesheet_link_tag "application", "data-turbo-track": "reload"
     = javascript_include_tag "application", "data-turbo-track": "reload", type: "module"
     = favicon_link_tag "favicon.png"
-  %body
-    %pzsh-container
-      %pzsh-topbar
-        %img{:src=> "/assets/logo.svg",:height=>"32"}
+  %body.d-flex.justify-content-center
+    %pzsh-container.content
+      %div.position-sticky.top-0.z-3
+        %div.d-flex.justify-content-between.bg-white
+          %div.d-flex
+            %div.mb-1.mt-1
+              %img{:src=> "/assets/logo.svg",:height=>"32"}
+            %text.d-flex.align-items-end.ms-2.small= "4.4.0"
+          %ul.navbar.text-gray
+            %li.d-flex.align-items-center.cursor-pointer.ps-2.pe-2.border-start.border-end.h-100
+              %pzsh-icon.scale-icon-06(name="user")
+              %text= "Curtis Jackson"
+            %li.d-flex.align-items-center.cursor-pointer.ps-2.pe-2
+              %a.d-flex.align-items-center{:href => "https://github.com/puzzle/skills/issues"}
+                %pzsh-icon.scale-icon-08.text-gray(name="question-circle")
+            %li.d-flex.align-items-center.cursor-pointer.border-start.border-end.h-100.ps-2.pe-2
+              %a= "Logout"
+        %div
+          %pzsh-topbar.p-0
+            %div.d-flex.justify-content-center
+              %ul.navbar
+                %li
+                  %a.nav-link.cursor-pointer.ps-2.pe-2= "Profil"
+                %li
+                  %a.nav-link.cursor-pointer.ps-2.pe-2= "Skill Suche"
+                %li
+                  %a.nav-link.cursor-pointer.ps-2.pe-2= "CV Suche"
+                %li
+                  %a.nav-link.cursor-pointer.ps-2.pe-2{href: skills_path} Skillset
       %div.container-fluid
         %div.row.d-flex.justify-content-center
-          %div.col-8
+          %div
             = yield
-            = turbo_frame_tag "remote_modal", target: "_top"
-
+            = turbo_frame_tag "remote_modal", target: "_top"