Collapse menu added

Bug:Button does'nt disappear when the windows is wide

.idea/workspace.xml

@@ -2,11 +2,8 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="458baa9a-0ac3-475e-8174-3ab8ea444385" name="Default Changelist" comment="">
-      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/css/custom/main.css" beforeDir="false" afterPath="$PROJECT_DIR$/css/custom/main.css" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/cv.html" beforeDir="false" afterPath="$PROJECT_DIR$/cv.html" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/home.html" beforeDir="false" afterPath="$PROJECT_DIR$/home.html" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/projects.html" beforeDir="false" afterPath="$PROJECT_DIR$/projects.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/index.html" afterDir="false" />
     </list>
     <ignored path="$PROJECT_DIR$/.tmp/" />
     <ignored path="$PROJECT_DIR$/temp/" />
@@ -20,19 +17,19 @@
   <component name="FileEditorManager">
     <leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
       <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/home.html">
+        <entry file="file://$PROJECT_DIR$/cv.html">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="340">
-              <caret line="20" column="14" lean-forward="true" selection-start-line="20" selection-start-column="14" selection-end-line="20" selection-end-column="26" />
+            <state relative-caret-position="544">
+              <caret line="295" column="21" selection-start-line="295" selection-start-column="21" selection-end-line="295" selection-end-column="21" />
             </state>
           </provider>
         </entry>
       </file>
-      <file pinned="false" current-in-tab="true">
-        <entry file="file://$PROJECT_DIR$/cv.html">
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/index.html">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="544">
-              <caret line="287" column="21" selection-start-line="287" selection-start-column="21" selection-end-line="287" selection-end-column="21" />
+            <state relative-caret-position="255">
+              <caret line="25" column="120" selection-start-line="25" selection-start-column="120" selection-end-line="25" selection-end-column="120" />
             </state>
           </provider>
         </entry>
@@ -40,17 +37,17 @@
       <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/projects.html">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="459">
-              <caret line="63" column="24" lean-forward="true" selection-start-line="63" selection-start-column="24" selection-end-line="63" selection-end-column="24" />
+            <state relative-caret-position="1071">
+              <caret line="71" column="24" selection-start-line="71" selection-start-column="24" selection-end-line="71" selection-end-column="24" />
             </state>
           </provider>
         </entry>
       </file>
-      <file pinned="false" current-in-tab="false">
+      <file pinned="false" current-in-tab="true">
         <entry file="file://$PROJECT_DIR$/css/custom/main.css">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="170">
-              <caret line="10" column="19" selection-start-line="10" selection-start-column="19" selection-end-line="10" selection-end-column="19" />
+            <state relative-caret-position="379">
+              <caret line="34" column="29" selection-start-line="34" selection-start-column="29" selection-end-line="34" selection-end-column="29" />
             </state>
           </provider>
         </entry>
@@ -58,8 +55,8 @@
       <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/css/bootstrap.css">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="242">
-              <caret line="6095" column="20" lean-forward="true" selection-start-line="6095" selection-start-column="20" selection-end-line="6095" selection-end-column="27" />
+            <state relative-caret-position="103615">
+              <caret line="6095" column="20" selection-start-line="6095" selection-start-column="20" selection-end-line="6095" selection-end-column="27" />
             </state>
           </provider>
         </entry>
@@ -100,6 +97,7 @@
         <option value="$PROJECT_DIR$/home.html" />
         <option value="$PROJECT_DIR$/projects.html" />
         <option value="$PROJECT_DIR$/cv.html" />
+        <option value="$PROJECT_DIR$/index.html" />
         <option value="$PROJECT_DIR$/css/custom/main.css" />
       </list>
     </option>
@@ -116,6 +114,7 @@
       <foldersAlwaysOnTop value="true" />
     </navigator>
     <panes>
+      <pane id="Scope" />
       <pane id="ProjectPane">
         <subPane>
           <expand>
@@ -138,7 +137,6 @@
           <select />
         </subPane>
       </pane>
