Slot support for sidebar

mmikhan · Jun 28, 2020 · 3c28339 · 3c28339
1 parent d9814ec
commit 3c28339
Show file tree

Hide file tree

Showing 7 changed files with 172 additions and 22 deletions.
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
@@ -2,23 +2,12 @@
  <section
  class="flex flex-col flex-shrink-0 overflow-y-hidden bg-gray-100 dark:bg-gray-800 border-r border-gray-300 dark:border-gray-700 p-2"
  >
- <Search />
- <Library />
- <footer class="mt-auto">
- <Information />
- <FilterLibrary />
- </footer>
+ <slot></slot>
  </section>
 </template>
 
 <script>
-import FilterLibrary from '@/components/widgets/FilterLibrary'
-import Information from '@/components/widgets/Information'
-import Library from '@/components/widgets/Library'
-import Search from '@/components/widgets/Search'
-
 export default {
  name: 'Sidebar',
- components: { FilterLibrary, Information, Library, Search },
 }
 </script>
diff --git a/src/components/widgets/AppSettings.vue b/src/components/widgets/AppSettings.vue
@@ -0,0 +1,57 @@
+<template>
+ <div class="overflow-y-scroll">
+ <h2 class="text-xs text-gray-600 font-semibold tracking-wide">
+ Settings
+ </h2>
+ <ul class="space-y-2 p-2">
+ <li
+ class="text-gray-800 dark:text-gray-500 hover:text-indigo-600 dark:hover:text-indigo-500 transition duration-150 ease-in-out"
+ >
+ <router-link class="flex items-center" to="/settings/general">
+ <svg
+ class="w-5 h-5 stroke-current stroke-2"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http:https://www.w3.org/2000/svg"
+ >
+ <path
+ d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ </svg>
+ <p class="w-40 truncate text-xs pl-1">
+ General
+ </p>
+ </router-link>
+ </li>
+ <li
+ class="text-gray-800 dark:text-gray-500 hover:text-indigo-600 dark:hover:text-indigo-500 transition duration-150 ease-in-out"
+ >
+ <router-link class="flex items-center" to="/settings/optimization">
+ <svg
+ class="w-5 h-5 stroke-current stroke-2"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http:https://www.w3.org/2000/svg"
+ >
+ <path
+ d="M7 21C4.79086 21 3 19.2091 3 17V5C3 3.89543 3.89543 3 5 3H9C10.1046 3 11 3.89543 11 5V17C11 19.2091 9.20914 21 7 21ZM7 21H19C20.1046 21 21 20.1046 21 19V15C21 13.8954 20.1046 13 19 13H16.6569M11 7.34312L12.6569 5.68629C13.4379 4.90524 14.7042 4.90524 15.4853 5.68629L18.3137 8.51472C19.0948 9.29577 19.0948 10.5621 18.3137 11.3431L9.82843 19.8284M7 17H7.01"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ </svg>
+ <p class="w-40 truncate text-xs pl-1">
+ Optimization
+ </p>
+ </router-link>
+ </li>
+ </ul>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'AppSettings',
+}
+</script>
diff --git a/src/components/widgets/IconPack.vue b/src/components/widgets/IconPack.vue
@@ -0,0 +1,59 @@
+<template>
+ <div class="overflow-y-scroll">
+ <h2 class="text-xs text-gray-600 font-semibold tracking-wide">
+ Icon Pack
+ </h2>
+ <ul class="space-y-2 p-2">
+ <li
+ class="text-gray-800 dark:text-gray-500 hover:text-indigo-600 dark:hover:text-indigo-500 transition duration-150 ease-in-out"
+ >
+ <router-link class="flex items-center" to="/download/free">
+ <svg
+ class="w-5 h-5 stroke-current stroke-2"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http:https://www.w3.org/2000/svg"
+ >
+ <path
+ d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ </svg>
+
+ <p class="w-40 truncate text-xs pl-1">
+ Free
+ </p>
+ </router-link>
+ </li>
+ <li
+ class="text-gray-800 dark:text-gray-500 hover:text-indigo-600 dark:hover:text-indigo-500 transition duration-150 ease-in-out"
+ >
+ <router-link class="flex items-center" to="/download/premium">
+ <svg
+ class="w-5 h-5 stroke-current stroke-2"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http:https://www.w3.org/2000/svg"
+ >
+ <path
+ d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ </svg>
+
+ <p class="w-40 truncate text-xs pl-1">
+ Premium
+ </p>
+ </router-link>
+ </li>
+ </ul>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'IconPack',
+}
+</script>
diff --git a/src/views/Bookmark.vue b/src/views/Bookmark.vue
@@ -1,6 +1,13 @@
 <template>
  <main class="flex h-screen flex-grow">
