feat(web): implement main layout with navbar

Author: MiladSadeghi

web/package-lock.json

@@ -10,7 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.2",
+    "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.4",
     "@tanstack/react-query": "^5.61.5",
     "axios": "^1.7.8",
     "class-variance-authority": "^0.7.1",

web/package.json

@@ -1,5 +1,19 @@
+import { Route, Routes, useLocation } from 'react-router';
+import MainLayout from '@/components/layouts/main-layout/main-layout';
+
 function App() {
-  return <div className="">Test</div>;
+  const location = useLocation();
+  return (
+    <div>
+      <div className="container mx-auto border-l border-r border-gray-700 h-dvh max-w-7xl">
+        <Routes location={location}>
+          <Route element={<MainLayout />}>
+            <Route path="/" />
+          </Route>
+        </Routes>
+      </div>
+    </div>
+  );
 }
 
 export default App;

web/src/App.tsx

@@ -0,0 +1,14 @@
+import Navbar from '@/components/navbar/navbar';
+import { FC } from 'react';
+import { Outlet } from 'react-router';
+
+const MainLayout: FC = () => {
+  return (
+    <>
+      <Navbar />
+      <Outlet />
+    </>
+  );
+};
+
+export default MainLayout;

web/src/components/layouts/main-layout/main-layout.tsx

@@ -0,0 +1,49 @@
+import { FC } from 'react';
+import { NavLink } from 'react-router';
+
+const navbar = [
+  {
+    url: '/',
+    title: 'Basic',
+  },
+  {
+    url: '/bug-fix',
+    title: 'Bug Fix',
+  },
+  {
+    url: '/terraform-template',
+    title: 'Terraform Template',
+  },
+  {
+    url: '/installation',
+    title: 'Installation',
+  },
+  {
+    url: '/helm-template',
+    title: 'Helm Template',
+  },
+];
+
+const Navbar: FC = () => {
+  return (
+    <nav className="flex items-center p-4 border-b border-gray-500 h-14">
+      <div className="flex items-center justify-between w-full gap-4">
+        <img src="/images/logo-svg.svg" className="mr-8" width={60} />
+        <div className="flex items-center gap-5">
+          {navbar.map((link) => (
+            <NavLink
+              to={link.url}
+              className={({ isActive }) =>
+                isActive ? 'text-orange-base]' : ''
+              }
+            >
+              {link.title}
+            </NavLink>
+          ))}
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;

web/src/components/navbar/navbar.tsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

web/src/hooks/use-mobile.tsx

@@ -28,7 +28,15 @@
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
     --radius: 0.5rem
-  }
+  ;
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%}
   .dark {
     --background: 0 0% 3.9%;
     --foreground: 0 0% 98%;
@@ -54,7 +62,15 @@
     --chart-3: 30 80% 55%;
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%
-  }
+  ;
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%}
 }
 @layer base {
   @font-face {
@@ -71,4 +87,12 @@
   body {
     @apply bg-background text-foreground font-figtree;
   }
+}
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
 }

web/src/index.css

@@ -5,7 +5,7 @@ export default {
   theme: {
     extend: {
       fontFamily: {
-        "figtree": ['figtree', 'sans-serif']
+        figtree: ['figtree', 'sans-serif']
       },
       borderRadius: {
         lg: 'var(--radius)',
@@ -15,6 +15,9 @@ export default {
       colors: {
         background: 'hsl(var(--background))',
         foreground: 'hsl(var(--foreground))',
+        orange: {
+          base: "#f86609"
+        },
         card: {
           DEFAULT: 'hsl(var(--card))',
           foreground: 'hsl(var(--card-foreground))'
@@ -52,6 +55,16 @@ export default {
           '3': 'hsl(var(--chart-3))',
           '4': 'hsl(var(--chart-4))',
           '5': 'hsl(var(--chart-5))'
+        },
+        sidebar: {
+          DEFAULT: 'hsl(var(--sidebar-background))',
+          foreground: 'hsl(var(--sidebar-foreground))',
+          primary: 'hsl(var(--sidebar-primary))',
+          'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
+          accent: 'hsl(var(--sidebar-accent))',
+          'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
+          border: 'hsl(var(--sidebar-border))',
+          ring: 'hsl(var(--sidebar-ring))'
         }
       }
     }