Responsive Docs

Author: AttAditya

src/App.css

@@ -46,3 +46,9 @@
   height: 100%;
 }
 
+@media (max-width: 800px) {
+  .app-container {
+    flex-direction: column;
+  }
+}
+

src/App.jsx

@@ -15,6 +15,7 @@ export function App() {
   const [loading, setLoading] = useState(true);
   const [sidebar, setSidebar] = useState([]);
   const [editUrl, setEditUrl] = useState(null);
+  const [sidebarVisible, setSidebarVisible] = useState(false);
 
   const { getTopics, getContent } = useApi();
 
@@ -42,10 +43,11 @@ export function App() {
 
   return (<>
     <div className="app">
-      <Navbar />
+      <Navbar toggleActive={() => setSidebarVisible(!sidebarVisible)} />
 
       <div className="app-container">
         <Sidebar
+          active={sidebarVisible}
           contents={sidebar}
           switchContent={switchContent}
         />

src/components/Content/style.css

@@ -185,3 +185,9 @@
   color: var(--color-text-secondary);
 }
 
+@media (max-width: 800px) {
+  .content {
+    padding: 2rem;
+  }
+}
+

src/components/Navbar/index.jsx

@@ -1,8 +1,8 @@
-import { Home } from "lucide-react";
+import { Hamburger, Home } from "lucide-react";
 import Logo from "../../assets/GraphScript.png";
 import "./style.css";
 
-export function Navbar() {
+export function Navbar({ toggleActive }) {
   return (<>
     <nav className="navbar">
       <div className="navbar-container">
@@ -11,12 +11,15 @@ export function Navbar() {
           <h1 className="navbar-title">GraphScript Docs</h1>
         </div>
 
-        <a
-          href="/"
-          className="navbar-home"
-        >
-          <Home />
-        </a>
+        <div className="navbar-actions">
+          <span className="navbar-sidebar-hamburger" onClick={toggleActive}>
+            <Hamburger />
+          </span>
+
+          <a href="/" className="navbar-home">
+            <Home />
+          </a>
+        </div>
       </div>
     </nav>
   </>);

src/components/Navbar/style.css

@@ -39,11 +39,18 @@
   width: auto;
 }
 
-.navbar-home {
+.navbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  height: 100%;
+}
+
+.navbar-actions > * {
   z-index: 1000;
   padding: 0.5rem;
+  height: 100%;
   aspect-ratio: 1;
-  width: 2rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -55,17 +62,28 @@
   color: var(--color-gradient);
 }
 
-.navbar-home:hover {
+:has(.sidebar-wrapper.active) .navbar-sidebar-hamburger,
+.navbar-actions > *:hover {
   opacity: 1;
   box-shadow: 0 0 0.5rem #ffffff33;
 }
 
-.navbar-home:active {
+.navbar-actions > *:active {
   scale: 0.5;
 }
 
-.navbar-home > * {
+.navbar-actions > * > * {
   width: 100%;
   height: 100%;
 }
 
+.navbar-sidebar-hamburger {
+  display: none;
+}
+
+@media (max-width: 800px) {
+  .navbar-sidebar-hamburger {
+    display: flex;
+  }
+}
+

src/components/Sidebar/index.jsx

@@ -1,9 +1,12 @@
 import { SidebarItem } from "../SidebarItem";
 import "./style.css";
 
-export function Sidebar({ contents, switchContent }) {
+export function Sidebar({ active, contents, switchContent }) {
   return (<>
-    <div className="sidebar-wrapper">
+    <div className={[
+      "sidebar-wrapper",
+      active ? "active" : ""
+    ].join(" ")}>
       <div className="sidebar">
         {
           contents.map(section => <div

src/components/Sidebar/style.css

@@ -1,10 +1,12 @@
 .sidebar-wrapper {
   flex: 1;
+  min-width: 20rem;
   margin: 2rem;
   overflow: hidden;
   border-radius: 1rem;
   background: var(--gradient);
   color: var(--color-gradient);
+  position: relative;
 }
 
 .sidebar {
@@ -41,3 +43,24 @@
   gap: 0.5rem;
 }
 
+@media (max-width: 800px) {
+  .sidebar-wrapper {
+    z-index: 2000;
+    top: 4rem;
+    left: 2rem;
+    position: fixed;
+    min-width: none;
+    width: calc(100vw - 4rem);
+    height: calc(100% - 5rem);
+    flex: auto;
+    margin: 0;
+    pointer-events: none;
+    transform: translateY(-50%) scale(0);
+  }
+
+  .sidebar-wrapper.active {
+    pointer-events: auto;
+    transform: translateY(0) scale(1);
+  }
+}
+