-      <pane id="Scope" />
     </panes>
   </component>
   <component name="PropertiesComponent">
@@ -174,17 +172,17 @@
       <workItem from="1544467535946" duration="8368000" />
       <workItem from="1544552178602" duration="6585000" />
       <workItem from="1544635542542" duration="4441000" />
+      <workItem from="1545071688272" duration="7592000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="23939000" />
+    <option name="totallyTimeSpent" value="31531000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="-3" y="25" width="1602" height="885" extended-state="0" />
-    <editor active="true" />
     <layout>
-      <window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.12905276" />
+      <window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.12841704" />
       <window_info id="Structure" order="1" side_tool="true" weight="0.25" />
       <window_info id="Favorites" order="2" side_tool="true" />
       <window_info anchor="bottom" id="Message" order="0" />
@@ -208,38 +206,45 @@
   </component>
   <component name="editorHistoryManager">
     <entry file="file://$PROJECT_DIR$/html/home.html" />
-    <entry file="file://$PROJECT_DIR$/css/bootstrap.css">
+    <entry file="file://$PROJECT_DIR$/home.html">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="242">
-          <caret line="6095" column="20" lean-forward="true" selection-start-line="6095" selection-start-column="20" selection-end-line="6095" selection-end-column="27" />
+        <state relative-caret-position="340">
+          <caret line="20" column="14" selection-start-line="20" selection-start-column="14" selection-end-line="20" selection-end-column="26" />
         </state>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/projects.html">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="459">
-          <caret line="63" column="24" lean-forward="true" selection-start-line="63" selection-start-column="24" selection-end-line="63" selection-end-column="24" />
+        <state relative-caret-position="1071">
+          <caret line="71" column="24" selection-start-line="71" selection-start-column="24" selection-end-line="71" selection-end-column="24" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/home.html">
+    <entry file="file://$PROJECT_DIR$/css/bootstrap.css">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="340">
-          <caret line="20" column="14" lean-forward="true" selection-start-line="20" selection-start-column="14" selection-end-line="20" selection-end-column="26" />
+        <state relative-caret-position="103615">
+          <caret line="6095" column="20" selection-start-line="6095" selection-start-column="20" selection-end-line="6095" selection-end-column="27" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/css/custom/main.css">
+    <entry file="file://$PROJECT_DIR$/cv.html">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="170">
-          <caret line="10" column="19" selection-start-line="10" selection-start-column="19" selection-end-line="10" selection-end-column="19" />
+        <state relative-caret-position="544">
+          <caret line="295" column="21" selection-start-line="295" selection-start-column="21" selection-end-line="295" selection-end-column="21" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/cv.html">
+    <entry file="file://$PROJECT_DIR$/index.html">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="544">
-          <caret line="287" column="21" selection-start-line="287" selection-start-column="21" selection-end-line="287" selection-end-column="21" />
+        <state relative-caret-position="255">
+          <caret line="25" column="120" selection-start-line="25" selection-start-column="120" selection-end-line="25" selection-end-column="120" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/css/custom/main.css">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="379">
+          <caret line="34" column="29" selection-start-line="34" selection-start-column="29" selection-end-line="34" selection-end-column="29" />
         </state>
       </provider>
     </entry>

css/custom/main.css

@@ -1,15 +1,13 @@
 /* Global */
 body {
     padding-top: 5rem;
-    background-color: rgb(240, 255, 240);
+    background-color: rgb(230, 255, 230);
 }
 .focus-center {
     padding: 3rem 1.5rem;
     text-align: center;
 }
-.navbar-brand {
-    font-size: 2em;
-}
+
 h1 {
     font-size: 5em;
 }
@@ -20,6 +18,33 @@ h4 {
     color: #0b2e13;
 }
 
