sidebar styles

README.md

@@ -15,4 +15,7 @@ This is a frontend application build with Vue.js.
 - JavaScript
 - HTML5
 - CSS3
-- TailwindCSS
+- TailwindCSS
+
+## Image
+![Screenshot](./public/img/cloud9-app.png)

package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.4.0",
     "@vueuse/core": "^10.1.2",
     "axios": "^1.4.0",
     "lodash": "^4.17.21",

src/assets/styles/nav.css

@@ -1,14 +1,26 @@
 @layer components {
-    #sidebar .title {
-        @apply text-32 font-thin;
-    }
-    #sidebar .search {
-        @apply flex flex-col w-[75%];
-    }
-    #sidebar .search input {
-        @apply border;
-    }
-    #sidebar .search button {
-        @apply border;
-    }
-}
+  #sidebar {
+    @apply flex flex-col gap-y-[1rem] pt-[0.75rem] sticky left-0;
+  }
+  #sidebar #site-title {
+    @apply text-32 font-thin uppercase tracking-widest;
+  }
+  #sidebar .search {
+    @apply flex flex-col w-[75%];
+  }
+  #sidebar .search .search-input {
+    @apply flex;
+  }
+  #sidebar .search input {
+    @apply border h-[2rem];
+  }
+  #sidebar .search button {
+    @apply border px-1;
+  }
+  #sidebar .search-history .search-list {
+    @apply pt-3 flex flex-col gap-y-[0.75rem] relative;
+  }
+  #sidebar .search-history .search-list .list-item {
+    @apply hover:cursor-pointer hover:underline underline-offset-4 text-18 font-[100] uppercase tracking-widest transition-transform duration-100 hover:scale-110;
+  }
+}

src/components/ForecastPanel.vue

@@ -57,4 +57,4 @@ const formatIconUrl = (iconCode) => {
             </div>
         </ul>
     </div>
-</template>
+</template>

src/components/Search.vue

@@ -14,8 +14,12 @@ const handleSubmit = () => {
 <template>
     <div id="sidebar">
         <form class="search" @submit.prevent="handleSubmit">
-            <input type="text" v-model="searchQuery" />
-            <button>Search</button>
+            <div class="search-input">
+                <input type="text" v-model="searchQuery">
+                <button type="submit" class="search-button">
+                    <i class="fa fa-search"></i>
+                </button>
+            </div>
         </form>
     </div>
-</template>
+</template>

src/components/SearchHistory.vue

@@ -10,11 +10,10 @@ const { searchHistory } = storeToRefs(searchStore);
 </script>
 
 <template>
-    <div v-if="searchHistory.length > 1" class="pt-4">
-        <p>Serach History</p>
-        <ul class="search-list pt-3">
+    <div v-if="searchHistory.length > 1" class="search-history">
+        <ul class="search-list">
             <li v-for="item in searchHistory.slice(1)" @click.prevent="weatherStore.fetchData(item.name, item.id)"
-                class="hover:cursor-pointer hover:underline">
+                class="list-item">
                 {{ item.name }}
             </li>
         </ul>

src/components/Sidebar.vue

@@ -5,7 +5,7 @@ import SearchHistory from './SearchHistory.vue';
 
 <template>
     <div id="sidebar">
-        <h1 class="title">Weather Dashboard</h1>
+        <h1 id="site-title">Cloud9</h1>
         <Search/>
         <SearchHistory />
     </div>

src/main.js

@@ -1,5 +1,6 @@
 import { createApp } from "vue";
 import { createPinia } from "pinia";
+import '@fortawesome/fontawesome-free/css/all.css'
 import "./assets/styles/index.css";
 import App from "./App.vue";
 

src/stores/search.js

@@ -26,7 +26,7 @@ export const useSearchStore = defineStore('search', () => {
         idSet.add(city.id);
       }
     }
-    searchHistory.value = uniqueCities.slice(0, 10);
+    searchHistory.value = uniqueCities.slice(0, 20);
   };
 
   // Watchers

tailwind.config.js

@@ -13,7 +13,7 @@ export default {
           sm: '100%',
           md: '100%',
           lg: '100%',
-          xl: '1600px',
+          xl: '1200px',
         },
       },
     },

yarn.lock

@@ -122,6 +122,11 @@
   resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.17.18.tgz#3a8e57153905308db357fd02f57c180ee3a0a1fa"
   integrity sha512-qU25Ma1I3NqTSHJUOKi9sAH1/Mzuvlke0ioMJRthLXKm7JiSKVwFghlGbDLOO2sARECGhja4xYfRAZNPAkooYg==
 
+"@fortawesome/fontawesome-free@^6.4.0":
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-6.4.0.tgz#1ee0c174e472c84b23cb46c995154dc383e3b4fe"
+  integrity sha512-0NyytTlPJwB/BF5LtRV8rrABDbe3TdTXqNB3PdZ+UUUZAEIrdOJdmABqKjt4AXwIoJNaRVVZEXxpNrqvE1GAYQ==
+
 "@jridgewell/gen-mapping@^0.3.2":
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz#7e02e6eb5df901aaedb08514203b096614024098"