sidebar - router

Sidebar and router operations completed
mehmetsagir · Oct 16, 2020 · f37cf61 · f37cf61
1 parent 5b4d2a6
commit f37cf61
Show file tree

Hide file tree

Showing 43 changed files with 12,884 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,4 @@
+.DS_Store
+node_modules
+/dist
+
diff --git a/README.md b/README.md
@@ -0,0 +1,24 @@
+# twitter-clone
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["@vue/cli-plugin-babel/preset"]
+};
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,59 @@
+{
+  "name": "twitter-clone",
+  "version": "1.0.0",
+  "private": true,
+  "description": "Vuejs - Twitter Clone",
+  "author": {
+    "name": "Mehmet Sağır"
+  },
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "main": "index.js",
+  "dependencies": {
+    "core-js": "^3.6.5",
+    "vue": "^2.6.11",
+    "vue-router": "^3.2.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-vue": "^6.2.2",
+    "prettier": "^1.19.1",
+    "sass": "^1.26.5",
+    "sass-loader": "^8.0.2",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended",
+      "@vue/prettier"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ],
+  "_id": "[email protected]",
+  "license": "MIT",
+  "readme": "ERROR: No README data found!"
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+  <title>Twitter Clone</title>
+</head>
+
+<body>
+  <div id="app"></div>
+</body>
+
+</html>
diff --git a/src/App.vue b/src/App.vue
@@ -0,0 +1,25 @@
+<template>
+   <div id="app">
+      <Sidebar/>
+      <router-view class="box"/>
+   </div>
+</template>
+
+<script>
+import Sidebar from "@/components/Sidebar";
+export default {
+   name: "App.vue",
+   components : {
+      Sidebar,
+   }
+}
+</script>
+
+<style lang="scss">
+   #app{
+      display: flex;
+   }
+   .box{
+      height: 200vh;
+   }
+</style>
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/components/Avatar.vue b/src/components/Avatar.vue
@@ -0,0 +1,38 @@
+<template>
+         <img class="profileImage" :class="size" :src="image" alt="avatar">
+</template>
+
+<script>
+export default {
+   name: "Avatar",
+   props : {
+      image: {
+         type: String,
+      },
+      size: {
+         type: String,
+         default: 'normal'
+      }
+   }
+}
+</script>
+
+<style lang="scss" scoped>
+   .profileImage{
+      display: inline-block;
+      position: relative;
+      border-radius: 50%;
+   }
+   .normal{
+      width: 40px;
+      height: 40px;
+   }
+   .large{
+      width: 50px;
+      height: 50px;
+   }
+   .xlarge{
+      width: 60px;
+      height: 60px;
+   }
+</style>
diff --git a/src/components/CustomButton.vue b/src/components/CustomButton.vue
@@ -0,0 +1,30 @@
+<template>
+   <button>
+      <slot/>
+   </button>
+</template>
+
+<script>
+export default {
+name: "CustomButton"
+}
+</script>
+
+<style scoped lang="scss">
+   button{
+      background: none;
+      border: none;
+      color: #FFFFFF;
+      font-weight: 700;
+      background: #1DA1F2;
+      outline: none;
+      cursor: pointer;
+      font-size: 15px;
+      border-radius: 99px;
+      transition: 300ms;
+
+      &:hover{
+         background: rgba(#1DA1F2, .9);
+      }
+   }
+</style>
diff --git a/src/components/CustomText.vue b/src/components/CustomText.vue
@@ -0,0 +1,45 @@
+<template>
+   <components :is="tag" :class="font">
+      <slot/>
+   </components>
+</template>
+
+<script>
+export default {
+name: "CustomText",
+   props : {
+      tag: {
+         type: String,
+         default: 'span'
+      },
+      font: {
+         type: String,
+         default: 'normal fw-normal',
+      }
+   }
+}
+</script>
+
+<style scoped>
+.small{
+   font-size: 13px;
+}
+.normal{
+   font-size: 14px;
+}
+.large{
+   font-size: 15px;
+}
+.xlarge{
+   font-size: 19px;
+}
+.fw-normal{
+   font-weight: 400;
+}
+.fw-bold{
+   font-weight: 700;
+}
+.fw-heavy{
+   font-weight: 800;
+}
+</style>