+/* Navigation bar */
+.navbar-brand {
+    font-size: 2em;
+}
+
+@keyframes pop-menu-anim {
+    from {background-color: rgb(230, 255, 230);
+        transform: rotate(90deg);}
+    to {background-color: #eee;
+        transform: rotate(0deg);}
+}
+
+.jovian-toggler {
+    background-color: rgb(230, 255, 230);
+    transform: rotate(90deg);
+}
+.jovian-toggler:hover {
+    background-color: #eee;
+    transform: rotate(0deg);
+    animation-name: pop-menu-anim;
+    animation-duration: 0.4s;
+}
+.jovian-toggler:active {
+    background-color: #fff;
+    transform: rotate(0deg);
+}
+
 /* CV */
 .city {
     font-style: italic;

cv.html

@@ -18,44 +18,47 @@
 <!-- Navbar -->
 <nav class="navbar navbar-expand-md navbar-dark bg-success fixed-top">
     <a class="navbar-brand" href="index.html">Jovian Hersemeule</a>
-
-    <ul class="navbar-nav mr-auto">
-        <li class="nav-item">
-            <a class="nav-link" href="index.html">
-                <img src="https://img.icons8.com/color/48/000000/city.png" alt="|">
-                Accueil
-            </a>
-        </li>
-        <li class="nav-item active">
-            <div class="nav-link">
-                <img src="https://img.icons8.com/color/48/000000/parse-from-clipboard.png" alt="|">
-                CV
-            </div>
-        </li>
-        <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="projects.html" id="dropdown01" data-toggle="dropdown"
-               aria-haspopup="true" aria-expanded="false">
-                <img src="https://img.icons8.com/color/48/000000/code.png" alt="|">
-                Projets
-            </a>
-            <div class="dropdown-menu" aria-labelledby="dropdown01">
-                <a class="dropdown-item" href="projects.html">Liste des projets</a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="projets/pro_static_site.html">
-                    Jovian Website
-                </a>
-                <a class="dropdown-item" href="projets/pro_ascii_space.html">
-                    ASCII Space Destroyer
-                </a>
-                <a class="dropdown-item" href="projets/pro_pulsar.html">
-                    Pulsar
+    <img class="rounded-circle jovian-toggler" type="button" data-toggle="collapse" data-target="#joviaNav" aria-controls="joviaNav"
+          aria-expanded="false" aria-label="Dérouler le menu" src="https://img.icons8.com/color/48/000000/menu-2.png" alt="V">
+    <div class="collapse navbar-collapse" id="joviaNav">
+        <ul class="navbar-nav mr-auto">
+            <li class="nav-item">
+                <a class="nav-link" href="index.html">
+                    <img src="https://img.icons8.com/color/48/000000/city.png" alt="|">
+                    Accueil
                 </a>
-                <a class="dropdown-item" href="projets/pro_quoridor.html">
-                    Quoridor
+            </li>
+            <li class="nav-item active">
+                <div class="nav-link">
+                    <img src="https://img.icons8.com/color/48/000000/parse-from-clipboard.png" alt="|">
+                    CV
+                </div>
+            </li>
+            <li class="nav-item dropdown">
+                <a class="nav-link dropdown-toggle" href="projects.html" id="dropdown01" data-toggle="dropdown"
+                   aria-haspopup="true" aria-expanded="false">
+                    <img src="https://img.icons8.com/color/48/000000/code.png" alt="|">
+                    Projets
                 </a>
-            </div>
-        </li>
-    </ul>
+                <div class="dropdown-menu" aria-labelledby="dropdown01">
+                    <a class="dropdown-item" href="projects.html">Liste des projets</a>
+                    <div class="dropdown-divider"></div>
+                    <a class="dropdown-item" href="projets/pro_static_site.html">
+                        Jovian Website
+                    </a>
+                    <a class="dropdown-item" href="projets/pro_ascii_space.html">
+                        ASCII Space Destroyer
+                    </a>
+                    <a class="dropdown-item" href="projets/pro_pulsar.html">
+                        Pulsar
+                    </a>
+                    <a class="dropdown-item" href="projets/pro_quoridor.html">
+                        Quoridor
+                    </a>
+                </div>
+            </li>
+        </ul>
+    </div>
 </nav>
 
 <main role="main" class="container">

index.html

@@ -19,44 +19,47 @@
 <!-- Navbar -->
 <nav class="navbar navbar-expand-md navbar-dark bg-success fixed-top">
     <a class="navbar-brand" href="index.html">Jovian Hersemeule</a>
-
-    <ul class="navbar-nav mr-auto">
-        <li class="nav-item active">
-            <div class="nav-link">
-                <img src="https://img.icons8.com/color/48/000000/city.png" alt="|">
-                Accueil
-            </div>
-        </li>
-        <li class="nav-item">
-            <a class="nav-link" href="cv.html">
-                <img src="https://img.icons8.com/color/48/000000/parse-from-clipboard.png" alt="|">
-                CV
-            </a>
-        </li>
-        <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="projects.html" id="dropdown01" data-toggle="dropdown"
-               aria-haspopup="true" aria-expanded="false">
-                <img src="https://img.icons8.com/color/48/000000/code.png" alt="|">
-                Projets
-            </a>
-            <div class="dropdown-menu" aria-labelledby="dropdown01">
-                <a class="dropdown-item" href="projects.html">Liste des projets</a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="projets/pro_static_site.html">
-                    Jovian Website
-                </a>
-                <a class="dropdown-item" href="projets/pro_ascii_space.html">
-                    ASCII Space Destroyer
+    <img class="rounded-circle jovian-toggler" type="button" data-toggle="collapse" data-target="#joviaNav" aria-controls="joviaNav"
+          aria-expanded="false" aria-label="Dérouler le menu" src="https://img.icons8.com/color/48/000000/menu-2.png" alt="V">
+    <div class="collapse navbar-collapse" id="joviaNav">
+        <ul class="navbar-nav mr-auto">
+            <li class="nav-item active">
+                <div class="nav-link">
+                    <img src="https://img.icons8.com/color/48/000000/city.png" alt="|">
+                    Accueil
+                </div>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="cv.html">
+                    <img src="https://img.icons8.com/color/48/000000/parse-from-clipboard.png" alt="|">
+                    CV
                 </a>
-                <a class="dropdown-item" href="projets/pro_pulsar.html">
-                    Pulsar
+            </li>
+            <li class="nav-item dropdown">
+                <a class="nav-link dropdown-toggle" href="projects.html" id="dropdown01" data-toggle="dropdown"
+                   aria-haspopup="true" aria-expanded="false">
+                    <img src="https://img.icons8.com/color/48/000000/code.png" alt="|">
+                    Projets
                 </a>
-                <a class="dropdown-item" href="projets/pro_quoridor.html">
-                    Quoridor
-                </a>
-            </div>
-        </li>
-    </ul>
+                <div class="dropdown-menu" aria-labelledby="dropdown01">
+                    <a class="dropdown-item" href="projects.html">Liste des projets</a>
+                    <div class="dropdown-divider"></div>
+                    <a class="dropdown-item" href="projets/pro_static_site.html">
+                        Jovian Website
+                    </a>
+                    <a class="dropdown-item" href="projets/pro_ascii_space.html">
+                        ASCII Space Destroyer
+                    </a>
+                    <a class="dropdown-item" href="projets/pro_pulsar.html">
+                        Pulsar
+                    </a>
+                    <a class="dropdown-item" href="projets/pro_quoridor.html">
+                        Quoridor
+                    </a>
+                </div>
+            </li>
+        </ul>
+    </div>
 </nav>
 
 <!-- Content -->

projects.html

@@ -19,44 +19,47 @@
 <!-- Navbar -->
 <nav class="navbar navbar-expand-md navbar-dark bg-success fixed-top">
     <a class="navbar-brand" href="index.html">Jovian Hersemeule</a>
-
-    <ul class="navbar-nav mr-auto">
-        <li class="nav-item">
-            <a class="nav-link" href="index.html">
-                <img src="https://img.icons8.com/color/48/000000/city.png" alt="|">
-                Accueil
-            </a>
-        </li>
-        <li class="nav-item">
-            <a class="nav-link" href="cv.html">
-                <img src="https://img.icons8.com/color/48/000000/parse-from-clipboard.png" alt="|">
-                CV
-            </a>
-        </li>
-        <li class="nav-item active dropdown">
-            <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown"
-               aria-haspopup="true" aria-expanded="false">
-                <img src="https://img.icons8.com/color/48/000000/code.png" alt="|">
-                Projets
-            </a>
-            <div class="dropdown-menu" aria-labelledby="dropdown01">
-                <div class="dropdown-item active">Liste des projets</div>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="projets/pro_static_site.html">
-                    Jovian Website
-                </a>
-                <a class="dropdown-item" href="projets/pro_ascii_space.html">
-                    ASCII Space Destroyer
+    <img class="rounded-circle jovian-toggler" type="button" data-toggle="collapse" data-target="#joviaNav" aria-controls="joviaNav"
+          aria-expanded="false" aria-label="Dérouler le menu" src="https://img.icons8.com/color/48/000000/menu-2.png" alt="V">
+    <div class="collapse navbar-collapse" id="joviaNav">
+        <ul class="navbar-nav mr-auto">
+            <li class="nav-item">
+                <a class="nav-link" href="index.html">
+                    <img src="https://img.icons8.com/color/48/000000/city.png" alt="|">
+                    Accueil
                 </a>
-                <a class="dropdown-item" href="projets/pro_pulsar.html">
-                    Pulsar
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="cv.html">
+                    <img src="https://img.icons8.com/color/48/000000/parse-from-clipboard.png" alt="|">
+                    CV
                 </a>
-                <a class="dropdown-item" href="projets/pro_quoridor.html">
-                    Quoridor
+            </li>
+            <li class="nav-item active dropdown">
+                <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown"
+                   aria-haspopup="true" aria-expanded="false">
+                    <img src="https://img.icons8.com/color/48/000000/code.png" alt="|">
+                    Projets
                 </a>
-            </div>
-        </li>
-    </ul>
+                <div class="dropdown-menu" aria-labelledby="dropdown01">
+                    <div class="dropdown-item active">Liste des projets</div>
+                    <div class="dropdown-divider"></div>
+                    <a class="dropdown-item" href="projets/pro_static_site.html">
+                        Jovian Website
+                    </a>
+                    <a class="dropdown-item" href="projets/pro_ascii_space.html">
+                        ASCII Space Destroyer
+                    </a>
+                    <a class="dropdown-item" href="projets/pro_pulsar.html">
+                        Pulsar
+                    </a>
+                    <a class="dropdown-item" href="projets/pro_quoridor.html">
+                        Quoridor
+                    </a>
+                </div>
+            </li>
+        </ul>
+    </div>
 </nav>
 
 <!-- Main -->

projets/pro_ascii_space.html

@@ -19,36 +19,39 @@
 <!-- Navbar -->
 <nav class="navbar navbar-expand-md navbar-dark bg-success fixed-top">
     <a class="navbar-brand" href="../index.html">Jovian Hersemeule</a>
-
-    <ul class="navbar-nav mr-auto">
-        <li class="nav-item">
-            <a class="nav-link" href="../index.html">
-                <img src="https://img.icons8.com/color/48/000000/city.png" alt="|">
-                Accueil
-            </a>
-        </li>
-        <li class="nav-item">
-            <a class="nav-link" href="../cv.html">
-                <img src="https://img.icons8.com/color/48/000000/parse-from-clipboard.png" alt="|">
-                CV
-            </a>
-        </li>
-        <li class="nav-item active dropdown">
-            <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown"
-               aria-haspopup="true" aria-expanded="false">
-                <img src="https://img.icons8.com/color/48/000000/code.png" alt="|">
-                Projets
-            </a>
-            <div class="dropdown-menu" aria-labelledby="dropdown01">
-                <a class="dropdown-item" href="../projects.html">Liste des projets</a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="pro_static_site.html">Jovian Website</a>
-                <div class="dropdown-item active">ASCII Space Destroyer</div>
-                <a class="dropdown-item" href="pro_pulsar.html">Pulsar</a>
-                <a class="dropdown-item" href="pro_quoridor.html">Quoridor</a>
-            </div>
-        </li>
-    </ul>
+    <img class="rounded-circle jovian-toggler" type="button" data-toggle="collapse" data-target="#joviaNav" aria-controls="joviaNav"
+          aria-expanded="false" aria-label="Dérouler le menu" src="https://img.icons8.com/color/48/000000/menu-2.png" alt="V">
+    <div class="collapse navbar-collapse" id="joviaNav">
+	    <ul class="navbar-nav mr-auto">
+	        <li class="nav-item">
+	            <a class="nav-link" href="../index.html">
+	                <img src="https://img.icons8.com/color/48/000000/city.png" alt="|">
+	                Accueil
+	            </a>
+	        </li>
+	        <li class="nav-item">
+	            <a class="nav-link" href="../cv.html">
+	                <img src="https://img.icons8.com/color/48/000000/parse-from-clipboard.png" alt="|">
+	                CV
+	            </a>
+	        </li>
+	        <li class="nav-item active dropdown">
+	            <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown"
+	               aria-haspopup="true" aria-expanded="false">
+	                <img src="https://img.icons8.com/color/48/000000/code.png" alt="|">
+	                Projets
+	            </a>
+	            <div class="dropdown-menu" aria-labelledby="dropdown01">
+	                <a class="dropdown-item" href="../projects.html">Liste des projets</a>
+	                <div class="dropdown-divider"></div>
+	                <a class="dropdown-item" href="pro_static_site.html">Jovian Website</a>
+	                <div class="dropdown-item active">ASCII Space Destroyer</div>
+	                <a class="dropdown-item" href="pro_pulsar.html">Pulsar</a>
+	                <a class="dropdown-item" href="pro_quoridor.html">Quoridor</a>
+	            </div>
+	        </li>
+	    </ul>
+	</div>
 </nav>
 
 <!-- Main -->

projets/pro_pulsar.html

@@ -19,36 +19,39 @@
 <!-- Navbar -->
 <nav class="navbar navbar-expand-md navbar-dark bg-success fixed-top">
     <a class="navbar-brand" href="../index.html">Jovian Hersemeule</a>
-
-    <ul class="navbar-nav mr-auto">
-        <li class="nav-item">
-            <a class="nav-link" href="../index.html">
-                <img src="https://img.icons8.com/color/48/000000/city.png" alt="|">
-                Accueil
-            </a>
-        </li>
-        <li class="nav-item">
-            <a class="nav-link" href="../cv.html">
-                <img src="https://img.icons8.com/color/48/000000/parse-from-clipboard.png" alt="|">
-                CV
-            </a>
-        </li>
-        <li class="nav-item active dropdown">
-            <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown"
-               aria-haspopup="true" aria-expanded="false">
-                <img src="https://img.icons8.com/color/48/000000/code.png" alt="|">
-                Projets
-            </a>
-            <div class="dropdown-menu" aria-labelledby="dropdown01">
-                <a class="dropdown-item" href="../projects.html">Liste des projets</a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="pro_static_site.html">Jovian Website</a>
-                <a class="dropdown-item" href="pro_ascii_space.html">ASCII Space Destroyer</a>
-                <div class="dropdown-item active">Pulsar</div>
-                <a class="dropdown-item" href="pro_quoridor.html">Quoridor</a>
-            </div>
-        </li>
-    </ul>
+    <img class="rounded-circle jovian-toggler" type="button" data-toggle="collapse" data-target="#joviaNav" aria-controls="joviaNav"
+          aria-expanded="false" aria-label="Dérouler le menu" src="https://img.icons8.com/color/48/000000/menu-2.png" alt="V">
+    <div class="collapse navbar-collapse" id="joviaNav">
+	    <ul class="navbar-nav mr-auto">
+	        <li class="nav-item">
+	            <a class="nav-link" href="../index.html">
+	                <img src="https://img.icons8.com/color/48/000000/city.png" alt="|">
+	                Accueil
+	            </a>
+	        </li>
+	        <li class="nav-item">
+	            <a class="nav-link" href="../cv.html">
+	                <img src="https://img.icons8.com/color/48/000000/parse-from-clipboard.png" alt="|">
+	                CV
+	            </a>
+	        </li>
+	        <li class="nav-item active dropdown">
+	            <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown"
+	               aria-haspopup="true" aria-expanded="false">
+	                <img src="https://img.icons8.com/color/48/000000/code.png" alt="|">
+	                Projets
+	            </a>
+	            <div class="dropdown-menu" aria-labelledby="dropdown01">
+	                <a class="dropdown-item" href="../projects.html">Liste des projets</a>
+	                <div class="dropdown-divider"></div>
+	                <a class="dropdown-item" href="pro_static_site.html">Jovian Website</a>
+	                <a class="dropdown-item" href="pro_ascii_space.html">ASCII Space Destroyer</a>
+	                <div class="dropdown-item active">Pulsar</div>
+	                <a class="dropdown-item" href="pro_quoridor.html">Quoridor</a>
+	            </div>
+	        </li>
+	    </ul>
+	</div>
 </nav>
 
 <!-- Main -->

projets/pro_quoridor.html

@@ -19,36 +19,39 @@
 <!-- Navbar -->
 <nav class="navbar navbar-expand-md navbar-dark bg-success fixed-top">
     <a class="navbar-brand" href="../index.html">Jovian Hersemeule</a>
-
-    <ul class="navbar-nav mr-auto">
-        <li class="nav-item">
-            <a class="nav-link" href="../index.html">
-                <img src="https://img.icons8.com/color/48/000000/city.png" alt="|">
-                Accueil
-            </a>
-        </li>
-        <li class="nav-item">
-            <a class="nav-link" href="../cv.html">
-                <img src="https://img.icons8.com/color/48/000000/parse-from-clipboard.png" alt="|">
-                CV
-            </a>
-        </li>
-        <li class="nav-item active dropdown">
-            <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown"
-               aria-haspopup="true" aria-expanded="false">
-                <img src="https://img.icons8.com/color/48/000000/code.png" alt="|">
-                Projets
-            </a>
-            <div class="dropdown-menu" aria-labelledby="dropdown01">
-                <a class="dropdown-item" href="../projects.html">Liste des projets</a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="pro_static_site.html">Jovian Website</a>
-                <a class="dropdown-item" href="pro_ascii_space.html">ASCII Space Destroyer</a>
-                <a class="dropdown-item" href="pro_pulsar.html">Pulsar</a>
-                <div class="dropdown-item active">Quoridor</div>
-            </div>
-        </li>
-    </ul>
+    <img class="rounded-circle jovian-toggler" type="button" data-toggle="collapse" data-target="#joviaNav" aria-controls="joviaNav"
+          aria-expanded="false" aria-label="Dérouler le menu" src="https://img.icons8.com/color/48/000000/menu-2.png" alt="V">
+    <div class="collapse navbar-collapse" id="joviaNav">
+	    <ul class="navbar-nav mr-auto">
+	        <li class="nav-item">
+	            <a class="nav-link" href="../index.html">
+	                <img src="https://img.icons8.com/color/48/000000/city.png" alt="|">
+	                Accueil
+	            </a>
+	        </li>
+	        <li class="nav-item">
+	            <a class="nav-link" href="../cv.html">
+	                <img src="https://img.icons8.com/color/48/000000/parse-from-clipboard.png" alt="|">
+	                CV
+	            </a>
+	        </li>
+	        <li class="nav-item active dropdown">
+	            <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown"
+	               aria-haspopup="true" aria-expanded="false">
+	                <img src="https://img.icons8.com/color/48/000000/code.png" alt="|">
+	                Projets
+	            </a>
+	            <div class="dropdown-menu" aria-labelledby="dropdown01">
+	                <a class="dropdown-item" href="../projects.html">Liste des projets</a>
+	                <div class="dropdown-divider"></div>
+	                <a class="dropdown-item" href="pro_static_site.html">Jovian Website</a>
+	                <a class="dropdown-item" href="pro_ascii_space.html">ASCII Space Destroyer</a>
+	                <a class="dropdown-item" href="pro_pulsar.html">Pulsar</a>
+	                <div class="dropdown-item active">Quoridor</div>
+	            </div>
+	        </li>
+	    </ul>
+	</div>
 </nav>
 
 <!-- Main -->

projets/pro_static_site.html

@@ -19,36 +19,39 @@
 <!-- Navbar -->
 <nav class="navbar navbar-expand-md navbar-dark bg-success fixed-top">
     <a class="navbar-brand" href="../index.html">Jovian Hersemeule</a>
-
-    <ul class="navbar-nav mr-auto">
-        <li class="nav-item">
-            <a class="nav-link" href="../index.html">
-                <img src="https://img.icons8.com/color/48/000000/city.png" alt="|">
-                Accueil
-            </a>
-        </li>
-        <li class="nav-item">
-            <a class="nav-link" href="../cv.html">
-                <img src="https://img.icons8.com/color/48/000000/parse-from-clipboard.png" alt="|">
-                CV
-            </a>
-        </li>
-        <li class="nav-item active dropdown">
-            <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown"
-               aria-haspopup="true" aria-expanded="false">
-                <img src="https://img.icons8.com/color/48/000000/code.png" alt="|">
-                Projets
-            </a>
-            <div class="dropdown-menu" aria-labelledby="dropdown01">
-                <a class="dropdown-item" href="../projects.html">Liste des projets</a>
-                <div class="dropdown-divider"></div>
-                <div class="dropdown-item active">Jovian Website</div>
-                <a class="dropdown-item" href="pro_ascii_space.html">ASCII Space Destroyer</a>
-                <a class="dropdown-item" href="pro_pulsar.html">Pulsar</a>
-                <a class="dropdown-item" href="pro_quoridor.html">Quoridor</a>
-            </div>
-        </li>
-    </ul>
+    <img class="rounded-circle jovian-toggler" type="button" data-toggle="collapse" data-target="#joviaNav" aria-controls="joviaNav"
+          aria-expanded="false" aria-label="Dérouler le menu" src="https://img.icons8.com/color/48/000000/menu-2.png" alt="V">
+    <div class="collapse navbar-collapse" id="joviaNav">
+        <ul class="navbar-nav mr-auto">
+            <li class="nav-item">
+                <a class="nav-link" href="../index.html">
+                    <img src="https://img.icons8.com/color/48/000000/city.png" alt="|">
+                    Accueil
+                </a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="../cv.html">
+                    <img src="https://img.icons8.com/color/48/000000/parse-from-clipboard.png" alt="|">
+                    CV
+                </a>
+            </li>
+            <li class="nav-item active dropdown">
+                <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown"
+                   aria-haspopup="true" aria-expanded="false">
+                    <img src="https://img.icons8.com/color/48/000000/code.png" alt="|">
+                    Projets
+                </a>
+                <div class="dropdown-menu" aria-labelledby="dropdown01">
+                    <a class="dropdown-item" href="../projects.html">Liste des projets</a>
+                    <div class="dropdown-divider"></div>
+                    <div class="dropdown-item active">Jovian Website</div>
+                    <a class="dropdown-item" href="pro_ascii_space.html">ASCII Space Destroyer</a>
+                    <a class="dropdown-item" href="pro_pulsar.html">Pulsar</a>
+                    <a class="dropdown-item" href="pro_quoridor.html">Quoridor</a>
+                </div>
+            </li>
+        </ul>
+    </div>
 </nav>
 
 <!-- Main -->