fixing menu icon, and category name

internal/server/category.go

@@ -14,7 +14,7 @@ var CategoryMenu = []string{
 	"Biznis",
 	"Sport",
 	"Magazin",
-	"Nauka i tehnologija",
+	"Scitech",
 	"Ostalo",
 }
 

web/data/articles.html

@@ -15,7 +15,7 @@
       <div class="timestamp"> starenovine - {{ .FormatedCreatedAt }} -  {{.Category}}</div>
     </article>
   {{else}}
-    <div class="empty">
+    <div class="prewi">
       Nema članaka za izabrani datum.
     </div>
   {{end}}

web/data/categoryarticles.html

@@ -1,6 +1,5 @@
 {{define "articlecategoryHTML"}}
-
+<h3 class="category">{{.title}}</h3>
-<h1>{{.category}}</h1>
 {{range .articles}}
 <article class="news-article">
   <div class="article_content">
@@ -16,7 +15,7 @@
   <div class="timestamp"> starenovine - {{ .FormatedCreatedAt }} -  {{.Category}}</div>
 </article>
 {{else}}
-<div class="empty">
+<div class="prewi">
   Nema članaka za izabrani datum.
 </div>
 {{end}}

web/data/categorymenu.html

@@ -1,7 +1,12 @@
 {{define "categorymenuHTML"}}
 <nav class="hed">
-  <div id="small-menu" onclick="handleSmallMenu()">
+  <div id="small-menu" onclick="handleSmallMenu();myFunction(this)">
-    Menu
+    <div class="menu-icon">
+      <div class="bar1"></div>
+      <div class="bar2"></div>
+      <div class="bar3"></div>
+    </div>
+    <p>Menu</p>
   </div>
   <div class="menu">
   <a href="/">
@@ -27,6 +32,9 @@
     let menu = document.querySelector('.menu')
     menu.classList.toggle('show-menu')
   }
