First Commit, try to display a custom navbar

2 years ago · 2866d4bf0a
parent 69a5373032
commit 2866d4bf0a
4 changed files with 90 additions and 0 deletions
--- a/css/style.css
+++ b/css/style.css
@ -0,0 +1,37 @@
 /* Onglet */
 .menu-pannel {
    background-color: #000000;
    color: #ffffff;
    width: 100%;
 }
 .menu-pannel-item {
    display: inline-block;
    cursor: pointer;
    padding: 5px;
 }
 .active {
    display: block;
 }
 .hidden {
    display: none;
 }
 /* Formulaire */
 form label,
 form input {
    display: block;
 }
 /* CARD */
 .team-card {
    border: #000000 1px;
    border-radius: 5px;
 }
--- a/index.html
+++ b/index.html
@ -0,0 +1,32 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <title>My awesome team</title>
    <link rel="stylesheet" href="/css/style.css" />
 </head>
 <body>
    <div id="app">
        <navbar></navbar>
    </div>
    <script type="module">
        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
        import NavBar from '/src/view/navbar.js';
        const app = createApp({
            data(){
                return {
                    message: 'Bonjour App'
                }
            }
        })
        app.component('NavBar', NavBar);
        app.mount('#app');
      </script>
 </body>
 </html>
--- a/src/view/link_service.js
+++ b/src/view/link_service.js
@ -0,0 +1,10 @@
 export default class LinkService{
    getLinks(){
        return [
        'https://www.google.com',
        'https://www.youtube.com',
        'https://www.github.com',
        ];
    }
 }
--- a/src/view/navbar.js
+++ b/src/view/navbar.js
@ -0,0 +1,11 @@
 export default {
    template:`
    <div>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Teams</a></li>
            <li><a href="#">Results</a></li>
        </ul>
    </div>
    `
 };