Made top menu responsive

pharo-project · Jun 19, 2024 · 60e871e · 60e871e
1 parent 65c1bc6
commit 60e871e
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 9 deletions.
diff --git a/website/index.html b/website/index.html
@@ -68,16 +68,25 @@
       rel="stylesheet"
     />
 
+    <!-- Top menu icon -->
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+
     <link rel="stylesheet" href="./style.css" />
   </head>
   <body>
     <header>
       <nav>
-        <div class="nav-buttons">
-          <a href="" rel="noopener noreferrer">Home</a>
+        <div class="nav-buttons" id="nav-buttons">
+          <a href="" rel="noopener noreferrer" class="active">Home</a>
           <a href="" rel="noopener noreferrer">Venue</a>
           <a href="" rel="noopener noreferrer">Program</a>
           <a href="" rel="noopener noreferrer">Learning Resources</a>
+          <a href="javascript:void(0);" class="icon" onclick="toggleTopMenu()">
+            <i class="fa fa-bars"></i>
+          </a>
         </div>
       </nav>
     </header>

diff --git a/website/script.js b/website/script.js
@@ -1,3 +1,12 @@
+function toggleTopMenu() {
+  var x = document.getElementById("nav-buttons");
+  if (x.className === "nav-buttons") {
+    x.className += " responsive";
+  } else {
+    x.className = "nav-buttons";
+  }
+}
+
 function insertMailto(id, place, me) {
   var elink = document.getElementById(id);
   elink.href = `mailto:${me}@${place}`;

diff --git a/website/style.css b/website/style.css
@@ -25,32 +25,60 @@ nav {
 }
 
 .nav-buttons {
+  display: flex;
+  justify-content: space-between;
   margin: 0 auto;
   text-align: center;
+  width: 100%;
 }
 
-nav a {
+.nav-buttons.responsive {
+  position: relative;
   display: inline-block;
+}
+
+.nav-buttons .icon {
+  float: right;
+  display: block;
+}
+
+.nav-buttons.responsive .icon {
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.nav-buttons a {
+  display: inline-block;
+  margin: 0;
   padding: 15px 14px;
   color: var(--color-pharo-blue);
   text-decoration: none;
 }
 
-nav a:hover {
+.nav-buttons a:hover {
+  background-color: var(--color-pharo-light-blue);
+}
+
+.nav-buttons a.active {
   background-color: var(--color-pharo-light-blue);
 }
 
-nav a:active {
-  background-color: var(--color-pharo-blue);
-  color: white;
+.nav-buttons:not(.responsive) a:not(.active):not(.icon) {
+  display: none;
+}
+
+.nav-buttons.responsive a {
+  float: none;
+  display: block;
+  text-align: left;
 }
 
 main {
   max-width: var(--page-width);
   margin-left: auto;
   margin-right: auto;
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding: 0 1rem;
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -108,6 +136,28 @@ footer p {
 }
 
 @media only screen and (min-width: 768px) {
+  main {
+    padding: 0 2rem;
+  }
+
+  .nav-buttons {
+    width: auto;
+  }
+
+  .nav-buttons a {
+    display: inline-block!important;
+    text-align: center;
+  }
+
+  .nav-buttons.responsive a {
+    display: inline-block;
+    text-align: center;
+  }
+
+  .nav-buttons .icon {
+    display: none!important;
+  }
+
   .teacher-container {
     display: flex;
   }