Skip to content

Commit eac1bca

Browse files
recursivezerorecursivezero
authored
Merge pull request #36 from recursivezero/main
update nav menu for mobile
2 parents 2b961bb + ef6cfbe commit eac1bca

File tree

4 files changed

+176
-52
lines changed

4 files changed

+176
-52
lines changed

‎frontend/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
<!-- {/* Open Graph / Facebook */} -->
2626
<meta property="og:type" content="website" />
2727
<meta property="og:title" content="Fabric AI" />
28+
<meta property="og:logo" content="threadzip" />
2829
<meta property="og:description" content="Advance fabric analysis, search and AI chatbot" />
2930
<meta property="og:url" content="https://pro.threadzip.com" />
3031
<meta property="og:site_name" content="pro.threadzip.com" />

‎frontend/src/App.css‎

Lines changed: 2 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -47,42 +47,16 @@
4747

4848

4949

50+
51+
5052
.header-left {
5153
display: flex;
5254
align-items: center;
5355
gap: 12px;
5456
}
5557

56-
.header-nav ul {
57-
display: flex;
58-
gap: 20px;
59-
list-style: none;
60-
}
61-
62-
.header-nav ul li {
63-
font-size: 14px;
64-
margin: 0 10px;
65-
}
66-
67-
.header-nav ul li a {
68-
text-decoration: none;
69-
color: var(--text-color);
70-
font-weight: 500;
71-
padding: 6px 6px;
72-
transition: background-color .15s ease;
73-
74-
}
7558

76-
.header-nav ul li a:hover {
77-
background-color: #2f6aff31;
78-
border-radius: 10px;
79-
}
8059

81-
.header-nav ul li a.active {
82-
font-weight: 700;
83-
background-color: #2f6aff31;
84-
border-radius: 10px;
85-
}
8660

