WIP: tab bar

freerange · Jul 23, 2024 · bc5df74 · bc5df74
1 parent 2135602
commit bc5df74
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 5 deletions.
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
@@ -15,10 +15,6 @@
  *= require css/layouts
  *= require css/base
  *= require css/forms
- *= require css/components/card
- *= require css/components/box
- *= require css/components/footer
- *= require css/components/notice
- *= require css/components/form_group
+ *= require_tree ./css/components
  *= require_self
  */
diff --git a/app/assets/stylesheets/css/components/tab_bar.css b/app/assets/stylesheets/css/components/tab_bar.css
@@ -0,0 +1,32 @@
+.jam-tab-bar {
+  --justify: flex-start;
+  margin-top: var(--s1);
+  padding-bottom: var(--s-4);
+  border-bottom: 2px solid var(--colour-slate-300);
+  width: 100%;
+}
+
+.jam-tab-bar ul {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--s1);
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  font-size: var(--font-size-s);
+}
+
+.jam-tab-bar li {
+  flex-grow: 1;
+  text-align: center;
+  text-transform: uppercase;
+  color: var(--colour-slate-600);
+}
+
+.jam-tab-bar__selected {
+  font-weight: 600;
+  color: var(--colour-slate-800);
+  border-bottom: 4px solid var(--colour-red-jam-500);
+  padding-bottom: 2px;
+  margin-bottom: -6px;
+}
diff --git a/app/assets/stylesheets/css/layouts.css b/app/assets/stylesheets/css/layouts.css
@@ -101,3 +101,19 @@
 .reel.overflowing {
   padding-block-end: 1rem;
 }
+
+.switcher {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--s1);
+}
+
+.switcher > * {
+  flex-grow: 1;
+  flex-basis: calc(( 70rem - 100%) * 999);
+}
+
+.switcher > :nth-last-child(n+ 5),
+.switcher > :nth-last-child(n+ 5) ~ * {
+  flex-basis: 100%;
+}
diff --git a/app/views/users/show.html.erb b/app/views/users/show.html.erb
@@ -1,4 +1,22 @@
 <%= render('shared/box', title: 'My account') do %>
+  <div class="jam-tab-bar">
+    <ul>
+      <li class="jam-tab-bar__selected">Personal</li>
+      <li>Artist</li>
+      <% Current.user.artists.each do |artist| %>
+        <li><%= artist.name %></li>
+      <% end %>
+      <li>
+        <span class="icon">
+          <svg width="0.75em" height="0.75em" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M14 8.5H8V14.5H6V8.5H0V6.5H6V0.5H8V6.5H14V8.5Z" fill="#F16B7C"/>
+          </svg>
+        </span>
+        Add Artist Profile
+      </li>
+    </ul>
+  </div>
+
   <ul>
     <li><%= link_to "Change password", edit_password_path, class: 'link' %></li>
     <li><%= link_to "Change email address", edit_identity_email_path, class: 'link' %></li>