Kezdőlap Felfedezés Súgó
Regisztráció Bejelentkezés
lee
/
subline
1
0
Másolás 0
Fájlok Problémák 0 Beolvasztási kérések 0 Wiki
Forráskód Böngészése

Finish sidebar menu

Lee Morgan 6 éve
szülő
807426d9aa
commit
950f243cbe
7 módosított fájl, 192 hozzáadás és 63 törlés
Osztott Nézet Diff Statisztika Mutatása
  1. 4 45
      views/dashboardPage/dashboard.css
  2. 4 18
      views/dashboardPage/dashboard.ejs
  3. 9 0
      views/shared/controller.js
  4. BIN
      views/shared/images/homeIcon.png
  5. BIN
      views/shared/images/profile.png
  6. 117 0
      views/shared/menu.css
  7. 58 0
      views/shared/menu.ejs

+ 4 - 45
views/dashboardPage/dashboard.css
Fájl Megtekintése 

@@ -4,51 +4,6 @@ body{
 
     font-family: 'Saira', sans-serif;
 
 }
 
 
-.menu{
 
-    display: flex;
 
-    flex-direction: column;
 
-    align-items: center;
 
-    max-width: 18vw;
 
-    background: rgb(0, 27, 45);
 
-    height: 100vh;
 
-}
 
-
 
-    .menuHead{
 
-        display: flex;
 
-        justify-content: center;
 
-        align-items: center;
 
-        padding: 0 20px;
 
-        margin-top: 0;
 
-        font-size: 25px;
 
-        font-weight: bold;
 
-        color: white;
 
-        margin-bottom: 100px;
 
-        text-decoration: none;
 
-    }
 
-
 
-    .menu button{
 
-        background: none;
 
-        border-style: none;
 
-        color: white;
 
-        font-size: 20px;
 
-        margin: 15px 0;
 
-        padding: 0 0 0 50px;
 
-        width: 100%;
 
-        height: 75px;
 
-        cursor: pointer;
 
-        text-align: left;
 
-    }
 
-
 
-    .menu button:hover{
 
-        background: rgb(201, 201, 201);
 
-        color: black;
 
-    }
 
-
 
-        .menuHead img{
 
-            max-width: 40%;
 
-            max-height: 40%;
 
-        }
 
-
 
     .logout{
 
         position: absolute;
 
         bottom: 25px;
 
@@ -57,6 +12,10 @@ body{
 
         font-size: 20px;
 
     }
 
 
+.contentBlock{
 
+    padding: 10px;
 
+}
 
+
 
 /* Home Strand */
 
 #homeStrand{
 
     display: flex;

+ 4 - 18
views/dashboardPage/dashboard.ejs
Fájl Megtekintése 

@@ -6,28 +6,14 @@
 
         <link rel="icon" type="img/png" href="/shared/images/logo.png">
 
         <link rel="stylesheet" href="/shared/shared.css">
 
         <link rel="stylesheet" href="/dashboardPage/dashboard.css">
 
+        <link rel="stylesheet" href="/shared/menu.css">
 
     </head>
 
     <body>
 
-        <div class="menu">
 
-            <a class="menuHead" href="/">
 
-                <img src="/shared/images/logo.png">
 
-                <p>The Subline</p>
 
-            </a>
 
+        <% include ../shared/menu %>
 
 
-            <button onclick="changeStrand('homeStrand')">Home</button>
 
-
 
-            <button onclick="changeStrand('ingredientsStrand')">Ingredients</button>
 
-
 
-            <button onclick="changeStrand('recipeBookStrand')">Recipe Book</button>
 
-
 
-            <button onclick="changeStrand('ordersStrand')">Orders</button>
 
-
 
-            <a class="logout" href="/logout">Logout</a>
 
-        </div>
 
-
 
-        <div class="content">
 
+        <div class="contentBlock">
 
             <div id="homeStrand" class="strand">
 
-                <h1>Home strand</h1>
 
+                <h1>Dashboard</h1>
 
             </div>
 
 
             <div id="ingredientsStrand" class="strand">

+ 9 - 0
views/shared/controller.js
Fájl Megtekintése 

@@ -3,6 +3,15 @@ let changeStrand = (name)=>{
 
         strand.style.display = "none";
 
     }
 
 
+    for(let button of document.querySelectorAll(".menu > button")){
 
+        button.classList = "";
 
+        button.onclick = ()=>{changeStrand(`${button.id.slice(0, button.id.indexOf("Btn"))}Strand`)};
 
+    }
 
+
 
+    let activeButton = document.querySelector(`#${name.slice(0, name.indexOf("Strand"))}Btn`);
 
+    activeButton.classList = "active";
 
+    activeButton.onclick = undefined;
 
+
 
     document.querySelector(`#${name}`).style.display = "flex";
 
     window[`${name}Obj`].display();
 
 }

BIN
views/shared/images/homeIcon.png
Fájl Megtekintése


BIN
views/shared/images/profile.png
Fájl Megtekintése


+ 117 - 0
views/shared/menu.css
Fájl Megtekintése 

@@ -0,0 +1,117 @@
 
+.menu{
 
+    display: flex;
 
+    flex-direction: column;
 
+    align-items: center;
 
+    background: rgb(0, 27, 45);
 
+    width: 18vw;
 
+    height: 100vh;
 
+}
 
