Skip to content

Commit df2b25e

Browse files
iamgergoiamgergo
committed
getting started with UI
1 parent fada7a2 commit df2b25e

30 files changed

+1049
-40
lines changed

‎public/favicon.png

3.5 KB
Loading

‎public/root-logo-dark.svg

Lines changed: 35 additions & 0 deletions
Loading

‎resources/js/Components/Icon.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<svg class="icon" aria-hidden="true" role="img" fill="currentColor" viewBox="0 0 24 24" width="24" height="24">
2+
<svg class="icon" aria-hidden="true" focusable="false" role="img" fill="currentColor" viewBox="0 0 24 24" width="24" height="24">
33
<use :xlink:href="`#icon-${name}`"></use>
44
</svg>
55
</template>

‎resources/js/Components/Layout.vue

Lines changed: 0 additions & 37 deletions
This file was deleted.

‎resources/js/Components/Layout/Header.vue

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<template>
2+
<header class="app-header">
3+
<div class="app-header__heading">
4+
<h1 class="app-header__title">Posts</h1>
5+
<nav class="app-header__breadcrumbs" aria-label="Breadcrumbs">
6+
<ol class="breadcrumbs">
7+
<li class="breadcrumb-item">
8+
<a href="#">Dashboard</a>
9+
</li>
10+
<li class="breadcrumb-item">
11+
<span aria-current="page">Posts</span>
12+
</li>
13+
</ol>
14+
</nav>
15+
</div>
16+
<div class="app-header__actions">
17+
<button type="button" class="btn btn--primary btn--open-search">
18+
<Icon class="btn__icon btn__icon--start" name="magnifier"></Icon>
19+
Quick search...<span class="btn__keybind">Ctrl K</span>
20+
</button>
21+
<button type="button" class="js-toggle-filter btn btn--secondary btn--icon">
22+
<Icon class="btn__icon btn__icon--start" name="filter-list"></Icon>
23+
</button>
24+
</div>
25+
</header>
26+
</template>
27+
28+
<script>
29+
import { Link } from '@inertiajs/inertia-vue3';
30+
31+
export default {
32+
components: {
33+
Link,
34+
},
35+
}
36+
</script>

‎resources/js/Components/Layout/Layout.vue

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<template>
2+
<div class="app">
3+
<Sidebar></Sidebar>
4+
<main class="app-body">
5+
<Nav></Nav>
6+
<div class="app-body__inner">
7+
<Header></Header>
8+
<slot></slot>
9+
</div>
10+
</main>
11+
</div>
12+
</template>
13+
14+
<script>
15+
import Header from './Header';
16+
import Nav from './Nav';
17+
import Sidebar from './Sidebar';
18+
19+
export default {
20+
components: {
21+
Header,
22+
Nav,
23+
Sidebar,
24+
},
25+
26+
computed: {
27+
resources() {
28+
return window.Root.resources;
29+
},
30+
user() {
31+
return window.Root.user;
32+
},
33+
},
34+
}
35+
</script>

‎resources/js/Components/Layout/Nav.vue

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<template>
2+
<div class="mobile-header">
3+
<div class="mobile-header__inner">
4+
<a href="#">
5+
<img class="mobile-header__logo" src="/vendor/root/root-logo-dark.svg" alt="Root">
6+
</a>
7+
<div class="mobile-header__actions">
8+
<button class="js-toggle-sidebar btn btn--secondary btn--icon">
9+
<Icon class="btn__icon btn__icon--start" name="menu-open"></Icon>
10+
</button>
11+
<div class="user-menu-wrapper">
12+
<button class="js-user-menu user-menu" aria-expanded="false" aria-label="User Menu">
13+
<img class="user-menu__avatar" src="https://s.gravatar.com/avatar/fd9479a898c593601efd2fe758a86dba?s=120">
14+
<div class="user-menu__caption">
15+
<span class="user-menu__name">Adam Laki</span>
16+
<span class="user-menu__role">Administrator</span>
17+
</div>
18+
<div class="js-user-menu-toggle user-menu__toggle">
19+
<Icon class="user-menu__arrow" name="unfold-more"></Icon>
20+
</div>
21+
</button>
22+
<ul
23+
class="js-user-menu-navigation user-menu-navigation user-menu-navigation--bottom"
24+
aria-labelledby="user-user-navigation"
25+
>
26+
<li>
27+
<a class="user-menu-navigation__item" aria-current="" href="#">Personal Informations</a>
28+
</li>
29+
<li>
30+
<a class="user-menu-navigation__item" aria-current="" href="#">Change Password</a>
31+
</li>
32+
<li>
33+
<button class="user-menu-navigation__item" type="button">Logout</button>
34+
</li>
35+
</ul>
36+
</div>
37+
</div>
38+
</div>
39+
</div>
40+
</template>
41+
42+
<script>
43+
import { Link } from '@inertiajs/inertia-vue3';
44+
45+
export default {
46+
components: {
47+
Link,
48+
},
49+
}
50+
</script>