8761
.logo-mark {
8862
width: 44px;

‎frontend/src/App.tsx‎

Lines changed: 47 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from "react";
22
import { FaRegMoon } from "react-icons/fa";
33
import { NavLink } from "react-router-dom";
44
import "./App.css";
5+
import "./styles/navbar.css";
56
import { Routing } from "./Routing";
67
import Footer from "./components/Footer";
78

@@ -24,31 +25,53 @@ const App: React.FC = () => {
2425
<div className="brand-name">FabricAI</div>
2526
</div>
2627
</div>
27-
<nav className="header-nav">
28-
<ul>
29-
<li>
30-
<NavLink to="/" end className={ ({ isActive }) => isActive ? "active" : "" }>
31-
Home
32-
</NavLink></li>
33-
<li><NavLink to="/analysis" end className={ ({ isActive }) => isActive ? "active" : "" }>
34-
Analysis
35-
</NavLink></li>
36-
<li><NavLink to="/upload" end className={ ({ isActive }) => isActive ? "active" : "" }>
37-
Upload
38-
</NavLink></li>
39-
<li><NavLink to="/view" end className={ ({ isActive }) => isActive ? "active" : "" }>
40-
List
41-
</NavLink></li>
42-
<li><NavLink to="/search" end className={ ({ isActive }) => isActive ? "active" : "" }>
43-
Search
44-
</NavLink></li>
45-
<li><NavLink to="/chat" end className={ ({ isActive }) => isActive ? "active" : "" }>
46-
Chat
47-
</NavLink></li>
48-
</ul>
49-
</nav>
28+
<div className="mobile-nav-wrapper">
29+
<input type="checkbox" id="nav-toggle" className="nav-toggle" />
30+
31+
<label htmlFor="nav-toggle" className="hamburger">
32+
<span></span>
33+
<span></span>
34+
<span></span>
35+
</label>
36+
37+
<nav className="header-nav">
38+
<ul>
39+
<li>
40+
<NavLink to="/" end className={ ({ isActive }) => isActive ? "active" : "" }>
41+
Home
42+
</NavLink>
43+
</li>
44+
<li>
45+
<NavLink to="/analysis" end className={ ({ isActive }) => isActive ? "active" : "" }>
46+
Analysis
47+
</NavLink>
48+
</li>
49+
<li>
50+
<NavLink to="/upload" end className={ ({ isActive }) => isActive ? "active" : "" }>
51+
Upload
52+
</NavLink>
53+
</li>
54+
<li>
55+
<NavLink to="/view" end className={ ({ isActive }) => isActive ? "active" : "" }>
56+
List
57+
</NavLink>
58+
</li>
59+
<li>
60+
<NavLink to="/search" end className={ ({ isActive }) => isActive ? "active" : "" }>
61+
Search
62+
</NavLink>
63+
</li>
64+
<li>
65+
<NavLink to="/chat" end className={ ({ isActive }) => isActive ? "active" : "" }>
66+
Chat
67+
</NavLink>
68+
</li>
69+
</ul>
70+
</nav>
71+
</div>
72+
5073
<div className="action">
51-
<div id="theme"> <FaRegMoon /></div>
74+
{/* <div id="theme"> <FaRegMoon /></div> */}
5275
</div>
5376
</header>
5477

‎frontend/src/styles/navbar.css‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
.header-nav ul {
2+
list-style: none;
3+
padding: 0;
4+
margin: 0;
5+
}
6+
7+
.header-nav a {
8+
text-decoration: none;
9+
color: #222;
10+
font-weight: 500;
11+
display: block;
12+
}
13+
14+
.header-nav a.active {
15+
border-bottom: 2px solid #222;
16+
}
17+
18+
.nav-toggle {
19+
display: none;
20+
}
21+
22+
@media (min-width: 769px) {
23+
24+
/* desktop layout stays intact */
25+
.hamburger {
26+
display: none !important;
27+
}
28+
29+
.header-nav ul {
30+
position: static !important;
31+
display: flex !important;
32+
flex-direction: row !important;
33+
align-items: center;
34+
gap: 1.5rem;
35+
background: none !important;
36+
padding: 0 !important;
37+
transform: none !important;
38+
opacity: 1 !important;
39+
pointer-events: auto !important;
40+
height: auto !important;
41+
box-shadow: none !important;
42+
}
43+
}
44+
45+
@media (max-width: 768px) {
46+
47+
.mobile-nav-wrapper {
48+
position: relative;
49+
z-index: 999;
50+
}
51+
52+
/* position hamburger & cross */
53+
.hamburger {
54+
display: flex;
55+
width: 30px;
56+
height: 22px;
57+
flex-direction: column;
58+
justify-content: space-between;
59+
cursor: pointer;
60+
61+
position: fixed;
62+
/* always visible */
63+
top: 16px;
64+
right: 16px;
65+
/* 🔹 fully right aligned */
66+
z-index: 1002;
67+
/* above overlay */
68+
}
69+
70+
.hamburger span {
71+
height: 3px;
72+
width: 100%;
73+
background: #222;
74+
border-radius: 3px;
75+
transition: 0.3s ease;
76+
}
77+
78+
/* FULLSCREEN OVERLAY */
79+
.header-nav ul {
80+
position: fixed;
81+
inset: 0;
82+
background: #ffffffee;
83+
backdrop-filter: blur(4px);
84+
display: flex;
85+
flex-direction: column;
86+
padding-top: 100px;
87+
padding-left: 24px;
88+
padding-right: 24px;
89+
gap: 1.2rem;
90+
transform: translateY(-100%);
91+
opacity: 0;
92+
pointer-events: none;
93+
transition: 0.35s ease;
94+
}
95+
96+
/* SHOW MENU */
97+
.nav-toggle:checked~.header-nav ul {
98+
transform: translateY(0);
99+
opacity: 1;
100+
pointer-events: auto;
101+
}
102+
103+
/* ANIMATE BUTTON INTO X */
104+
.nav-toggle:checked+.hamburger span:nth-child(1) {
105+
transform: translateY(9px) rotate(45deg);
106+
}
107+
108+
.nav-toggle:checked+.hamburger span:nth-child(2) {
109+
opacity: 0;
110+
}
111+
112+
.nav-toggle:checked+.hamburger span:nth-child(3) {
113+
transform: translateY(-9px) rotate(-45deg);
114+
}
115+
116+
/* MOBILE ITEM STYLE */
117+
.header-nav a {
118+
padding: 14px 10px;
119+
font-size: 18px;
120+
border-radius: 6px;
121+
}
122+
123+
.header-nav a.active {
124+
background: rgba(0, 0, 0, 0.1);
125+
}
126+
}

0 commit comments

Comments
 (0)