getting started with UI

conedevelopment · Feb 11, 2022 · df2b25e · df2b25e
1 parent fada7a2
commit df2b25e
Show file tree

Hide file tree

Showing 30 changed files with 1,049 additions and 40 deletions.
diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/root-logo-dark.svg b/public/root-logo-dark.svg
diff --git a/resources/js/Components/Icon.vue b/resources/js/Components/Icon.vue
@@ -1,5 +1,5 @@
 <template>
-    <svg class="icon" aria-hidden="true" role="img" fill="currentColor" viewBox="0 0 24 24" width="24" height="24">
+    <svg class="icon" aria-hidden="true" focusable="false" role="img" fill="currentColor" viewBox="0 0 24 24" width="24" height="24">
         <use :xlink:href="`#icon-${name}`"></use>
     </svg>
 </template>

diff --git a/resources/js/Components/Layout.vue b/resources/js/Components/Layout.vue
diff --git a/resources/js/Components/Layout/Header.vue b/resources/js/Components/Layout/Header.vue
@@ -0,0 +1,36 @@
+<template>
+    <header class="app-header">
+        <div class="app-header__heading">
+            <h1 class="app-header__title">Posts</h1>
+            <nav class="app-header__breadcrumbs" aria-label="Breadcrumbs">
+                <ol class="breadcrumbs">
+                    <li class="breadcrumb-item">
+                        <a href="#">Dashboard</a>
+                    </li>
+                    <li class="breadcrumb-item">
+                        <span aria-current="page">Posts</span>
+                    </li>
+                </ol>
+            </nav>
+        </div>
+        <div class="app-header__actions">
+            <button type="button" class="btn btn--primary btn--open-search">
+                <Icon class="btn__icon btn__icon--start" name="magnifier"></Icon>
+                Quick search...<span class="btn__keybind">Ctrl K</span>
+            </button>
+            <button type="button" class="js-toggle-filter btn btn--secondary btn--icon">
+                <Icon class="btn__icon btn__icon--start" name="filter-list"></Icon>
+            </button>
+        </div>
+    </header>
+</template>
+
+<script>
+    import { Link } from '@inertiajs/inertia-vue3';
+
+    export default {
+        components: {
+            Link,
+        },
+    }
+</script>
diff --git a/resources/js/Components/Layout/Layout.vue b/resources/js/Components/Layout/Layout.vue
@@ -0,0 +1,35 @@
+<template>
+    <div class="app">
+        <Sidebar></Sidebar>
+        <main class="app-body">
+            <Nav></Nav>
+            <div class="app-body__inner">
+                <Header></Header>
+                <slot></slot>
+            </div>
+        </main>
+    </div>
+</template>
+
+<script>
+    import Header from './Header';
+    import Nav from './Nav';
+    import Sidebar from './Sidebar';
+
+    export default {
+        components: {
+            Header,
+            Nav,
+            Sidebar,
+        },
+
+        computed: {
+            resources() {
+                return window.Root.resources;
+            },
+            user() {
+                return window.Root.user;
+            },
+        },
+    }
+</script>
diff --git a/resources/js/Components/Layout/Nav.vue b/resources/js/Components/Layout/Nav.vue
@@ -0,0 +1,50 @@
+<template>
+    <div class="mobile-header">
+        <div class="mobile-header__inner">
+            <a href="#">
+                <img class="mobile-header__logo" src="/vendor/root/root-logo-dark.svg" alt="Root">
+            </a>
+            <div class="mobile-header__actions">
+                <button class="js-toggle-sidebar btn btn--secondary btn--icon">
+                    <Icon class="btn__icon btn__icon--start" name="menu-open"></Icon>
+                </button>
+                <div class="user-menu-wrapper">
+                    <button class="js-user-menu user-menu" aria-expanded="false" aria-label="User Menu">
+                        <img class="user-menu__avatar" src="https://s.gravatar.com/avatar/fd9479a898c593601efd2fe758a86dba?s=120">
+                        <div class="user-menu__caption">
+                            <span class="user-menu__name">Adam Laki</span>
+                            <span class="user-menu__role">Administrator</span>
+                        </div>
+                        <div class="js-user-menu-toggle user-menu__toggle">
+                            <Icon class="user-menu__arrow" name="unfold-more"></Icon>
+                        </div>
+                    </button>
+                    <ul
+                        class="js-user-menu-navigation user-menu-navigation user-menu-navigation--bottom"
+                        aria-labelledby="user-user-navigation"
+                    >
+                        <li>
+                            <a class="user-menu-navigation__item" aria-current="" href="#">Personal Informations</a>
+                        </li>
+                        <li>
+                            <a class="user-menu-navigation__item" aria-current="" href="#">Change Password</a>
+                        </li>
+                        <li>
+                            <button class="user-menu-navigation__item" type="button">Logout</button>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import { Link } from '@inertiajs/inertia-vue3';
+
+    export default {
+        components: {
+            Link,
+        },
+    }
+</script>
diff --git a/resources/js/Components/Layout/Sidebar.vue b/resources/js/Components/Layout/Sidebar.vue
@@ -0,0 +1,83 @@
+<template>
+    <aside class="js-app-sidebar app-sidebar">
+        <div class="app-sidebar__header">
+            <a href="/">
+                <img class="app-sidebar__logo" src="/vendor/root/root-logo-dark.svg" alt="Root">
+            </a>
+        </div>
+        <nav class="navigation app-sidebar__navigation" aria-label="Site">
+            <ul>
+                <li class="navigation-item">
+                    <a class="navigation-item__link" href="#">
+                        <Icon class="navigation-item__icon" name="dashboard"></Icon>
+                        <span class="navigation-item__caption">Dashboard</span>
+                    </a>
+                </li>
+            </ul>
+            <p class="app-sidebar__title">Content</p>
+            <ul>
+                <li class="navigation-item is-open">
+                    <a class="navigation-item__link" href="#">
+                        <Icon class="navigation-item__icon" name="post"></Icon>
+                        <span class="navigation-item__caption">Posts</span>
+                    </a>
+                    <ul class="navigation-submenu">
+                        <li>
+                            <a href="#" aria-current="page">All Posts</a>
+                        </li>
+                        <li>
+                            <a href="#">New Post</a>
+                        </li>
+                    </ul>
+                </li>
+            </ul>
+            <p class="app-sidebar__title">Administration</p>
+            <ul>
+                <li class="navigation-item">
+                    <a class="navigation-item__link" href="#">
+                        <Icon class="navigation-item__icon" name="person"></Icon>
+                        <span class="navigation-item__caption">Users</span>
+                    </a>
+                </li>
+            </ul>
+        </nav>
+        <div class="app-sidebar__footer">
+            <div class="user-menu-wrapper">
+                <button class="js-user-menu user-menu" aria-expanded="false" aria-label="User Menu">
+                    <img class="user-menu__avatar" src="https://s.gravatar.com/avatar/fd9479a898c593601efd2fe758a86dba?s=120">
+                    <div class="user-menu__caption">
+                        <span class="user-menu__name">Adam Laki</span>
+                        <span class="user-menu__role">Administrator</span>
+                    </div>
+                    <div class="js-user-menu-toggle user-menu__toggle">
+                        <Icon class="user-menu__arrow" name="unfold-more"></Icon>
+                    </div>
+                </button>
+                <ul
+                    class="js-user-menu-navigation user-menu-navigation user-menu-navigation--top"
+                    aria-labelledby="user-user-navigation"
+                >
+                    <li>
+                        <a class="user-menu-navigation__item" aria-current="" href="#">Personal Informations</a>
+                    </li>
+                    <li>
+                        <a class="user-menu-navigation__item" aria-current="" href="#">Change Password</a>
+                    </li>
+                    <li>
+                        <button class="user-menu-navigation__item" type="button">Logout</button>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </aside>
+</template>
+
+<script>
+    import { Link } from '@inertiajs/inertia-vue3';
+
+    export default {
+        components: {
+            Link,
+        },
+    }
+</script>
diff --git a/resources/js/Plugins/Root.js b/resources/js/Plugins/Root.js
@@ -3,6 +3,7 @@ import Cookie from './../Support/Cookie';
 import Debounce from './../Directives/Debounce';
 import DispatchesEvents from './../Mixins/DispatchesEvents';
 import FormHandler from './../Components/Form/Handler';