‎resources/js/Components/Layout/Sidebar.vue

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<template>
2+
<aside class="js-app-sidebar app-sidebar">
3+
<div class="app-sidebar__header">
4+
<a href="/">
5+
<img class="app-sidebar__logo" src="/vendor/root/root-logo-dark.svg" alt="Root">
6+
</a>
7+
</div>
8+
<nav class="navigation app-sidebar__navigation" aria-label="Site">
9+
<ul>
10+
<li class="navigation-item">
11+
<a class="navigation-item__link" href="#">
12+
<Icon class="navigation-item__icon" name="dashboard"></Icon>
13+
<span class="navigation-item__caption">Dashboard</span>
14+
</a>
15+
</li>
16+
</ul>
17+
<p class="app-sidebar__title">Content</p>
18+
<ul>
19+
<li class="navigation-item is-open">
20+
<a class="navigation-item__link" href="#">
21+
<Icon class="navigation-item__icon" name="post"></Icon>
22+
<span class="navigation-item__caption">Posts</span>
23+
</a>
24+
<ul class="navigation-submenu">
25+
<li>
26+
<a href="#" aria-current="page">All Posts</a>
27+
</li>
28+
<li>
29+
<a href="#">New Post</a>
30+
</li>
31+
</ul>
32+
</li>
33+
</ul>
34+
<p class="app-sidebar__title">Administration</p>
35+
<ul>
36+
<li class="navigation-item">
37+
<a class="navigation-item__link" href="#">
38+
<Icon class="navigation-item__icon" name="person"></Icon>
39+
<span class="navigation-item__caption">Users</span>
40+
</a>
41+
</li>
42+
</ul>
43+
</nav>
44+
<div class="app-sidebar__footer">
45+
<div class="user-menu-wrapper">
46+
<button class="js-user-menu user-menu" aria-expanded="false" aria-label="User Menu">
47+
<img class="user-menu__avatar" src="https://s.gravatar.com/avatar/fd9479a898c593601efd2fe758a86dba?s=120">
48+
<div class="user-menu__caption">
49+
<span class="user-menu__name">Adam Laki</span>
50+
<span class="user-menu__role">Administrator</span>
51+
</div>
52+
<div class="js-user-menu-toggle user-menu__toggle">
53+
<Icon class="user-menu__arrow" name="unfold-more"></Icon>
54+
</div>
55+
</button>
56+
<ul
57+
class="js-user-menu-navigation user-menu-navigation user-menu-navigation--top"
58+
aria-labelledby="user-user-navigation"
59+
>
60+
<li>
61+
<a class="user-menu-navigation__item" aria-current="" href="#">Personal Informations</a>
62+
</li>
63+
<li>
64+
<a class="user-menu-navigation__item" aria-current="" href="#">Change Password</a>
65+
</li>
66+
<li>
67+
<button class="user-menu-navigation__item" type="button">Logout</button>
68+
</li>
69+
</ul>
70+
</div>
71+
</div>
72+
</aside>
73+
</template>
74+
75+
<script>
76+
import { Link } from '@inertiajs/inertia-vue3';
77+
78+
export default {
79+
components: {
80+
Link,
81+
},
82+
}
83+
</script>

‎resources/js/Plugins/Root.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import Cookie from './../Support/Cookie';
33
import Debounce from './../Directives/Debounce';
44
import DispatchesEvents from './../Mixins/DispatchesEvents';
55
import FormHandler from './../Components/Form/Handler';
6+
import Icon from './../Components/Icon';
67
import Translator from './../Support/Translator';
78
import WidgetHandler from './../Components/Widgets/Handler';
89

@@ -11,6 +12,7 @@ export default {
1112
app.mixin(DispatchesEvents);
1213

1314
app.component('FormHandler', FormHandler);
15+
app.component('Icon', Icon);
1416
app.component('WidgetHandler', WidgetHandler);
1517

1618
app.directive('debounce', Debounce);

‎resources/js/app.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { createApp, resolveComponent, h } from 'vue';
22
import { createInertiaApp } from '@inertiajs/inertia-vue3';
33
import Root from './Plugins/Root';
4-
import Layout from './Components/Layout';
4+
import Layout from './Components/Layout/Layout';
55

66
createInertiaApp({
77
resolve: (name) => {

‎resources/sass/_layout.scss

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
@use 'sprucecss/scss/spruce';
2+
3+
$sidebar-width: 20rem;
4+
5+
.app {
6+
background: linear-gradient(180deg, hsl(217, 100%, 97%) 4%, #fff);
7+
background-attachment: fixed;
8+
display: flex;
9+
flex-direction: column;
10+
min-height: 100vh;
11+
12+
@include spruce.breakpoint(md) {
13+
&-sidebar {
14+
width: $sidebar-width;
15+
}
16+
17+
&-body {
18+
margin-inline-start: $sidebar-width;
19+
}
20+
}
21+
}

0 commit comments

Comments
 (0)