Skip to content

Commit b24af18

Browse files
author
islamroshan
committed
Admin Dashboard
1 parent 9a84c4b commit b24af18

File tree

13 files changed

+567
-115
lines changed

13 files changed

+567
-115
lines changed

Diff for: ‎package-lock.json

+8-8
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎package.json

+4-5
Original file line numberDiff line numberDiff line change
@@ -8,26 +8,26 @@
88
"@babel/plugin-proposal-class-properties": "^7.14.5",
99
"@babel/plugin-proposal-decorators": "^7.15.4",
1010
"@vue/compiler-sfc": "^3.2.18",
11-
"laravel-vite-plugin": "^0.2.1",
12-
"vite": "^2.9.11",
1311
"axios": "^0.21.4",
1412
"crypto-js": "^4.1.1",
1513
"js-base64": "^3.7.2",
14+
"laravel-vite-plugin": "^0.2.1",
1615
"lodash": "^4.17.19",
1716
"postcss": "^8.1.14",
1817
"resolve-url-loader": "^4.0.0",
1918
"sass": "^1.32.11",
2019
"sass-loader": "^11.0.1",
2120
"ts-loader": "^9.2.5",
2221
"typescript": "^4.4.3",
22+
"vite": "^2.9.11",
2323
"vue-loader": "^16.8.1"
2424
},
2525
"dependencies": {
26+
"@vitejs/plugin-vue": "^2.3.3",
2627
"@vuelidate/core": "^2.0.0-alpha.27",
2728
"@vuelidate/validators": "^2.0.0-alpha.23",
28-
"@vitejs/plugin-vue": "^2.3.3",
2929
"moment": "^2.29.1",
30-
"primeflex": "2.0.0",
30+
"primeflex": "^3.2.1",
3131
"primeicons": "^5.0.0",
3232
"primevue": "^3.12.0",
3333
"quill": "^1.3.6",
@@ -38,4 +38,3 @@
3838
"vuex": "^4.0.2"
3939
}
4040
}
41-

Diff for: ‎resources/js/App.vue

+157-11
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,172 @@
11
<template>
2-
<div>
3-
<center> <h2>Development Starter Project</h2> <h1>Laravel 9 + Vue 3 + Vue Class Component + Vuex + TypeScript</h1></center>
4-
</div>
2+
<header>
3+
<Menubar
4+
class="
5+
layout-topbar
6+
w-full
7+
fixed
8+
h-5
9+
shadow-1
10+
bg-white
11+
border-noround border-none
12+
"
13+
:model="showSidebar ? null : sidebarItems"
14+
>
15+
<template #start>
16+
<img
17+
alt="logo"
18+
src="http://spantiklab.com/images/logo.png"
19+
class="logo"
20+
width="220"
21+
/>
22+
</template>
23+
24+
<template #end v-if="showSidebar">
25+
<p>Welcome, Muhammad Islam</p>
26+
</template>
27+
</Menubar>
28+
</header>
29+
<main>
30+
<Menu
31+
class="layout-sidebar border-noround border-none border-right-1"
32+
:model="sidebarItems"
33+
v-if="showSidebar"
34+
/>
35+
<div class="layout-main">
36+
<div class="layout-content">
37+
<div class="px-5 py-7">
38+
<router-view />
39+
</div>
40+
</div>
41+
<div
42+
class="layout-footer flex align-items-center justify-content-between"
43+
>
44+
<small>Copyright© <b>spantiklab.com</b> Car Rent</small>
45+
<small>Version 3.0</small>
46+
</div>
47+
</div>
48+
</main>
549
</template>
650

