refactor UI layout

src/components/nav/NavBar.vue

@@ -1,14 +1,42 @@
 <template>
-  <div class="topnav"></div>
+  <div class="topnav rounded">
+    <div class="left">
+      <div class="btn">
+        <PlayBtn />
+      </div>
+      <div class="info">
+        <div class="title">The Queen of Soul</div>
+      </div>
+    </div>
+    <div class="center"></div>
+    <div class="right"></div>
+  </div>
 </template>
 
 <script setup>
-function toggleNav() {}
+import PlayBtn from '../shared/PlayBtn.vue';
 </script>
 
 <style lang="scss">
 .topnav {
-  background-color: $gray;
+  background-color: $gray3;
   display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  padding: 0 $small;
+  margin: $small $small 0 $small;
+
+  .left {
+    display: flex;
+    // border: solid 1px $gray;
+    align-items: center;
+    gap: $small;
+
+    .info {
+      .title {
+        font-size: 1.5rem;
+        font-weight: bold;
+      }
+    }
+  }
 }
 </style>