+import Icon from './../Components/Icon';
 import Translator from './../Support/Translator';
 import WidgetHandler from './../Components/Widgets/Handler';
 
@@ -11,6 +12,7 @@ export default {
         app.mixin(DispatchesEvents);
 
         app.component('FormHandler', FormHandler);
+        app.component('Icon', Icon);
         app.component('WidgetHandler', WidgetHandler);
 
         app.directive('debounce', Debounce);

diff --git a/resources/js/app.js b/resources/js/app.js
@@ -1,7 +1,7 @@
 import { createApp, resolveComponent, h } from 'vue';
 import { createInertiaApp } from '@inertiajs/inertia-vue3';
 import Root from './Plugins/Root';
-import Layout from './Components/Layout';
+import Layout from './Components/Layout/Layout';
 
 createInertiaApp({
     resolve: (name) => {

diff --git a/resources/sass/_layout.scss b/resources/sass/_layout.scss
@@ -0,0 +1,21 @@
+@use 'sprucecss/scss/spruce';
+
+$sidebar-width: 20rem;
+
+.app {
+  background: linear-gradient(180deg, hsl(217, 100%, 97%) 4%, #fff);
+  background-attachment: fixed;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+
+  @include spruce.breakpoint(md) {
+    &-sidebar {
+      width: $sidebar-width;
+    }
+
+    &-body {
+      margin-inline-start: $sidebar-width;
+    }
+  }
+}