diff --git a/public/styles.css b/public/styles.css index 85a48ed..8a8daf5 100644 --- a/public/styles.css +++ b/public/styles.css @@ -36,3 +36,62 @@ font-weight: bold; cursor: pointer; } + +.navbar { + position: relative; + background: #333; + color: #fff; + display: flex; + align-items: center; + padding: 0.5rem 1rem; +} + +.menu-icon { + cursor: pointer; + display: inline-block; +} + +.menu-icon span { + display: block; + width: 25px; + height: 3px; + margin: 5px 0; + background: #fff; + transition: 0.4s; +} + +.nav-links { + list-style: none; + margin: 0; + padding: 0; + display: none; /* Hidden by default; shown when .active */ + position: absolute; + top: 100%; /* Appear below the navbar */ + left: 0; /* Aligned left under the hamburger */ + width: 200px; /* Fixed width for the dropdown panel */ + background: #333; + box-shadow: 0 2px 8px rgba(0,0,0,0.4); /* Optional shadow for a "dropdown" effect */ + border-radius: 4px; /* Slight rounding for a nicer look */ +} + +.nav-links li { + border-bottom: 1px solid #444; +} + +.nav-links li:last-child { + border-bottom: none; /* No border on the last item */ +} + +.nav-links li a { + color: #fff; + text-decoration: none; + display: block; + padding: 0.75rem 1rem; + white-space: nowrap; /* Prevent awkward text wrapping */ +} + +/* Show the nav-links when .active is toggled by JavaScript */ +.nav-links.active { + display: block; +} + diff --git a/views/partials/nav.ejs b/views/partials/nav.ejs new file mode 100644 index 0000000..cf9b1de --- /dev/null +++ b/views/partials/nav.ejs @@ -0,0 +1,15 @@ + + diff --git a/views/transfer.ejs b/views/transfer.ejs index e40f935..a2ba389 100644 --- a/views/transfer.ejs +++ b/views/transfer.ejs @@ -5,6 +5,7 @@ + <%- include('partials/nav') %>