fixed components

frontend/src/components/navbar/HomeNav.module.css

@@ -0,0 +1,142 @@
+nav{
+    padding: 1.1em;
+
+    font-family: "Roboto Mono", monospace;
+
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0; /* required */
+
+    transition: top 1s ease-in-out, border-radius 1s ease-in-out;
+
+   
+
+    z-index: 5;
+    padding-left: 2em;
+    padding-right: 2em;
+    width: max-content;
+
+    background: var(--c-boxes);
+    /*background: -moz-linear-gradient(117deg, rgba(34,34,34,1) 0%, rgba(59,54,54,1) 100%);
+    background: -webkit-linear-gradient(117deg, rgba(34,34,34,1) 0%, rgba(59,54,54,1) 100%);
+    background: linear-gradient(117deg, rgba(34,34,34,1) 0%, rgba(59,54,54,1) 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#222222",endColorstr="#3b3636",GradientType=1);*/
+
+    color: #fff;
+    text-align: center;
+
+    margin: auto;
+    
+    border-radius: 2em;
+}
+nav.isSticky-nav{
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+nav ul #nav-logo{
+    border-right: 0.2em solid var(--c-lines);
+}
+nav ul #nav-logo span{
+    line-height: 0.75;
+    font-size: 1.5em;
+}
+nav a{
+    color: #fff;
+    transition: color 1s;
+
+    position: relative;
+    text-decoration: none;
+}
+
+nav a:hover{
+    color: #fff;
+}
+
+nav a::before {
+    content: "";
+    position: absolute;
+    display: block;
+    width: 100%;
+    height: 2px;
+    bottom: 0;
+    left: 0;
+    background-color: #fff;
+    transform: scaleX(0);
+    transition: transform 0.3s ease;
+}
+nav a:hover::before {
+    transform: scaleX(1);
+}
+
+
+nav ul {
+    list-style: none;
+    padding: 0;
+}
+
+nav ul li {
+    display: inline;
+    padding: 0 3em;
+}
+
+nav ul li a {
+    text-decoration: none;
+}
+#toggle-nav{
+    display: none;
+
+    -webkit-transition: transform 0.5s ease;
+    -moz-transition: transform 0.5s ease;
+    -o-transition: transform 0.5s ease;
+    -ms-transition: transform 0.5s ease;
+    transition: transform 0.5s ease;
+}
+.toggle-nav-rotated {
+    transform: rotate(360deg);
+}
+.nav-open{
+    max-height: 20em;
+}
+@media only screen and (max-width: 990px){
+    #toggle-nav{
+        margin-top: 0.25em;
+        margin-left: 0.75em;
+        position: absolute;
+        left: 0;
+        display: block;
+        font-size: 2em;
+    }
+    nav{
+        width: 100%;
+        padding: 0;
+        border-top-right-radius: 0;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 1em;
+        border-bottom-right-radius: 1em;
+        overflow: hidden;
+    }
+    nav ul {
+        margin-top: 1em;
+        gap: 2em;
+        display: flex;
+        flex-direction: column;
+
+        -webkit-transition: max-height 1s ease;
+        -moz-transition: max-height 1s ease;
+        -o-transition: max-height 1s ease;
+        -ms-transition: max-height 1s ease;
+        transition: max-height 1s ease;
+
+        max-height: 2em;
+    }
+    nav ul:last-child{
+        padding-bottom: 1em;
+    }
+    nav ul #nav-logo {
+        margin: auto;
+        padding-bottom: 0.5em;
+        margin-bottom: -1em;
+        border-bottom: 0.2em solid var(--c-lines);
+        border-right: none;
+    }
+  }

frontend/src/components/navbar/HomeNav.tsx

@@ -0,0 +1,36 @@
+import React, { useState } from "react"
+import styles from "./HomeNav.module.css"
+
+export default function HomeNav() {
+  const [navOpen, setNavOpen] = useState(false)
+
+  const toggleNav = () => setNavOpen((prev) => !prev)
+
+  return (
+    <nav className={styles.nav}>
+      <i
+        id="toggle-nav"
+        className={`fa-solid fa-bars ${styles.toggle}`}
+        onClick={toggleNav}
+      ></i>
+
+      <ul className={`${styles.navList} ${navOpen ? styles.open : ""}`}>
+        <li id="nav-logo" className={styles.logo}>
+          <span>vontor.cz</span>
+        </li>
+        <li>
+          <a href="/">Home</a>
+        </li>
+        <li>
+          <a href="#portfolio">Portfolio</a>
+        </li>
+        <li>
+          <a href="#services">Services</a>
+        </li>
+        <li>
+          <a href="#contactme-form">Contact me</a>
+        </li>
+      </ul>
+    </nav>
+  )
+}

frontend/src/components/navbar/navbar.jsx

@@ -1,10 +0,0 @@
-<nav>
-	<i id="toggle-nav" class="fa-solid fa-bars"></i>
-	<ul>
-		<li id="nav-logo"><span>vontor.cz</span></li>
-		<li><a href="{% url "home" %}">Home</a></li>
-		<li><a href="#portfolio">Portfolio</a></li>
-		<li><a href="#services">Services</a></li>
-		<li><a href="#contactme-form">Contact me</a></li>
-	</ul>
-</nav>