feat: minimal icon navigation

scottmckendry · Aug 22, 2024 · ca46608 · ca46608
1 parent bc8302b
commit ca46608
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 15 deletions.
diff --git a/public/css/nav.css b/public/css/nav.css
@@ -0,0 +1,54 @@
+nav {
+    position: fixed;
+    top: 0;
+    right: 0;
+    z-index: 1000;
+    width: 38px;
+    height: 36px;
+    overflow: hidden;
+    transition: all 0.2s ease-in-out;
+    border-radius: 0 0 3px 0;
+}
+
+nav a,
+nav ul {
+    margin: 0;
+    padding: 0;
+}
+
+nav:hover {
+    width: 38px;
+    height: 160px;
+    transition: all 0.4s ease-in-out;
+}
+
+nav ul {
+    list-style-type: none;
+    margin: 0 0 0 0;
+    transition: all 0.2s ease-in-out;
+}
+
+nav ul li {
+    transition: all 0.2s ease-in-out;
+}
+
+.navicon {
+    padding: 12px 0;
+    width: 40px;
+}
+
+.navicon:before {
+    padding: 12px;
+}
+
+.fa:before {
+    font-size: 16px;
+}
+
+.caret-rotate {
+    transition: all 0.2s ease-in-out;
+}
+
+nav:hover .caret-rotate {
+    transform: rotate(-90deg);
+}
diff --git a/public/css/styles.css b/public/css/styles.css
@@ -1,5 +1,6 @@
 @import "./reset.css";
 @import "./modal.css";
+@import "./nav.css";
 
 body {
     font-family: "Roboto", sans-serif;

diff --git a/views/page.templ b/views/page.templ
@@ -12,20 +12,28 @@ templ Page(nav bool, user goth.User) {
 			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 			<link rel="stylesheet" href="/public/css/styles.css"/>
 			<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+			<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🧠</text></svg>"/>
 			<script src="https://unpkg.com/[email protected]"></script>
 			<script src="https://unpkg.com/[email protected]"></script>
 		</head>
 		<body>
-			<button hx-get="/settings" hx-target="body" hx-swap="beforeend">Settings</button>
-			<button hx-get="/mappings" hx-target="body" hx-swap="beforeend">Mappings</button>
-			{ children... }
 			if nav {
-				<footer>
-					<a href={ templ.SafeURL(fmt.Sprintf("/auth/%s/logout", user.Provider)) }>
-						Logout
-					</a>
-				</footer>
+				<nav>
+					<span class="fa fa-caret-left navicon caret-rotate"></span>
+					<ul>
+						<a href="#" hx-get="/mappings" hx-target="body" hx-swap="beforeend">
+							<li class="fa fa-map navicon"></li>
+						</a>
+						<a href="#" hx-get="/settings" hx-target="body" hx-swap="beforeend">
+							<li class="fa fa-cog navicon"></li>
+						</a>
+						<a href={ templ.SafeURL(fmt.Sprintf("/auth/%s/logout", user.Provider)) }>
+							<li class="fa fa-sign-out-alt navicon"></li>
+						</a>
+					</ul>
+				</nav>
 			}
+			{ children... }
 		</body>
 	</html>
 }
diff --git a/views/page_templ.go b/views/page_templ.go