files scrollbar layout done

src/components/Navbar.vue

@@ -1,22 +1,61 @@
 <template>
-  <nav class="bg-neutral">
-    <div class="mx-auto px-8 w-full h-12">
-      <div class="flex justify-between items-center py-2 h-full" v-show="showNavbarBreadcrumb">
-        files
+  <nav class="bg-neutral-700">
+    <div class="mx-auto px-4" :class="[showNavbarBreadcrumb? 'min-h-12': 'h-12']">
+      <div class="flex justify-between items-center flex-wrap" v-show="showNavbarBreadcrumb">
+        <div class="flex flex-1 items-center">
+            <h2 class="mr-28 text-2xl font-black text-neutral-10">FILES</h2>
+            <ul class="flex justify-center items-center space-x-4 text-xl font-semibold text-neutral-300">
+              <li class="px-2 py-3.5">ALL</li>
+              <li>DISCOVER</li>
+              <li>COMPARE</li>
+            <li>DESIGN</li>
+          </ul>
+        </div>
+        <div class="flex justify-end items-center">
+          <form role="search">
+            <label for="searchFiles" class="mr-4 relative">
+              <input type="search" id="searchFiles" placeholder="Search" class="px-5 py-2 w-72 rounded-full text-sm align-middle duration-300 border border-neutral-500 hover:border-neutral-300 focus:outline-none focus:ring focus:border-neutral-300">
+              <span class="absolute top-2 bottom-1.5 right-0.5 flex justify-center items-center gap-2">
+                <IconSetting class="w-6 h-6 cursor-pointer"></IconSetting>
+                <span class="w-px h-6 block after:border after:border-neutral-300 after:content-['']"></span>
+                <button class="pr-2 py-1 rounded-r-full">
+                  <IconSearch class="w-6 h-6"></IconSearch>
+                </button>
+              </span>
+            </label>
+          </form>
+          <label class="btn btn-sm btn-neutral cursor-pointer">
+            <input id="uploadFiles" class="hidden" type="file">
+            upload
+          </label>
+        </div>
       </div>
     </div>
   </nav>
 </template>
 
 <script>
+import IconSearch from '@/components/icons/IconSearch.vue';
+import IconSetting from '@/components/icons/IconSetting.vue';
+
 export default {
   data() {
     return {
       showNavbarBreadcrumb: false,
     };
   },
+  components: {
+    IconSearch,
+    IconSetting
+  },
   mounted() {
     this.showNavbarBreadcrumb = this.$route.matched[0].name !== ('AuthContainer')? true : false;
   },
 }
 </script>
+
+<style scoped>
+#searchFiles::-webkit-search-cancel-button{
+  appearance: none;
+}
+</style>