From 9d1392afc1a0358a492dc8a8f2f3b0a046f45a9f Mon Sep 17 00:00:00 2001
From: AustinPardosi <gabrielpardosi26@gmail.com>
Date: Mon, 2 Oct 2023 12:51:28 +0700
Subject: [PATCH] feat: add navbar
---
public/assets/logo.svg | 12 ++++++
public/assets/search-icon.svg | 1 +
public/css/navbar.css | 76 +++++++++++++++++++++++++++++++++++
views/layouts/Navbar.php | 29 +++++++++++++
4 files changed, 118 insertions(+)
create mode 100644 public/assets/logo.svg
create mode 100644 public/assets/search-icon.svg
create mode 100644 public/css/navbar.css
create mode 100644 views/layouts/Navbar.php
diff --git a/public/assets/logo.svg b/public/assets/logo.svg
new file mode 100644
index 0000000..e2547b9
--- /dev/null
+++ b/public/assets/logo.svg
@@ -0,0 +1,12 @@
+<svg width="209" height="235" viewBox="0 0 209 235" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M56.6619 181.5C50.2696 163.748 50.625 153.975 56.6619 136.79C59.1781 102.132 60.8786 84.7201 67.8189 80.9036C70.0257 78.8024 75.3007 84.8342 87.5581 100.679C107.494 94.7565 118.204 94.783 136.477 100.679C144.174 89.969 149.771 83.4977 156.217 80.9036C166.502 80.5639 167.084 105.423 170.806 136.79C176.317 153.428 176.478 163.194 170.806 181.5C126.229 155.868 101.238 155.755 56.6619 181.5Z" fill="#FFC56F"/>
+<path d="M162 1C109.065 45.0041 74.1264 65.5047 1 93.5C6.47181 110.17 10.9196 117.305 22 125C86.3468 95.5261 121.805 75.7437 184 35C179.221 17.7501 173.87 10.8622 162 1Z" fill="#414141"/>
+<path d="M22 234H208V125C140.551 131.919 100.826 133.252 22 125V234Z" fill="#414141"/>
+<path d="M22 125C86.3468 95.5261 121.805 75.7437 184 35C179.221 17.7501 173.87 10.8622 162 1C109.065 45.0041 74.1264 65.5047 1 93.5C6.47181 110.17 10.9196 117.305 22 125ZM22 125C100.826 133.252 140.551 131.919 208 125V234H22V125Z" stroke="black"/>
+<path d="M22 125V153.5C95.9851 161.285 136.769 160.952 208.5 153.5V125C135.664 131.728 94.8331 131.79 22 125Z" fill="#D9D9D9" stroke="#D9D9D9"/>
+<path d="M22 153.5L39 126.5C44.9704 126.959 50.8187 127.703 57 128L40 155.5L22 153.5Z" fill="black" stroke="black"/>
+<path d="M57 157L73.5 129C79.4704 129.459 86.3187 129.203 92.5 129.5L76 158L57 157Z" fill="black" stroke="black"/>
+<path d="M96 159L116 129.5C121.97 129.959 124.819 129.203 131 129.5L114 159.5L96 159Z" fill="black" stroke="black"/>
+<path d="M135 159L152.5 129C160 129 163.084 128.552 168.5 128.5L153.5 158L135 159Z" fill="black" stroke="black"/>
+<path d="M172.5 157L188.5 126.5C195 126.5 199 126 205.5 125.5L191 155.5L172.5 157Z" fill="black" stroke="black"/>
+</svg>
diff --git a/public/assets/search-icon.svg b/public/assets/search-icon.svg
new file mode 100644
index 0000000..a59b6a0
--- /dev/null
+++ b/public/assets/search-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
\ No newline at end of file
diff --git a/public/css/navbar.css b/public/css/navbar.css
new file mode 100644
index 0000000..2387aea
--- /dev/null
+++ b/public/css/navbar.css
@@ -0,0 +1,76 @@
+a {
+ text-decoration: none;
+}
+
+li {
+ list-style: none;
+}
+
+.navbar {
+ background-color: teal;
+ overflow: hidden;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 20px;
+ z-index: 10;
+ color: #fff;
+}
+
+.nav-links {
+ color: white;
+}
+
+.navbar h1 {
+ color: white;
+ font-size: 32px;
+}
+
+.logo {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+}
+
+.menu {
+ display: flex;
+ gap: 1rem;
+ font-size: 18px;
+}
+
+.menu li {
+ color: white;
+}
+
+.menu li:hover {
+ text-shadow: 2px 2px 10px white;
+ filter: dropshadow(color=#000000, offx=2, offy=2);
+ border-radius: 5px;
+ transition: 0.3s ease;
+}
+
+.navbar input {
+ background-color: #444444;
+ border-radius: 25px;
+ padding: 9px 10px;
+}
+
+.navbar input:hover {
+ background-color: white;
+}
+
+.input-search {
+ position: relative;
+}
+
+.input-search input {
+ padding-left: 40px;
+}
+
+.input-search img {
+ position: absolute;
+ color: white;
+ left: 10px;
+ top: 50%;
+ transform: translateY(-50%);
+}
diff --git a/views/layouts/Navbar.php b/views/layouts/Navbar.php
new file mode 100644
index 0000000..9ec1d5a
--- /dev/null
+++ b/views/layouts/Navbar.php
@@ -0,0 +1,29 @@
+<html>
+<head>
+ <link rel='stylesheet' href='/public/css/navbar.css'>
+</head>
+<body>
+ <nav class='navbar'>
+ <div class='logo' href='/'>
+ <img src='/public/assets/logo.svg' alt='logo' width="45" height="45" draggable='false'/>
+ <h1>Letterpaw</h1>
+ </div>
+ <ul class='nav-links'>
+ <div class='menu'>
+ <li><a href='/'>SIGN IN</a></li>
+ <li><a href='/'>CREATE ACCOUNT</a></li>
+ <li><a href='/'>FILMS</a></li>
+ <li><a href='/'>LISTS</a></li>
+ <li><a href='/'>MEMBERS</a></li>
+ <li><a href='/'>JOURNAL</a></li>
+ </div>
+ </ul>
+ <form method='get'>
+ <div class='input-search'>
+ <input class='' placeholder='Search...'/>
+ <img src='/public/assets/search-icon.svg' alt='search icon' />
+ </div>
+ </form>
+ </nav>
+</body>
+</html>
\ No newline at end of file
--
GitLab