- <Sidebar />
+ <Sidebar>
+ <Search />
+ <Library />
+ <footer class="mt-auto">
+ <Information />
+ <FilterLibrary />
+ </footer>
+ </Sidebar>
  <Main />
  <Customizer />
  </main>
@@ -10,9 +17,21 @@
 import Customizer from '@/components/Customizer'
 import Main from '@/components/Main'
 import Sidebar from '@/components/Sidebar'
+import FilterLibrary from '@/components/widgets/FilterLibrary'
+import Information from '@/components/widgets/Information'
+import Library from '@/components/widgets/Library'
+import Search from '@/components/widgets/Search'
 
 export default {
  name: 'Home',
- components: { Customizer, Main, Sidebar },
+ components: {
+ Customizer,
+ Main,
+ Sidebar,
+ FilterLibrary,
+ Information,
+ Library,
+ Search,
+ },
 }
 </script>
diff --git a/src/views/Download.vue b/src/views/Download.vue
@@ -1,6 +1,8 @@
 <template>
  <main class="flex flex-grow h-screen">
- <Listing />
+ <Sidebar>
+ <IconPack />
+ </Sidebar>
  <div class="overflow-y-scroll p-2">
  <div class="flex flex-wrap justify-between">
  <Pack v-for="n in 15" :key="n" />
@@ -11,9 +13,11 @@
 
 <script>
 import Pack from '@/components/Pack'
-import Listing from '@/components/Listing'
+import Sidebar from '@/components/Sidebar'
+import IconPack from '@/components/widgets/IconPack'
+
 export default {
  name: 'Download',
- components: { Pack, Listing },
+ components: { Pack, Sidebar, IconPack },
 }
 </script>
diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -1,6 +1,13 @@
 <template>
  <main class="flex h-screen flex-grow">
- <Sidebar />
+ <Sidebar>
+ <Search />
+ <Library />
+ <footer class="mt-auto">
+ <Information />
+ <FilterLibrary />
+ </footer>
+ </Sidebar>
  <Main />
  <Customizer />
  </main>
@@ -10,9 +17,21 @@
 import Customizer from '@/components/Customizer'
 import Main from '@/components/Main'
 import Sidebar from '@/components/Sidebar'
+import FilterLibrary from '@/components/widgets/FilterLibrary'
+import Information from '@/components/widgets/Information'
+import Library from '@/components/widgets/Library'
+import Search from '@/components/widgets/Search'
 
 export default {
  name: 'Home',
- components: { Customizer, Main, Sidebar },
+ components: {
+ Customizer,
+ Main,
+ Sidebar,
+ FilterLibrary,
+ Information,
+ Library,
+ Search,
+ },
 }
 </script>
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
@@ -1,6 +1,8 @@
 <template>
  <main class="flex h-screen flex-grow">
- <Panel />
+ <Sidebar>
+ <AppSettings />
+ </Sidebar>
  <div class="flex flex-col flex-grow overflow-y-scroll space-y-5 p-2">
  <General />
  <hr class="dark:border-gray-700" />
@@ -10,12 +12,13 @@
 </template>
 
 <script>
-import Panel from '@/components/Panel'
+import Sidebar from '@/components/Sidebar'
 import General from '@/components/General'
 import Optimization from '@/components/Optimization'
+import AppSettings from '@/components/widgets/AppSettings'
 
 export default {
  name: 'Settings',
- components: { Panel, General, Optimization },
+ components: { Sidebar, General, Optimization, AppSettings },
 }
 </script>