751
<script lang="ts">
852
import { Options, Vue } from "vue-class-component";
953
54+
import { useStore } from "vuex";
55+
1056
@Options({
11-
components: {
12-
13-
},
57+
components: {},
1458
})
1559
export default class App extends Vue {
16-
initial = 0
60+
showSidebar: Boolean = true;
1761
18-
increment() {
19-
this.initial += 1
20-
}
2162
mounted() {
22-
console.log('hello');
63+
window.onresize = () => {
64+
if (window.innerWidth < 960) {
65+
this.showSidebar = false;
66+
} else {
67+
this.showSidebar = true;
68+
}
69+
};
2370
}
71+
72+
sidebarItems = [
73+
{
74+
label: "General",
75+
items: [
76+
{
77+
label: "Dashboard",
78+
to: "/admin",
79+
},
80+
{
81+
label: "Reservations",
82+
},
83+
{
84+
label: "Types and Rates",
85+
},
86+
{
87+
label: "Extras",
88+
},
89+
{
90+
label: "Office Locations",
91+
},
92+
{
93+
label: "Users",
94+
},
95+
96+
],
97+
},
98+
{
99+
label: "Car Inventory",
100+
items: [
101+
{
102+
label: "Cars",
103+
},
104+
{
105+
label: "Availability",
106+
},
107+
],
108+
},
109+
{
110+
label: "Options",
111+
items: [
112+
{
113+
label: "Rental Settings",
114+
},
115+
{
116+
label: "Payments",
117+
},
118+
{
119+
label: "Checkout Form",
120+
},
121+
{
122+
label: "Notificatins",
123+
},
124+
{
125+
label: "Terms",
126+
},
127+
],
128+
},
129+
{
130+
label: "System Options",
131+
items: [
132+
{
133+
label: "General",
134+
},
135+
{
136+
label: "API Keys",
137+
},
138+
{
139+
label: "Email Settings",
140+
},
141+
{
142+
label: "SMS Settings",
143+
},
144+
{
145+
label: "Languages",
146+
},
147+
{
148+
label: "Login & Protection",
149+
},
150+
{
151+
label: "Countries",
152+
},
153+
{
154+
label: "Corn Jobs",
155+
},
156+
],
157+
},
158+
{
159+
label: "Profile Settings",
160+
items: [
161+
{
162+
label: "Profile",
163+
},
164+
{
165+
label: "Log out",
166+
},
167+
],
168+
},
169+
]
24170
}
25171
</script>
26172
<style scoped>

Diff for: ‎resources/js/app.ts

+8-9
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import './bootstrap.js'
22
import { createApp } from 'vue';
33
import App from "./App.vue";
4-
// import router from './router/router';
5-
// import store from './store/store';
4+
import router from './router/router';
5+
import store from './store/store';
66

77
import PrimeVue from "primevue/config";
88
import Menubar from 'primevue/menubar';
9+
import MegaMenu from 'primevue/megamenu';
910
import Sidebar from 'primevue/sidebar';
1011
import Button from 'primevue/button';
1112
import Image from 'primevue/image';
@@ -34,16 +35,12 @@ import DataView from 'primevue/dataview';
3435
import Editor from 'primevue/editor';
3536
import InputNumber from 'primevue/inputnumber';
3637
import Tooltip from 'primevue/tooltip';
37-
38-
import 'primevue/resources/themes/lara-light-blue/theme.css';
39-
import "primevue/resources/primevue.min.css";
40-
import "primeicons/primeicons.css";
41-
import 'primeflex/primeflex.css';
38+
import Menu from 'primevue/menu';
4239

4340
const app = createApp(App);
4441
app.use(PrimeVue, { ripple: true, inputStyle: 'outlined' });
45-
// app.use(router);
46-
// app.use(store);
42+
app.use(router);
43+
app.use(store);
4744
app.use(ToastService);
4845
app.use(ConfirmationService);
4946

@@ -73,6 +70,8 @@ app.component('Avatar', Avatar);
7370
app.component('DataView', DataView);
7471
app.component('Editor', Editor);
7572
app.component('InputNumber', InputNumber);
73+
app.component('Menu', Menu);
74+
app.component('MegaMenu', MegaMenu)
7675

7776
app.directive('tooltip', Tooltip);
7877

0 commit comments

Comments
 (0)