-
-
-
-
-
-
+
-
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
new file mode 100644
index 00000000..c3505fe5
--- /dev/null
+++ b/src/components/Sidebar.vue
@@ -0,0 +1,176 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/main.js b/src/main.js
index d6da6802..031806e1 100644
--- a/src/main.js
+++ b/src/main.js
@@ -10,6 +10,10 @@ import {
faHeadphones,
faRss,
faChevronLeft,
+ faBars,
+ faFire,
+ faCog,
+ faSignOutAlt,
} from "@fortawesome/free-solid-svg-icons";
import { faGithub, faBitcoin, faYoutube } from "@fortawesome/free-brands-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
@@ -26,6 +30,10 @@ library.add(
faYoutube,
faRss,
faChevronLeft,
+ faBars,
+ faFire,
+ faCog,
+ faSignOutAlt,
);
import("uikit/dist/css/uikit-core.css");
@@ -185,10 +193,10 @@ const mixin = {
},
computed: {
backgroundColor() {
- return this.getEffectiveTheme() === "light" ? "#fff" : "#0b0e0f";
+ return this.getEffectiveTheme() === "light" ? "#fff" : "#1d2438";
},
secondaryBackgroundColor() {
- return this.getEffectiveTheme() === "light" ? "#e5e5e5" : "#242727";
+ return this.getEffectiveTheme() === "light" ? "#e5e5e5" : "#30354b";
},
foregroundColor() {
return this.getEffectiveTheme() === "light" ? "#15191a" : "#0b0e0f";
From 328ecd43b64f9a9c413beeb7cd3bf7fc200cedac Mon Sep 17 00:00:00 2001
From: Filipe Medeiros
Date: Sun, 10 Oct 2021 13:37:01 +0100
Subject: [PATCH 5/7] feat: menu for mobile and improvements
---
src/App.vue | 15 +-
src/components/Menu.vue | 28 +++
.../{Sidebar.vue => MenuDesktop.vue} | 84 +++++----
src/components/MenuMobile.vue | 163 ++++++++++++++++++
src/components/TrendingPage.vue | 31 +++-
src/locales/en.json | 13 +-
src/main.js | 2 +
7 files changed, 292 insertions(+), 44 deletions(-)
create mode 100644 src/components/Menu.vue
rename src/components/{Sidebar.vue => MenuDesktop.vue} (56%)
create mode 100644 src/components/MenuMobile.vue
diff --git a/src/App.vue b/src/App.vue
index 921cc238..42bc7d21 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,10 @@
-
+
-
+
@@ -28,10 +32,13 @@
diff --git a/src/components/Sidebar.vue b/src/components/MenuDesktop.vue
similarity index 56%
rename from src/components/Sidebar.vue
rename to src/components/MenuDesktop.vue
index c3505fe5..09c8ead4 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/MenuDesktop.vue
@@ -1,62 +1,74 @@
-
@@ -66,10 +78,14 @@
export default {
data() {
return {
- collapsed: false,
- narrowSidebar: false,
+ collapseText: this.collapsed,
+ hideText: this.collapsed,
};
},
+ props: {
+ collapsed: Boolean,
+ toggleCollapsed: Function,
+ },
methods: {
logout() {
alert("logging out");
@@ -77,11 +93,17 @@ export default {
},
watch: {
collapsed(collapsed) {
- if (collapsed)
+ if (collapsed) {
+ this.collapseText = true;
setTimeout(() => {
- this.narrowSidebar = collapsed;
- }, 350);
- else this.narrowSidebar = collapsed;
+ this.hideText = true;
+ }, 450);
+ } else {
+ this.hideText = false;
+ setTimeout(() => {
+ this.collapseText = false;
+ }, 0);
+ }
},
},
};
@@ -147,22 +169,20 @@ export default {
.sidebar-link {
gap: 14px !important;
- padding: 10px 14px;
+ padding: 10px 12px;
border-radius: 12px;
- transition: padding 0.5s;
+ transition: padding 400ms, gap 400ms;
}
-.collapsed .sidebar-link {
+.collapse-text .sidebar-link {
padding: 6px;
-}
-.narrow-sidebar .sidebar-link {
- width: fit-content;
+ gap: 0px !important;
}
.sidebar-link span {
- transition: font-size 500ms;
+ transition: font-size 400ms, padding 400ms;
}
-.collapsed .sidebar-link span {
+.collapse-text .sidebar-link span {
font-size: 0;
}
diff --git a/src/components/MenuMobile.vue b/src/components/MenuMobile.vue
new file mode 100644
index 00000000..837efce6
--- /dev/null
+++ b/src/components/MenuMobile.vue
@@ -0,0 +1,163 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/TrendingPage.vue b/src/components/TrendingPage.vue
index 9b00422d..a588b937 100644
--- a/src/components/TrendingPage.vue
+++ b/src/components/TrendingPage.vue
@@ -1,7 +1,31 @@
-
+
+
-
+
+
+
+
+
Date: Sun, 10 Oct 2021 20:52:13 +0100
Subject: [PATCH 6/7] feat: a bit of the search bar and improvements to the
menu
---
src/App.vue | 11 +++++++++--
src/components/Menu.vue | 22 ++++++++++------------
src/components/MenuDesktop.vue | 7 ++++---
src/components/MenuMobile.vue | 17 +++++++++++++----
src/components/TrendingPage.vue | 25 ++++++++++++++++++++++---
src/main.js | 6 ++++++
src/store.js | 11 +++++++++++
7 files changed, 75 insertions(+), 24 deletions(-)
create mode 100644 src/store.js
diff --git a/src/App.vue b/src/App.vue
index 42bc7d21..f53c3d0e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,7 +8,7 @@
@@ -33,10 +33,17 @@
-
diff --git a/src/components/MenuMobile.vue b/src/components/MenuMobile.vue
index 837efce6..e8d75929 100644
--- a/src/components/MenuMobile.vue
+++ b/src/components/MenuMobile.vue
@@ -1,12 +1,15 @@
-
+
@@ -72,6 +75,12 @@ export default {
props: {
collapsed: Boolean,
toggleCollapsed: Function,
+
+ searchText: String,
+ onKeyUp: Function,
+ onInputFocus: Function,
+ onInputBlur: Function,
+ onSearchTextChange: Function,
},
methods: {
logout() {
@@ -158,6 +167,6 @@ export default {
color: #fff;
}
.router-link-active {
- background: linear-gradient(#da22ff, #9733ee);
+ background: linear-gradient(to right, #da22ff, #9733ee);
}
diff --git a/src/components/TrendingPage.vue b/src/components/TrendingPage.vue
index a588b937..201717a8 100644
--- a/src/components/TrendingPage.vue
+++ b/src/components/TrendingPage.vue
@@ -1,10 +1,22 @@
+
+