début de la création du site

xgui4 · Jun 22, 2024 · 305c519 · 305c519
1 parent 322e9d6
commit 305c519
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 3 deletions.
diff --git a/NOTE_INSTALLATION.docx b/NOTE_INSTALLATION.docx
diff --git a/css/tbd b/css/tbd
diff --git a/doc/tbd b/doc/tbd
diff --git a/index.html b/index.html
@@ -3,11 +3,12 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
     <title>Radium Launcher</title>
 </head>
 <body>
-    Ce site est en construction.
-
-    Pour la documentation wip - > <a href="Radium-Launcher/doc/html/index.html"> Cliquer ici</a>
+    <nav id="navbar" class="navbar navbar-expand-lg bg-body-tertiary"> </nav>
+    <script src="js/navbar.js"></script>
 </body>
 </html>
diff --git a/js/navbar.js b/js/navbar.js
@@ -0,0 +1,49 @@
+const TITLE = "Radium Launcher"
+
+/**
+ * Obtenir une string qui sert d'affichage pour le menu de navigation
+ * @returns str (string d'affichage des pages de navigation)
+ */
+function displayPage()
+{
+    return pages.map(page => `
+    <li class="nav-item">
+        <a class="nav-link ${page.disabled ? 'disabled' : 'active'}" aria-disabled=${page.disabled} href=${page.url}>${page.title}</a>
+    </li>
+    `).join('')
+}
+
+const page = {
+    title : "Page 1",
+    url : "#",
+    disabled : true,
+}
+
+const page2 = {
+    title : "Page 2",
+    url : "#",
+    disabled : true,
+}
+
+const page3 = {
+    title : "Page 3",
+    url : "#",
+    disabled : true
+}
+
+let pages = [page, page2, page3];
+let nav = document.getElementById('navbar');
+
+nav.innerHTML = `
+  <div class="container-fluid">
+    <a class="navbar-brand" href="#">${TITLE}</a>
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarNav">
+      <ul class="navbar-nav">
+        ${displayPage()}
+      </ul>
+    </div>
+  </div>
+`