+
 
+    .menuHead{
 
+        display: flex;
 
+        justify-content: center;
 
+        align-items: center;
 
+        padding: 0 20px;
 
+        margin-top: 10px;
 
+        font-size: 22px;
 
+        font-weight: bold;
 
+        margin-bottom: 100px;
 
+        text-decoration: none;
 
+    }
 
+
 
+    .menuLogo{
 
+        width: 25%;
 
+        height: 25%;
 
+    }
 
+
 
+    .menuHead a{
 
+        display: flex;
 
+        align-items: center;
 
+        color: white;
 
+        text-decoration: none;
 
+    }
 
+
 
+    .menuHead button{
 
+        background: none;
 
+        border-style: none;
 
+        color: white;
 
+        font-size: 35px;
 
+        cursor: pointer;
 
+        outline: none;
 
+    }
 
+
 
+    .menuHead button:hover{
 
+        color: rgb(201, 201, 201);
 
+    }
 
+
 
+    .menuHead > button::-moz-focus-inner{
 
+        border: 0;
 
+    }
 
+
 
+    .menuHead > button img{
 
+        height: 25px;
 
+        width: 25px;
 
+    }
 
+
 
+    .menu > button{
 
+        background: none;
 
+        border-style: none;
 
+        color: white;
 
+        font-size: 20px;
 
+        margin: 15px 0;
 
+        padding: 0 0 0 50px;
 
+        width: 100%;
 
+        height: 75px;
 
+        cursor: pointer;
 
+        text-align: left;
 
+        border: 0;
 
+    }
 
+
 
+    .menu > button::-moz-focus-inner{
 
+        border: 0;
 
+    }  
+
 
+    .menu > button:hover{
 
+        background: rgb(201, 201, 201);
 
+        color: black;
 
+    }
 
+
 
+.menu > .active{
 
+    background: rgb(179, 191, 209);
 
+    cursor: default;
 
+}
 
+
 
+.menu > .active:hover{
 
+    background: rgb(179, 191, 209);
 
+    color: white;
 
+}
 
+
 
+.logout{
 
+    display: flex;
 
+    justify-content: center;
 
+}
 
+
 
+.logout img{
 
+    height: 25px;
 
+    width: 25px;
 
+}
 
+
 
+/* Minimized menu */
 
+.menuMinimized{
 
+    width: 5vw;
 
+}
 
+
 
+.menuLogoMin{
 
+    width: 100%;
 
+    height: 100%;
 
+}
 
+
 
+.menuHeadMin{
 
+    flex-direction: column;
 
+
 
+}
 
+
 
+.menuMinimized button{
 
+    text-align: center;
 
+    padding: 0;
 
+}

+ 58 - 0
views/shared/menu.ejs
Fájl Megtekintése 

@@ -0,0 +1,58 @@
 
+<div class="menu">
 
+    <div class="menuHead">
 
+        <a href="/">
 
+            <img class="menuLogo" src="/shared/images/logo.png">
 
+            <p>The Subline</p>
 
+        </a>
 
+
 
+        <button onclick="changeMenu()">&#8801;</button>
 
+    </div>
 
+
 
+    <button id="homeBtn" class="active" onclick="changeStrand('homeStrand')">
 
+        <img src="/shared/images/homeIcon.png" alt="home">
 
+        <p>Home</p>
 
+    </button>
 
+
 
+    <button id="ingredientsBtn" onclick="changeStrand('ingredientsStrand')">Ingredients</button>
 
+
 
+    <button id="recipeBookBtn" onclick="changeStrand('recipeBookStrand')">Recipe Book</button>
 
+
 
+    <button id="ordersBtn" onclick="changeStrand('ordersStrand')">Orders</button>
 
+
 
+    <a class="logout" href="/logout">
 
+        <img src="/shared/images/profile.png" alt="logout">
 
+        <p>Logout</p>
 
+    </a>
 
+
 
+    <script>
 
+        let changeMenu = ()=>{
 
+            let menu = document.querySelector(".menu");
 
+            let buttons = document.querySelectorAll(".menu > button");
 
+            if(!menu.classList.contains("menuMinimized")){
 
+                menu.classList = "menu menuMinimized";
 
+
 
+                buttons[0].innerText = "H";
 
+                buttons[1].innerText = "I";
 
+                buttons[2].innerText = "R";
 
+                buttons[3].innerText = "O";
 
+
 
+                document.querySelector(".menuHead p").style.display = "none";
 
+                document.querySelector(".menuLogo").classList = "menuLogo menuLogoMin";
 
+                document.querySelector(".menuHead").classList = "menuHead menuHeadMin";
 
+                document.querySelector(".logout p").style.display = "none";
 
+            }else if(menu.classList.contains("menuMinimized")){
 
+                menu.classList = "menu";
 
+
 
+                buttons[0].innerText = "Home";
 
+                buttons[1].innerText = "Ingredients";
 
+                buttons[2].innerText = "Recipe Book";
 
+                buttons[3].innerText = "Orders";
 
+
 
+                document.querySelector(".menuHead p").style.display = "block";
 
+                document.querySelector(".menuLogo").classList = "menuLogo";
 
+                document.querySelector(".menuHead").classList = "menuHead";
 
+                document.querySelector(".logout p").style.display = "block";
 
+            }
 
+        }
 
+    </script>
 
+</div>