+  function myFunction(x) {
+  x.classList.toggle("change");
+}
 
   const handleScroll = function(event) {
     const top = window.scrollY;

web/data/footer.html

@@ -2,31 +2,9 @@
 
 <footer>
     <center>
-        <br>
+        <div class="hed">
-        <nav class="hed">
+            <p>starenovine 2023-2024</p>
-            <a href="{{.previous}}">
+        </div>
-              <div class="arr-pr-nx" title="Prethodna">
-                  <svg width="18px" height="17px" viewBox="0 0 18 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-                      <g id="prev" transform="translate(8.500000, 8.500000) scale(-1, 1) translate(-8.500000, -8.500000)">
-                          <polygon class="arrow" points="16.3746667 8.33860465 7.76133333 15.3067621 6.904 14.3175671 14.2906667 8.34246869 6.908 2.42790698 7.76 1.43613596"></polygon>
-                          <polygon class="arrow-fixed" points="16.3746667 8.33860465 7.76133333 15.3067621 6.904 14.3175671 14.2906667 8.34246869 6.908 2.42790698 7.76 1.43613596"></polygon>
-                          <path d="M-1.48029737e-15,0.56157424 L-1.48029737e-15,16.1929159 L9.708,8.33860465 L-2.66453526e-15,0.56157424 L-1.48029737e-15,0.56157424 Z M1.33333333,3.30246869 L7.62533333,8.34246869 L1.33333333,13.4327013 L1.33333333,3.30246869 L1.33333333,3.30246869 Z"></path>
-                      </g>
-                  </svg>
-              </div>
-          </a>  
-          <a href="{{.next}}">
-            <div class="arr-pr-nx" title="Sledeca">
-              <svg width="18px" height="17px" viewBox="-1 0 18 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-                  <g>
-                      <polygon class="arrow" points="16.3746667 8.33860465 7.76133333 15.3067621 6.904 14.3175671 14.2906667 8.34246869 6.908 2.42790698 7.76 1.43613596"></polygon>
-                      <polygon class="arrow-fixed" points="16.3746667 8.33860465 7.76133333 15.3067621 6.904 14.3175671 14.2906667 8.34246869 6.908 2.42790698 7.76 1.43613596"></polygon>
-                      <path d="M-4.58892184e-16,0.56157424 L-4.58892184e-16,16.1929159 L9.708,8.33860465 L-1.64313008e-15,0.56157424 L-4.58892184e-16,0.56157424 Z M1.33333333,3.30246869 L7.62533333,8.34246869 L1.33333333,13.4327013 L1.33333333,3.30246869 L1.33333333,3.30246869 Z"></path>
-                  </g>
-              </svg>
-            </div>
-          </a> 
-          </nav>
     </center>
 </footer>
 

web/data/head.html

@@ -30,6 +30,13 @@ body {
   overflow-x: hidden;
   background-color: black;
 }
+.category{
+  color: white;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 
 h1#title {
   background-color: #0B173B;
@@ -288,7 +295,10 @@ pre.article_content {
 
 @media only screen and (max-width: 600px) {
   #small-menu{
-    display: block;
+    display: flex;
+    margin-left: 20px;
+    align-items: center;
+    gap: 5px;
   }
   .fa-home{
     display: none;
@@ -306,13 +316,16 @@ pre.article_content {
     color: white;
     display: grid;
     transition: background-color 0.5s var(--ease);
+    margin-left: 50px;
+    justify-content: left;
+    margin-top: 5px;
+    margin-bottom: 5px;
   }
   .hed{
-    padding-top: 5px;
-    padding-bottom: 5px;
     height: fit-content;
     display: grid;
     gap: 0 ;
+    justify-content: left;
   }
   .menu.show-menu > a{
     text-decoration: none;
@@ -440,6 +453,28 @@ html {
 .home-icon:hover i {
   color: #FF0000;
 }
+.menu-icon {
+  display: inline-block;
+  cursor: pointer;
+}
+
+.bar1, .bar2, .bar3 {
+  width: 35px;
+  height: 5px;
+  background-color: white;
+  margin: 6px 0;
+  transition: 0.4s;
+}
+
+.change .bar1 {
+  transform: translate(0, 11px) rotate(-45deg);
+}
+
+.change .bar2 {opacity: 0;}
+
+.change .bar3 {
+  transform: translate(0, -11px) rotate(45deg);
+}
 
     </style>
 </head>

web/data/header.html

@@ -17,6 +17,5 @@
   
   {{template "categorymenuHTML" .}}
 
-</br>
 </header>
 {{end}}

web/data/prevnext.html

@@ -0,0 +1,27 @@
+{{define "prevnextHTML"}}
+<nav class="fot">
+    <a href="{{.previous}}">
+      <div class="arr-pr-nx" title="Prethodna">
+          <svg width="18px" height="17px" viewBox="0 0 18 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+              <g id="prev" transform="translate(8.500000, 8.500000) scale(-1, 1) translate(-8.500000, -8.500000)">
+                  <polygon class="arrow" points="16.3746667 8.33860465 7.76133333 15.3067621 6.904 14.3175671 14.2906667 8.34246869 6.908 2.42790698 7.76 1.43613596"></polygon>
+                  <polygon class="arrow-fixed" points="16.3746667 8.33860465 7.76133333 15.3067621 6.904 14.3175671 14.2906667 8.34246869 6.908 2.42790698 7.76 1.43613596"></polygon>
+                  <path d="M-1.48029737e-15,0.56157424 L-1.48029737e-15,16.1929159 L9.708,8.33860465 L-2.66453526e-15,0.56157424 L-1.48029737e-15,0.56157424 Z M1.33333333,3.30246869 L7.62533333,8.34246869 L1.33333333,13.4327013 L1.33333333,3.30246869 L1.33333333,3.30246869 Z"></path>
+              </g>
+          </svg>
+      </div>
+  </a>  
+  <a href="{{.next}}">
+    <div class="arr-pr-nx" title="Sledeca">
+      <svg width="18px" height="17px" viewBox="-1 0 18 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <g>
+              <polygon class="arrow" points="16.3746667 8.33860465 7.76133333 15.3067621 6.904 14.3175671 14.2906667 8.34246869 6.908 2.42790698 7.76 1.43613596"></polygon>
+              <polygon class="arrow-fixed" points="16.3746667 8.33860465 7.76133333 15.3067621 6.904 14.3175671 14.2906667 8.34246869 6.908 2.42790698 7.76 1.43613596"></polygon>
+              <path d="M-4.58892184e-16,0.56157424 L-4.58892184e-16,16.1929159 L9.708,8.33860465 L-1.64313008e-15,0.56157424 L-4.58892184e-16,0.56157424 Z M1.33333333,3.30246869 L7.62533333,8.34246869 L1.33333333,13.4327013 L1.33333333,3.30246869 L1.33333333,3.30246869 Z"></path>
+          </g>
+      </svg>
+    </div>
+  </a> 
+  </nav>
+
+  {{end}}

web/data/weatherwidget.html

@@ -1,4 +1,5 @@
 {{define "weatherwidgetHTML"}}
+<br>
 <a class="w-link" href="/weather">
   <div id="weather">
     {{range .weatherInfo}}

web/tpl/article.html

@@ -4,10 +4,10 @@
 <body>
 {{template "headerHTML" .}}
 
-{{template "weatherwidgetHTML"}}
-
 {{template "singleArticleHTML" .}}
 
+<br>
+{{template "prevnextHTML" .}}
 {{template "footerHTML" .}}
 </body>
 </html>

web/tpl/category.html

@@ -3,9 +3,9 @@
 {{template "headHTML" .}}
 <body>
 {{template "headerHTML" .}}
-
 {{template "articlecategoryHTML" .}}
 
+<br>
 {{template "footerHTML" .}}
 </body>
 </html>

web/tpl/dailyArticles.html

@@ -7,7 +7,8 @@
 {{template "weatherwidgetHTML"}}
 
 {{template "articlesHTML" .}}
-
+<br>
+{{template "prevnextHTML" .}}
 {{template "footerHTML" .}}
 </body>
 </html>

web/tpl/home.html

@@ -6,7 +6,8 @@
 {{template "weatherwidgetHTML" .}}
 
 {{template "articlesHTML" .}}
-
+<br>
+{{template "prevnextHTML" .}}
 {{template "footerHTML" .}}
 </body>
 </html>