Added some item views

assets/styles/kraken.scss

@@ -1,3 +1,62 @@
+$nav-width: 200px;
+
+$box-shadow-1: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+$box-shadow-2: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+
 body{
   background: lightgrey;
 }
+
+#main-nav{
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: $nav-width;
+  height: 100%;
+  padding: 20px 0;
+  background: #212121;
+  color: white;
+  box-shadow: $box-shadow-1;
+  box-sizing: border-box;
+
+  h3{
+    text-align: center;
+  }
+
+  ul{
+    list-style: none;
+
+    li{
+      margin: 0;
+      border-bottom: 1px solid #999;
+
+      &:first-child{
+        border-top: 1px solid #999;
+      }
+    }
+
+    a{
+      display: block;
+      box-sizing: border-box;
+      width: $nav-width;
+      padding: 10px 15px;
+      color: limegreen;
+      font-size: 2.5rem;
+      text-decoration: none;
+      transition: all 230ms ease-in-out;
+
+      &:hover{
+        background: rgba(255, 255, 255, 0.1);
+      }
+    }
+  }
+}
+
+#main-wrapper{
+  max-width: 1200px;
+  margin-top: 25px;
+  padding: 20px 30px;
+  background: white;
+  border-radius: 5px;
+  box-shadow: $box-shadow-2;
+}

lib/routes.rb

@@ -5,3 +5,33 @@ get '/' do
     :items => items
   }
 end
+
+get '/item' do
+  redirect '/item/list'
+end
+get '/item/list' do
+  items = Item.all
+  erb :'item/list', :locals => {
+    :title => 'List of Items',
+    :items => items
+  }
+end
+
+get '/item/create' do
+  erb :'item/create', :locals => {
+    :title => 'Create New Item'
+  }
+end
+post '/item/create' do
+  item = Item.create(
+    name: params[:item_name],
+    serial_number: params[:item_serial],
+    sku_number: params[:item_sku],
+    purchased_from: params[:item_purchase_from],
+    purchased_at: params[:item_purchase_date],
+    manufacturer: params[:item_manufacturer],
+    type: params[:item_type]
+  )
+
+  redirect "/item/#{item.id}"
+end

views/item/create.erb

@@ -0,0 +1,64 @@
+<div class="row">
+  <div class="twelve columns">
+    <h1>Create new item</h1>
+  </div>
+</div>
+
+<div class="row">
+  <div class="twelve columns">
+    <form action="/item/create" method="POST" class="u-full-width">
+      <div class="row">
+        <div class="columns twelve">
+          <label for="item_name">Item name:</label>
+          <input class="u-full-width" type="text" placeholder="My new item" id="item_name" name="item_name" required>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="six columns">
+          <label for="item_serial">Serial number:</label>
+          <input class="u-full-width" type="text" placeholder="0123456789" id="item_serial" name="item_serial">
+        </div>
+
+        <div class="six columns">
+          <label for="item_sku">SKU number:</label>
+          <input class="u-full-width" type="text" placeholder="ABC12345678" id="item_sku" name="item_sku">
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="six columns">
+          <label for="item_purchase_from">Purchased from:</label>
+          <input class="u-full-width" type="text" placeholder="Newegg" id="item_purchase_from" name="item_purchase_from">
+        </div>
+
+        <div class="six columns">
+          <label for="item_purchase_date">Purchased at:</label>
+          <input class="u-full-width" type="datetime-local" id="item_purchase_date" name="item_purchase_date">
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="six columns">
+          <label for="item_manufacturer">Manufacturer:</label>
+          <input class="u-full-width" type="text" placeholder="Manufacturer" id="item_manufacturer" name="item_manufacturer">
+        </div>
+
+        <div class="six columns">
+          <label for="item_type">Item type</label>
+          <select class="u-full-width" id="item_type" name="item_type">
+            <option value="cpu">Processor</option>
+            <option value="motherboard">Motherboard</option>
+            <option value="memory">Memory (RAM)</option>
+            <option value="psu">Power Supply</option>
+            <option value="case">Case</option>
+            <option value="storage">Storage Device</option>
+            <option value="gpu">Graphics Card</option>
+          </select>
+        </div>
+      </div>
+
+      <input class="button-primary u-full-width" type="submit" value="Submit">
+    </form>
+  </div>
+</div>

views/item/list.erb

@@ -0,0 +1,7 @@
+<p><a href="/item/create">Create new item</a></p>
+
+<ul>
+  <% items.each do |item| %>
+    <li><%= item.name %></li>
+  <% end %>
+</ul>

views/layout.erb

@@ -9,6 +9,18 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
 </head>
 <body>
-  <%= yield %>
+  <!-- Main navigation -->
+  <nav id="main-nav">
+    <h3>Raven</h3>
+    <ul>
+      <li><a href="/">Dashboard</a></li>
+      <li><a href="/item/list">Items</a></li>
+      <li><a href="/license/list">Licenses</a></li>
+    </ul>
+  </nav>
+
+  <div id="main-wrapper" class="container">
+    <%= yield %>
+  </div>
 </body>
 </html>